Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove MV2 code from "Create an extension tutorial, part 1" #3277

Merged
merged 48 commits into from
Oct 25, 2024
Merged
Show file tree
Hide file tree
Changes from 42 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
5635949
Update part1-simple-extension.md
bhuvanapriyap Sep 24, 2024
26fbc2c
remove tabset tagging
mikehoffms Sep 24, 2024
d890aee
see also
mikehoffms Sep 24, 2024
b9a9f29
todo asking if repo updated to MV3 yet
mikehoffms Sep 24, 2024
e084a75
remove statement about repo using mv3 or mv2
mikehoffms Sep 25, 2024
823b3a1
remove todo re part 2 from Next Step
mikehoffms Sep 25, 2024
2648cd0
numsteps, show toggle On, how run after sideload
mikehoffms Sep 25, 2024
26c7b81
initial h2, clarify article/scenario
mikehoffms Sep 30, 2024
ac30db1
clarify Sideloading title
mikehoffms Sep 30, 2024
0cbfb42
update link for macOS deploy Edge in hub
mikehoffms Sep 30, 2024
f62fd85
describe other, hard way
mikehoffms Sep 30, 2024
30a13a1
fix "Chromium" in title in hub & docset landing
mikehoffms Oct 2, 2024
594838c
lowercase "extensions" in landing page title
mikehoffms Oct 2, 2024
b9410ef
move Sideload up in toc
mikehoffms Oct 2, 2024
60090ba
Merge branch 'main' into user/bhuvanap/removemv2
mikehoffms Oct 2, 2024
6c5dc0f
remove mv2 note, clarify tut titles
mikehoffms Oct 2, 2024
c00096c
clarify tut titles, consistently
mikehoffms Oct 2, 2024
a4c05e6
link to Sideload to test, where appropriate
mikehoffms Oct 2, 2024
55f3451
quotes for title: yaml field
mikehoffms Oct 2, 2024
9d27c65
clean up desc of next step
mikehoffms Oct 2, 2024
e52c653
fix html filename in heading
mikehoffms Oct 2, 2024
be606b3
add picture of simple extension running
mikehoffms Oct 2, 2024
acd8f26
describe part 1 vs part 2, improve Intros
mikehoffms Oct 2, 2024
a535349
bold button label
mikehoffms Oct 2, 2024
3fdc5a2
show filename above each listing
mikehoffms Oct 2, 2024
2a1df4d
clean up comments for filenames of listings
mikehoffms Oct 2, 2024
9dbe23d
different desc: for 1 vs 2, must open webpage
mikehoffms Oct 4, 2024
97ec396
different "name" & "description" in part 1&2 code
mikehoffms Oct 4, 2024
a0ecfd3
date
mikehoffms Oct 4, 2024
db9f19b
deleted spurious "8." line
mikehoffms Oct 4, 2024
c39dfbc
remove desc of other demo
mikehoffms Oct 4, 2024
ca9b86c
starting-state dirs
mikehoffms Oct 4, 2024
6ddc907
update and add images
mikehoffms Oct 4, 2024
2ff2988
recomm demo, not doing coding steps
mikehoffms Oct 4, 2024
b950781
Step 6: say to create this file & already done
mikehoffms Oct 4, 2024
6cd6ec4
link directly to files in samples repo
mikehoffms Oct 4, 2024
ffdaca2
add aka links from samples repo readme
mikehoffms Oct 4, 2024
2e6ccfc
fix alt-text as "Stars" in popup.html in part 1
mikehoffms Oct 4, 2024
eb644a0
strike (which is not a webpage)
mikehoffms Oct 4, 2024
17c1d6e
clarify sample path examples
mikehoffms Oct 4, 2024
b1cbb7e
remove photo, remove "javascript", describe ux
mikehoffms Oct 4, 2024
a0c17d9
"samples repo">"MicrosoftEdge-Extensions repo"
mikehoffms Oct 4, 2024
417cda7
retitle, shift focus from tut to sample
mikehoffms Oct 5, 2024
fa2bd88
strike "standard" HTML button
mikehoffms Oct 5, 2024
c95fb64
typo We recommending
mikehoffms Oct 7, 2024
8e25ab7
same typo in Part 1
mikehoffms Oct 7, 2024
f63f101
clarify "with" a Display button
mikehoffms Oct 7, 2024
8588c8b
Merge branch 'main' into user/bhuvanap/removemv2
mikehoffms Oct 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions microsoft-edge/developer/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ landingContent:
- text: Getting started tutorial
url: ../extensions-chromium/getting-started/index.md

- text: Port a Chromium extension to Microsoft Edge
- text: Port a Chrome extension to Microsoft Edge
url: ../extensions-chromium/developer-guide/port-chrome-extension.md
- linkListType: how-to-guide
links:
Expand All @@ -108,7 +108,7 @@ landingContent:
- text: Register as a Microsoft Edge extension developer
url: ../extensions-chromium/publish/create-dev-account.md

- text: Create a simple extension
- text: "Tutorial part 1: Create a simple extension"
url: ../extensions-chromium/getting-started/part1-simple-extension.md
# =============================================================================
# Row 2 with 3 cards
Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools-guide-chromium/sources/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ When the debugger steps into code that you don't recognize, you might want to ad

See also:
* [Content scripts](https://developer.mozilla.org/Add-ons/WebExtensions/Content_scripts)
* [Create an extension tutorial, part 2](../../extensions-chromium/getting-started/part2-content-scripts.md)
* [Tutorial part 2: Add JavaScript to the extension](../../extensions-chromium/getting-started/part2-content-scripts.md)


<!-- ------------------------------ -->
Expand Down
4 changes: 2 additions & 2 deletions microsoft-edge/extensions-chromium/developer-guide/sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -316,8 +316,8 @@ See [Types](https://developer.chrome.com/docs/extensions/reference/sidePanel/#ty
* [Supported APIs for Microsoft Edge extensions](../developer-guide/api-support.md)
* [Declare API permissions in the manifest](../developer-guide/declare-permissions.md)
* [Manifest file format for extensions](../getting-started/manifest-format.md)
* [Create an extension tutorial, part 1](../getting-started/part1-simple-extension.md)
* [Create an extension tutorial, part 2](../getting-started/part2-content-scripts.md)
* [Tutorial part 1: Create a simple extension](../getting-started/part1-simple-extension.md)
* [Tutorial part 2: Add JavaScript to the extension](../getting-started/part2-content-scripts.md)


<!-- ====================================================================== -->
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -1,42 +1,66 @@
---
title: Sideload an extension
description: How to test an extension by sideloading it in the browser.
title: Sideload an extension to install and test it locally
description: Test an extension locally by sideloading it, so that it's locally installed in your instance of Microsoft Edge.
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.service: microsoft-edge
ms.subservice: extensions
ms.date: 11/07/2022
ms.date: 10/03/2024
---
# Sideload an extension
# Sideload an extension to install and test it locally

During development, you can use Microsoft Edge browser to run and debug your extension safely. By sideloading your extension locally in your browser, you can run and test your extension without changing any settings. This helps you test new extensions safely.
To test an extension quickly and safely, sideload the extension in your own copy of Microsoft Edge, which means locally installing the extension. You can then run and test your extension without having to upload the extension to the Microsoft Edge Add-ins website (the _store_) and then install the extension from there.

To sideload an extension into Microsoft Edge:

1. In Microsoft Edge, select **Settings and more** (...) > **Extensions**.
<!-- ====================================================================== -->
## Locally installing and running an extension

![Opening the edge://extensions page](./extension-sideloading-images/part1-threedots.png)
To sideload an extension into Microsoft Edge, so that it's locally installed in your browser for testing:

The **Extensions** pop-up box opens.
1. In Microsoft Edge, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button, next to the Address bar, if this icon is displayed. Or, select **Settings and more** (...) > **Extensions**. The **Extensions** pop-up opens:

1. Click **Manage extensions**. The **Extensions** page (`edge://extensions`) opens in a new tab.
![The Extensions popup when no extensions are installed](./extension-sideloading-images/extensions-popup-no-extensions.png)

1. Turn on the **Developer mode** toggle:
1. Click **Manage extensions**. The **Extensions** management page opens in a new tab:

![Turning on Developer Mode](./extension-sideloading-images/part1-developermode-toggle.png)

1. When installing your extension for the first time, click the **Load unpacked** button. The **Select the extension directory** dialog opens.
1. Turn on the **Developer mode** toggle.

1. When installing your extension for the first time, click the **Load unpacked** (![The "Load unpacked" icon](./extension-sideloading-images/load-unpacked-icon.png)) button. The **Select the extension directory** dialog opens.

1. Select the directory that contains the extension's source files, such as `manifest.json`, and then click the **Select Folder** button.

Example path for [Tutorial part 1: Create a simple extension](./part1-simple-extension.md):

1. Select the directory that contains your extension source files, and then click the **Select Folder** button. Your extension is installed in your browser, similar to extensions that are installed from the store:
`C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part1\part1\`

Example path for [Tutorial part 2: Add JavaScript to the extension](./part2-content-scripts.md):

`C:\Users\myUsername\GitHub\MicrosoftEdge-Extensions\Extension samples\extension-getting-started-part2\extension-getting-started-part2\`

The extension is installed in your browser, similar to extensions that are installed from the store:

![Installed extensions page, showing a sideloaded extension](./extension-sideloading-images/part1-installed-extension.png)

1. To run the extension, first open a webpage, if the extension requires that a webpage is open. For example, go to a webpage, such as [Microsoft.com](https://www.microsoft.com), in a new window or tab.

1. In the upper right of Microsoft Edge, click the **Extensions** (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) button. Or, select **Settings and more** (...) > **Extensions**.

The **Extensions** pop-up opens:

![The Extensions pop-up](./extension-sideloading-images/extensions-popup.png)

1. Click the extension's icon or name. The extension opens, and the extension's icon is added next to the Address bar and Extensions (![Extensions icon](./extension-sideloading-images/extensions-icon.png)) icon:

![An extension running](./extension-sideloading-images/extension-running.png)


<!-- ====================================================================== -->
## Updating an extension
## Locally updating an extension

To update a sideloaded extension:
To update an extension that's been installed locally (sideloaded) in your browser:

1. Make any required changes to the extension.

Expand All @@ -46,10 +70,18 @@ To update a sideloaded extension:


<!-- ====================================================================== -->
## Removing an extension
## Locally removing an extension

To remove the extension from your browser:
To remove an extension that's been installed locally (sideloaded) in your browser:

1. Go to `edge://extensions`.

1. On the extension, click **Remove**.


<!-- ====================================================================== -->
## See also
<!-- all links in article -->

* [Tutorial part 1: Create a simple extension](./part1-simple-extension.md)
* [Tutorial part 2: Add JavaScript to the extension](./part2-content-scripts.md)
3 changes: 2 additions & 1 deletion microsoft-edge/extensions-chromium/getting-started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ ms.subservice: extensions
ms.date: 02/06/2022
---
# Extension concepts and architecture
<!-- https://aka.ms/EdgeAddonsLearn -->

This article introduces concepts about building a Microsoft Edge extension. Follow along to understand how multi-tab browsers work.

Expand Down Expand Up @@ -72,4 +73,4 @@ An extension provides opt-in permissions at install time. You specify the exten
<!-- ====================================================================== -->
## Next steps

For information on getting started with your extension, see [Create an extension tutorial, part 1](part1-simple-extension.md).
For information on getting started with your extension, see [Tutorial part 1: Create a simple extension](part1-simple-extension.md).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading