| template |
|---|
true |
Level :
This extension will keep some data in between being closed and re-opened.
To showcase this we will activate/deactivate the extension by clicking on it and the icon will change to reflect this state but the most important is that this state will be saved to not reset when you close your browser.
You'll need a web browser to load your extension in.
Ideally one of the following : Firefox, Brave, Chrom(e/ium), Edge
To load an extension in dev mode you'll need to follow steps depending on your browser
Firefox : Paste "about:debugging" in your address bar and hit enter, click "This Firefox" (in newer versions of Firefox), click "Load Temporary Add-on", then select any file in your extension's directory.
Brave : Go to brave://extensions/ and enable Developer mode at the top right.
You will then have the option load unpacked.
Click load unpacked (i.e. "development") and select the extension directory.
Chrom(e/ium) :
- Open the Extension Management page by navigating to chrome://extensions.
- Alternatively, open this page by clicking on the Extensions menu button and selecting Manage Extensions at the bottom of the menu.
- Alternatively, open this page by clicking on the Chrome menu, hovering over More Tools then selecting Extensions
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the Load unpacked button and select the extension directory.
The key file is the manifest.json
- The "background" part list the scrpits to start your extension.
- The role of the manifest is to describe to the browser what the extension will do, which file are going to be used, in which way, and what are the special permissions required by your extension (like storing data, making requests, looking at the cookies etc ...)
- We need to specify the "storage" value in "permissions" to indicate that our extension will store information.
MDN: How to use an icon in the extension bar
MDN: How to change the icon of your extension through code