| template |
|---|
true |
Level :
This extension will display a popup containing a UI when you click on it.
In this exact case our script will show a number and two button to make the number go up or down.
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 HTML document which will be in your popup is the on specified in browseraction.default_popup
- 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 ...)
For security reason you can only execute JS from the js files linked. This means that inline script like <button onclick="console.log('I got clicked')"/> doesn't work.