Click inside the box to start taking notes on this page.
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/apply-css/README.md:
--------------------------------------------------------------------------------
1 | # apply-css
2 |
3 | **This add-on injects CSS into web pages. The `addons.mozilla.org` domain disallows this operation, so this add-on will not work properly when it's run on pages in the `addons.mozilla.org` domain.**
4 |
5 | ## What it does
6 |
7 | This extension includes:
8 |
9 | * a background script, "background.js"
10 | * a page action
11 |
12 | It adds the [page action](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/pageAction)
13 | to every tab the user opens. Clicking the page action
14 | for a tab applies some CSS using [tabs.insertCSS](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS).
15 |
16 | Clicking again removes the CSS using [tabs.removeCSS](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/tabs/removeCSS).
17 |
18 | ## What it shows
19 |
20 | * some basic page action functions
21 | * how to apply and remove CSS.
22 |
--------------------------------------------------------------------------------
/apply-css/icons/LICENSE:
--------------------------------------------------------------------------------
1 | These icons are taken from the "Material Design" iconset designed by Google:
2 | https://google.github.io/material-design-icons/.
3 |
--------------------------------------------------------------------------------
/apply-css/icons/off.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/apply-css/icons/on.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/apply-css/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Adds a page action to toggle applying CSS to pages.",
4 | "manifest_version": 2,
5 | "name": "apply-css",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
8 |
9 | "background": {
10 | "scripts": ["background.js"]
11 | },
12 |
13 | "page_action": {
14 | "default_icon": "icons/off.svg",
15 | "browser_style": true
16 | },
17 |
18 | "permissions": [
19 | "activeTab",
20 | "tabs"
21 | ]
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/beastify/beasts/frog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/beastify/beasts/frog.jpg
--------------------------------------------------------------------------------
/beastify/beasts/snake.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/beastify/beasts/snake.jpg
--------------------------------------------------------------------------------
/beastify/beasts/turtle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/beastify/beasts/turtle.jpg
--------------------------------------------------------------------------------
/beastify/icons/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | The icon "beasts-32.png" is taken from the IconBeast Lite iconset, and used under the terms of its license (http://www.iconbeast.com/faq/), with a link back to the website: http://www.iconbeast.com/free/.
3 |
4 | The icon "beasts-48.png" is taken from Aha-Soft’s Free Retina iconset, and used under the terms of its license (http://www.aha-soft.com/free-icons/free-retina-icon-set/), with a link back to the website: http://www.aha-soft.com/.
5 |
--------------------------------------------------------------------------------
/beastify/icons/beasts-32-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/beastify/icons/beasts-32-light.png
--------------------------------------------------------------------------------
/beastify/icons/beasts-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/beastify/icons/beasts-32.png
--------------------------------------------------------------------------------
/beastify/icons/beasts-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/beastify/icons/beasts-48.png
--------------------------------------------------------------------------------
/beastify/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
4 | "manifest_version": 2,
5 | "name": "Beastify",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
8 | "icons": {
9 | "48": "icons/beasts-48.png"
10 | },
11 |
12 | "permissions": [
13 | "activeTab"
14 | ],
15 |
16 | "browser_action": {
17 | "default_icon": "icons/beasts-32.png",
18 | "theme_icons": [{
19 | "light": "icons/beasts-32-light.png",
20 | "dark": "icons/beasts-32.png",
21 | "size": 32
22 | }],
23 | "default_title": "Beastify",
24 | "default_popup": "popup/choose_beast.html"
25 | },
26 |
27 | "web_accessible_resources": [
28 | "beasts/*.jpg"
29 | ]
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/beastify/popup/choose_beast.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width: 100px;
3 | }
4 |
5 | .hidden {
6 | display: none;
7 | }
8 |
9 | button {
10 | border: none;
11 | width: 100%;
12 | margin: 3% auto;
13 | padding: 4px;
14 | text-align: center;
15 | font-size: 1.5em;
16 | cursor: pointer;
17 | background-color: #E5F2F2;
18 | }
19 |
20 | button:hover {
21 | background-color: #CFF2F2;
22 | }
23 |
24 | button[type="reset"] {
25 | background-color: #FBFBC9;
26 | }
27 |
28 | button[type="reset"]:hover {
29 | background-color: #EAEA9D;
30 | }
31 |
--------------------------------------------------------------------------------
/beastify/popup/choose_beast.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Can't beastify this web page.
Try a different page.
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/bookmark-it/README.md:
--------------------------------------------------------------------------------
1 | # bookmark-it
2 |
3 | ## What it does
4 |
5 | Displays a simple button in the menu bar that toggles a bookmark for the currently active tab.
6 |
7 | To display the button, the extension registers a [browserAction](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/browserAction) in the manifest.
8 |
9 | A background script will listen for tab events and update the browserAction icon correspondingly. It also listens for `browserAction.onClicked` events to create or remove a bookmark when the user has clicked the icon.
10 |
11 | ## What it shows
12 |
13 | * how to use the various `bookmarks` functions
14 | * create a bookmark
15 | * remove a bookmark
16 | * search bookmarks by url
17 | * how to register a browserAction
18 | * how to listen for tab changes
19 |
--------------------------------------------------------------------------------
/bookmark-it/icons/LICENSE:
--------------------------------------------------------------------------------
1 | All images in this folder were created by Johann Hofmann. The creator waives all rights to the images under the CC0 Public Domain Dedication. https://creativecommons.org/publicdomain/zero/1.0/
2 |
--------------------------------------------------------------------------------
/bookmark-it/icons/bookmark-it.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/bookmark-it/icons/bookmark-it.png
--------------------------------------------------------------------------------
/bookmark-it/icons/bookmark-it@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/bookmark-it/icons/bookmark-it@2x.png
--------------------------------------------------------------------------------
/bookmark-it/icons/star-empty-19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/bookmark-it/icons/star-empty-19.png
--------------------------------------------------------------------------------
/bookmark-it/icons/star-empty-38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/bookmark-it/icons/star-empty-38.png
--------------------------------------------------------------------------------
/bookmark-it/icons/star-filled-19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/bookmark-it/icons/star-filled-19.png
--------------------------------------------------------------------------------
/bookmark-it/icons/star-filled-38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/bookmark-it/icons/star-filled-38.png
--------------------------------------------------------------------------------
/bookmark-it/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "Bookmark it!",
4 | "version": "1.1",
5 | "description": "A simple bookmark button",
6 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/bookmark-it",
7 | "icons": {
8 | "48": "icons/bookmark-it.png",
9 | "96": "icons/bookmark-it@2x.png"
10 | },
11 |
12 | "permissions": [
13 | "bookmarks",
14 | "tabs"
15 | ],
16 |
17 | "browser_action": {
18 | "default_icon": "icons/star-empty-38.png",
19 | "default_title": "Bookmark it!"
20 | },
21 |
22 | "background": {
23 | "scripts": ["background.js"]
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/borderify/README.md:
--------------------------------------------------------------------------------
1 | # borderify
2 |
3 | **This add-on injects JavaScript into web pages. The `addons.mozilla.org` domain disallows this operation, so this add-on will not work properly when it's run on pages in the `addons.mozilla.org` domain.**
4 |
5 | ## What it does
6 |
7 | This extension just includes:
8 |
9 | * a content script, "borderify.js", that is injected into any pages
10 | under "mozilla.org/" or any of its subdomains
11 |
12 | The content script draws a border around the document.body.
13 |
14 | ## What it shows
15 |
16 | * how to inject content scripts declaratively using manifest.json
17 |
--------------------------------------------------------------------------------
/borderify/borderify.js:
--------------------------------------------------------------------------------
1 | /*
2 | Just draw a border round the document.body.
3 | */
4 | document.body.style.border = "5px solid red";
5 |
--------------------------------------------------------------------------------
/borderify/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The icon “border-48.png” is taken from the Google Material Design iconset, and is used under the terms of the Creative Commons Attribution-ShareAlike license: http://creativecommons.org/licenses/by-sa/3.0/.
2 |
--------------------------------------------------------------------------------
/borderify/icons/border-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/borderify/icons/border-48.png
--------------------------------------------------------------------------------
/borderify/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
4 | "manifest_version": 2,
5 | "name": "Borderify",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
8 | "icons": {
9 | "48": "icons/border-48.png"
10 | },
11 |
12 | "content_scripts": [
13 | {
14 | "matches": ["*://*.mozilla.org/*"],
15 | "js": ["borderify.js"]
16 | }
17 | ]
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/chill-out/README.md:
--------------------------------------------------------------------------------
1 | # chill-out
2 |
3 | ## What it does
4 |
5 | After 6 seconds of inactivity (defined as the user not having navigated
6 | or switched away from the active tab) display a
7 | [page action](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/pageAction)
8 | for that tab.
9 |
10 | When the user clicks the page action, navigate to https://giphy.com/explore/cat.
11 |
12 | The delay of 6 seconds is to make the extension's behavior obvious, but such a short
13 | period is not recommended in practical applications. Note that in Chrome, alarms do not
14 | fire in under a minute. In Chrome:
15 |
16 | * if you install this extension "unpacked", you'll see a warning
17 | in the console, but the alarm will still go off after 6 seconds
18 | * if you package the extension and install it, then the alarm will go off after
19 | a minute.
20 |
21 | ## What it shows
22 |
23 | How to:
24 |
25 | * use various `tabs` functions.
26 | * show and hide a page action.
27 | * set alarms and handle alarms going off.
28 |
--------------------------------------------------------------------------------
/chill-out/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The icon "chillout-32.png" is taken from the IconBeast Lite iconset, and used under the terms of its license (http://www.iconbeast.com/faq/), with a link back to the website: http://www.iconbeast.com/free/.
2 |
3 | The icon "chillout-48.png" is taken from Aha-Soft’s Free Retina iconset, and used under the terms of its license (http://www.aha-soft.com/free-icons/free-retina-icon-set/), with a link back to the website: http://www.aha-soft.com/.
4 |
--------------------------------------------------------------------------------
/chill-out/icons/chillout-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/chill-out/icons/chillout-32.png
--------------------------------------------------------------------------------
/chill-out/icons/chillout-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/chill-out/icons/chillout-48.png
--------------------------------------------------------------------------------
/chill-out/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "chillout-page-action",
4 | "version": "1.0",
5 | "description": "Show a page action after a period of inactivity. Show cat gifs when the page action is clicked.",
6 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/chill-out",
7 | "icons": {
8 | "48": "icons/chillout-48.png"
9 | },
10 |
11 | "permissions": [
12 | "alarms",
13 | "tabs"
14 | ],
15 |
16 | "page_action": {
17 | "default_icon": "icons/chillout-32.png",
18 | "default_title": "Chill out"
19 | },
20 |
21 | "background": {
22 | "scripts": ["background.js"]
23 | }
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/commands/README.md:
--------------------------------------------------------------------------------
1 | # commands
2 |
3 | This extension shows how to use the `commands` manifest key to register keyboard shortcuts for your extension.
4 |
5 | It registers a shortcut (Ctrl+Shift+U) to send a command to the extension (Command+Shift+U on a Mac).
6 | When the user enters the shortcut, the extension opens a new browser tab and loads https://developer.mozilla.org into it.
7 |
8 | It also adds an [options page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages) to the extension, which enables the user to change the registered shortcut for the extension. Just open the options page, then type a new value into the textbox (for example: "Ctrl+Shift+O") and press "Update keyboard shortcut". To reset the shortcut to its original value, press "Reset keyboard shortcut".
9 |
--------------------------------------------------------------------------------
/commands/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Sample Commands Extension",
3 | "description": "Press Ctrl+Shift+U to send an event (Command+Shift+U on a Mac).",
4 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/commands",
5 | "manifest_version": 2,
6 | "version": "1.0",
7 |
8 | "browser_specific_settings": {
9 | "gecko": {
10 | "id": "commands-demo@mozilla.org",
11 | "strict_min_version": "60.0b5"
12 | }
13 | },
14 |
15 | "background": {
16 | "scripts": ["background.js"]
17 | },
18 |
19 | "commands": {
20 | "toggle-feature": {
21 | "suggested_key": { "default": "Ctrl+Shift+U" },
22 | "description": "Send a 'toggle-feature' event to the extension"
23 | }
24 | },
25 |
26 | "options_ui": {
27 | "page": "options.html",
28 | "browser_style": true
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/commands/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/content-script-register/background.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | let registered = null;
4 |
5 | async function registerScript(message) {
6 |
7 | let hosts = message.hosts;
8 | let code = message.code;
9 |
10 | if (registered) {
11 | registered.unregister();
12 | }
13 |
14 | registered = await browser.contentScripts.register({
15 | matches: hosts,
16 | js: [{code}],
17 | runAt: "document_idle"
18 | });
19 |
20 | }
21 |
22 | browser.runtime.onMessage.addListener(registerScript);
23 |
--------------------------------------------------------------------------------
/content-script-register/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The icon "if_source_code_103710.svg" is from picol.org (http://www.picol.org/) and is used under the terms of the Creative Commons Attribution license: http://creativecommons.org/licenses/by/3.0/.
2 |
--------------------------------------------------------------------------------
/content-script-register/icons/if_source_code_103710.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/content-script-register/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "Content script registration",
5 | "version": "1.1",
6 |
7 | "browser_specific_settings": {
8 | "gecko": {
9 | "id": "content-script-example@mozilla.org",
10 | "strict_min_version": "59.0a1"
11 | }
12 | },
13 |
14 | "description": "Demonstration of contentScripts.register.",
15 | "icons": {
16 | "48": "icons/if_source_code_103710.svg"
17 | },
18 |
19 | "permissions": [
20 | ""
21 | ],
22 |
23 | "browser_action": {
24 | "default_icon": {
25 | "32" : "icons/if_source_code_103710.svg"
26 | },
27 | "default_title": "Content script",
28 | "default_popup": "popup/content-script.html",
29 | "browser_style": true
30 | },
31 |
32 | "background": {
33 | "scripts": ["background.js"]
34 | }
35 |
36 | }
37 |
--------------------------------------------------------------------------------
/content-script-register/popup/content-script.css:
--------------------------------------------------------------------------------
1 |
2 | #outer-wrapper {
3 | padding: 0.5em;
4 | }
5 |
6 | input {
7 | width: 100%;
8 | margin-bottom: 1em;
9 | }
10 |
11 | textarea {
12 | width: 100%;
13 | resize: none;
14 | border: 1px solid #e4e4e4;
15 | margin-bottom: 1em;
16 | }
17 |
--------------------------------------------------------------------------------
/content-script-register/popup/content-script.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/history-deleter/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The history.svg” icon is taken from the Font Awesome iconset (http://fontawesome.io/icons/) and is used under the terms of its license: http://fontawesome.io/license/.
2 |
--------------------------------------------------------------------------------
/history-deleter/icons/history.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/history-deleter/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "background": {
3 | "scripts": ["background.js"]
4 | },
5 | "description": "Gives a popup to list and delete history on a domain.",
6 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/history-deleter",
7 | "page_action": {
8 | "default_title": "History deleter",
9 | "default_popup": "history.html",
10 | "default_icon": "icons/history.svg"
11 | },
12 | "icons": {
13 | "48": "icons/history.svg",
14 | "96": "icons/history.svg"
15 | },
16 | "permissions": [
17 | "activeTab",
18 | "history",
19 | "tabs"
20 | ],
21 | "manifest_version": 2,
22 | "name": "History Deleter",
23 | "version": "1.0"
24 | }
25 |
--------------------------------------------------------------------------------
/http-response/README.md:
--------------------------------------------------------------------------------
1 | # HTTP Response parser
2 |
3 | ## What it does
4 |
5 | Listens to HTTP Responses from example.com and changes the body of the response as it comes through. So that the word "Example" on https://example.com becomes "WebExtension Example".
6 |
7 | ## What it shows
8 |
9 | How to use the response parser on bytes.
10 |
11 | Icon is from: https://www.iconfinder.com/icons/763339/draw_edit_editor_pen_pencil_tool_write_icon#size=128
12 |
--------------------------------------------------------------------------------
/http-response/background.js:
--------------------------------------------------------------------------------
1 | function listener(details) {
2 | let filter = browser.webRequest.filterResponseData(details.requestId);
3 | let decoder = new TextDecoder("utf-8");
4 | let encoder = new TextEncoder();
5 |
6 | filter.ondata = event => {
7 | let str = decoder.decode(event.data, {stream: true});
8 | // Just change any instance of Example in the HTTP response
9 | // to WebExtension Example.
10 | str = str.replace(/Example/g, 'WebExtension Example');
11 | filter.write(encoder.encode(str));
12 | filter.disconnect();
13 | }
14 |
15 | return {};
16 | }
17 |
18 | browser.webRequest.onBeforeRequest.addListener(
19 | listener,
20 | {urls: ["https://example.com/*"], types: ["main_frame"]},
21 | ["blocking"]
22 | );
23 |
--------------------------------------------------------------------------------
/http-response/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Altering HTTP responses",
4 | "manifest_version": 2,
5 | "name": "http-response-filter",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/http-response",
8 | "icons": {
9 | "48": "pen.svg"
10 | },
11 |
12 | "permissions": [
13 | "webRequest", "webRequestBlocking", "https://example.com/*"
14 | ],
15 |
16 | "background": {
17 | "scripts": ["background.js"]
18 | },
19 |
20 | "browser_specific_settings": {
21 | "gecko": {
22 | "strict_min_version": "57.0a1"
23 | }
24 | }
25 |
26 | }
27 |
--------------------------------------------------------------------------------
/http-response/pen.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/imagify/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Adds a sidebar offering a file picker and drap and drop zone. When an image file is chosen the active tab's body content is replaced with file selected. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#imagify",
4 | "manifest_version": 2,
5 | "name": "Imagify",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/imagify",
8 |
9 | "permissions": [
10 | "tabs",
11 | ""
12 | ],
13 |
14 | "sidebar_action": {
15 | "default_title": "Imagify",
16 | "default_panel": "sidebar/sidebar.html"
17 | },
18 |
19 | "web_accessible_resources": [
20 | "/viewer.html"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/imagify/sidebar/sidebar.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width: 100%;
3 | height: 100%;
4 | }
5 |
6 | #drop_zone {
7 | border: 5px solid blue;
8 | width: 100%;
9 | height: 100%;
10 | }
11 |
12 | #drop_zone_label {
13 | margin: 1em;
14 | display: block;
15 | }
--------------------------------------------------------------------------------
/imagify/sidebar/sidebar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Drag an image file into this Drop Zone ...
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/imagify/viewer.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | img {
7 | width: 100%;
8 | }
9 |
--------------------------------------------------------------------------------
/imagify/viewer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/imagify/viewer.js:
--------------------------------------------------------------------------------
1 | const params = new URLSearchParams(window.location.search);
2 | const imageBlobURL = params.get("blobURL");
3 | document.querySelector("img").setAttribute("src", imageBlobURL);
4 |
--------------------------------------------------------------------------------
/latest-download/README.md:
--------------------------------------------------------------------------------
1 | # latest-download
2 |
3 | ## What it does ##
4 |
5 | The extension includes a browser action with a popup.
6 |
7 | When the user clicks the browser action button, the popup is shown.
8 | The popup displays the most recent download, and has buttons to open the
9 | file or to remove it.
10 |
11 | If the user removes it, the file is removed from disk and from the browser's
12 | downloads history.
13 |
14 | ## What it shows ##
15 |
16 | * how to use various parts of the downloads API
17 |
--------------------------------------------------------------------------------
/latest-download/icons/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.
3 |
--------------------------------------------------------------------------------
/latest-download/icons/page-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/latest-download/icons/page-32.png
--------------------------------------------------------------------------------
/latest-download/icons/page-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/latest-download/icons/page-48.png
--------------------------------------------------------------------------------
/latest-download/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Shows the last downloaded item, and lets you open or delete it",
4 | "manifest_version": 2,
5 | "name": "latest-download",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/latest-download",
8 | "icons": {
9 | "48": "icons/page-48.png"
10 | },
11 |
12 | "permissions": [
13 | "downloads",
14 | "downloads.open"
15 | ],
16 |
17 | "browser_action": {
18 | "browser_style": true,
19 | "default_icon": "icons/page-32.png",
20 | "default_title": "Latest download",
21 | "default_popup": "popup/latest_download.html"
22 | }
23 |
24 | }
25 |
--------------------------------------------------------------------------------
/latest-download/popup/latest_download.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/list-cookies/README.md:
--------------------------------------------------------------------------------
1 | # list-cookies
2 |
3 | ## What it does
4 |
5 | This extensions list the cookies in the active tab.
6 |
7 | # What it shows
8 |
9 | Demonstration of the getAll() function in the cookie API
10 |
--------------------------------------------------------------------------------
/list-cookies/cookies.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width: 500px;
3 | }
4 |
5 | .panel {
6 | padding: 5px;
7 | }
8 |
9 | li {
10 | margin-bottom: 5px;
11 | }
12 |
--------------------------------------------------------------------------------
/list-cookies/cookies.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/list-cookies/icons/cookie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/list-cookies/icons/cookie.png
--------------------------------------------------------------------------------
/list-cookies/icons/cookie@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/list-cookies/icons/cookie@2x.png
--------------------------------------------------------------------------------
/list-cookies/icons/default19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/list-cookies/icons/default19.png
--------------------------------------------------------------------------------
/list-cookies/icons/default38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/list-cookies/icons/default38.png
--------------------------------------------------------------------------------
/list-cookies/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "browser_action": {
3 | "browser_style": true,
4 | "default_title": "List cookies in the active tab",
5 | "default_popup": "cookies.html",
6 | "default_icon": {
7 | "19": "icons/default19.png",
8 | "38": "icons/default38.png"
9 | }
10 | },
11 | "description": "List cookies in the active tab.",
12 | "icons": {
13 | "48": "icons/cookie.png",
14 | "96": "icons/cookie@2x.png"
15 | },
16 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/list-cookies",
17 | "manifest_version": 2,
18 | "name": "List cookies",
19 | "version": "1.0",
20 | "permissions": ["cookies","","tabs"]
21 | }
22 |
--------------------------------------------------------------------------------
/menu-accesskey-visible/_locales/en/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Menu item with access key",
4 | "description": "Name of the extension."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Demonstrates access keys in context menu items (if supported).",
9 | "description": "Description of the add-on."
10 | },
11 |
12 | "menuItemWithAccessKey": {
13 | "message": "Click &here && look at the extension's console",
14 | "description": "Title of context menu item that logs a message on click. The letter after the first '&' is used as an access key. To show a single '&' in the menu, use '&&'."
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/menu-accesskey-visible/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "__MSG_extensionName__",
5 | "description": "__MSG_extensionDescription__",
6 | "version": "1.0",
7 | "default_locale": "en",
8 | "browser_specific_settings": {
9 | "gecko": {
10 | "strict_min_version": "56.0a1"
11 | }
12 | },
13 |
14 | "background": {
15 | "scripts": ["background.js"]
16 | },
17 |
18 | "permissions": [
19 | "menus"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/menu-demo/icons/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.
3 |
4 | The "paint-blue-16", "paint-blue-32", "paint-green-16", and "paint-green-32" icons are adapted from an icon in the ["Outline icons" set](https://www.iconfinder.com/icons/1021026/paint_icon).
5 |
--------------------------------------------------------------------------------
/menu-demo/icons/page-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/page-16.png
--------------------------------------------------------------------------------
/menu-demo/icons/page-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/page-32.png
--------------------------------------------------------------------------------
/menu-demo/icons/page-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/page-48.png
--------------------------------------------------------------------------------
/menu-demo/icons/paint-blue-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/paint-blue-16.png
--------------------------------------------------------------------------------
/menu-demo/icons/paint-blue-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/paint-blue-32.png
--------------------------------------------------------------------------------
/menu-demo/icons/paint-green-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/paint-green-16.png
--------------------------------------------------------------------------------
/menu-demo/icons/paint-green-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-demo/icons/paint-green-32.png
--------------------------------------------------------------------------------
/menu-demo/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "__MSG_extensionName__",
5 | "description": "__MSG_extensionDescription__",
6 | "version": "1.0",
7 | "default_locale": "en",
8 | "browser_specific_settings": {
9 | "gecko": {
10 | "strict_min_version": "56.0a1"
11 | }
12 | },
13 |
14 | "background": {
15 | "scripts": ["background.js"]
16 | },
17 |
18 | "permissions": [
19 | "menus",
20 | "activeTab"
21 | ],
22 |
23 | "icons": {
24 | "16": "icons/page-16.png",
25 | "32": "icons/page-32.png",
26 | "48": "icons/page-48.png"
27 | },
28 |
29 | "sidebar_action": {
30 | "default_icon": "icons/page-32.png",
31 | "default_title" : "My sidebar",
32 | "default_panel": "sidebar/sidebar.html"
33 | }
34 |
35 | }
36 |
--------------------------------------------------------------------------------
/menu-demo/sidebar/sidebar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
My panel
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/menu-labelled-open/README.md:
--------------------------------------------------------------------------------
1 | # menu-labelled-open
2 |
3 | ## What it does
4 |
5 | This extension adds a menu item that's shown when the context menu is shown over a link. When the item is clicked, it just opens the link in the current tab.
6 |
7 | The extension also listens for the `onShown` event: when this event is fired, the extension gets the hostname for the link and displays it in the menu item's title, so the user knows the hostname for the link they are thinking of clicking.
8 |
9 | ## What it shows
10 |
11 | This extension is a demo of the [`menus.onShown` ](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/onShown) and [`menus.refresh()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/refresh) features of the `menus` API.
12 |
13 | The `onShown` event enables extensions to be notified when the menu is shown. At that point they are able to add, remove, or update their menu items, then refresh the menu using `refresh()`.
14 |
--------------------------------------------------------------------------------
/menu-labelled-open/background.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const openLabelledId = "open-labelled";
4 |
5 | browser.menus.create({
6 | id: openLabelledId,
7 | title: "Open",
8 | contexts: ["link"]
9 | });
10 |
11 | browser.menus.onClicked.addListener((info, tab) => {
12 | if (info.menuItemId === openLabelledId) {
13 | browser.tabs.update(tab.id, {
14 | url: info.linkUrl
15 | });
16 | }
17 | });
18 |
19 | function updateMenuItem(linkHostname) {
20 | browser.menus.update(openLabelledId, {
21 | title: `Open (${linkHostname})`
22 | });
23 | browser.menus.refresh();
24 | }
25 |
26 | browser.menus.onShown.addListener(info => {
27 | if (!info.linkUrl) {
28 | return;
29 | }
30 | let linkElement = document.createElement("a");
31 | linkElement.href = info.linkUrl;
32 | updateMenuItem(linkElement.hostname);
33 | });
34 |
--------------------------------------------------------------------------------
/menu-labelled-open/icon/LICENSE:
--------------------------------------------------------------------------------
1 | The "label.svg" icon is taken from the PICOL iconset (http://www.picol.org/) and is used here under the terms of the Creative Commons Attribution-ShareAlike 3.0 license (https://creativecommons.org/licenses/by-sa/3.0/).
2 |
--------------------------------------------------------------------------------
/menu-labelled-open/icon/label.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/menu-labelled-open/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "Labelled open",
5 | "description": "Adds a context menu item that labels links with the hostname. Demo of onShown and refresh().",
6 | "version": "1.0",
7 | "browser_specific_settings": {
8 | "gecko": {
9 | "strict_min_version": "60.0a1"
10 | }
11 | },
12 | "icons": {
13 | "16": "icon/label.svg",
14 | "32": "icon/label.svg",
15 | "48": "icon/label.svg"
16 | },
17 |
18 | "background": {
19 | "scripts": ["background.js"]
20 | },
21 |
22 | "permissions": [
23 | "menus",
24 | ""
25 | ]
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/menu-remove-element/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Remove element on click",
3 | "description": "Adds a context menu item that shows a panel upon click, from where you can choose to remove the clicked element.",
4 | "version": "1",
5 | "manifest_version": 2,
6 | "background": {
7 | "scripts": ["background.js"]
8 | },
9 | "page_action": {
10 | "default_popup": "popup.html"
11 | },
12 | "permissions": [
13 | "menus",
14 | "activeTab"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/menu-remove-element/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Open a menu in the current tab and right-click on the "Remove element" option.
6 |
7 |
8 |
--------------------------------------------------------------------------------
/menu-search/README.md:
--------------------------------------------------------------------------------
1 | # menu-search
2 |
3 | A demo of the [search API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/search/).
4 |
5 | ## What it does
6 |
7 | This add-on retrieves the list of installed search engines, and adds a context menu item for each one, displayed in the "selection" context.
8 |
9 | Each context menu item searches for the selected text using the corresponding search engine.
10 |
11 | This enables a user to:
12 | * select some text to search for
13 | * activate the context menu
14 | * choose which search engine to use for the search.
15 |
16 | ## What it shows
17 |
18 | * How to retrieve the set of search engines.
19 | * How to search using a specific search engine.
20 |
21 |
--------------------------------------------------------------------------------
/menu-search/background.js:
--------------------------------------------------------------------------------
1 | /*
2 | Create a menu item for each installed search engine.
3 | The ID and title are both set to the search engine's name.
4 | */
5 | function createMenuItem(engines) {
6 | for (let engine of engines) {
7 | browser.menus.create({
8 | id: engine.name,
9 | title: engine.name,
10 | contexts: ["selection"]
11 | });
12 | }
13 | }
14 |
15 | browser.search.get().then(createMenuItem);
16 |
17 | /*
18 | Search using the search engine whose name matches the
19 | menu item's ID.
20 | */
21 | browser.menus.onClicked.addListener((info, tab) => {
22 | browser.search.search({
23 | query: info.selectionText,
24 | engine: info.menuItemId
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/menu-search/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.
--------------------------------------------------------------------------------
/menu-search/icons/page-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-search/icons/page-16.png
--------------------------------------------------------------------------------
/menu-search/icons/page-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-search/icons/page-32.png
--------------------------------------------------------------------------------
/menu-search/icons/page-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/menu-search/icons/page-48.png
--------------------------------------------------------------------------------
/menu-search/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "Search using...",
5 | "description": "Search ",
6 | "version": "1.0",
7 | "browser_specific_settings": {
8 | "gecko": {
9 | "strict_min_version": "63.0b14"
10 | }
11 | },
12 |
13 | "background": {
14 | "scripts": ["background.js"]
15 | },
16 |
17 | "permissions": [
18 | "menus",
19 | "search"
20 | ],
21 |
22 | "icons": {
23 | "16": "icons/page-16.png",
24 | "32": "icons/page-32.png",
25 | "48": "icons/page-48.png"
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/mocha-client-tests/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true,
5 | "amd": true,
6 | "webextensions": true
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/mocha-client-tests/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | addon/bower_components
3 | addon/node_modules
4 | .idea
--------------------------------------------------------------------------------
/mocha-client-tests/addon/background.js:
--------------------------------------------------------------------------------
1 | let Background = {
2 | receiveMessage: function(msg, sender, sendResponse) {
3 | if (msg && msg.action && Background.hasOwnProperty(msg.action)) {
4 | return Background[msg.action](msg, sender, sendResponse);
5 | } else {
6 | console.warn('No handler for message: ' + JSON.stringify(msg));
7 | }
8 | },
9 | ping: function(msg, sender, sendResponse) {
10 | sendResponse('pong');
11 | return true;
12 | }
13 | };
14 |
15 | browser.runtime.onMessage.addListener(Background.receiveMessage);
16 |
--------------------------------------------------------------------------------
/mocha-client-tests/addon/images/icon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/mocha-client-tests/addon/images/icon-16.png
--------------------------------------------------------------------------------
/mocha-client-tests/addon/images/icon-19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/mocha-client-tests/addon/images/icon-19.png
--------------------------------------------------------------------------------
/mocha-client-tests/addon/images/mocha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/mocha-client-tests/addon/images/mocha.png
--------------------------------------------------------------------------------
/mocha-client-tests/addon/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Mocha tests",
3 | "version": "1.0",
4 | "manifest_version": 2,
5 | "description": "Check ",
6 | "icons": {
7 | "16": "images/icon-16.png"
8 | },
9 | "short_name": "MochaTest",
10 | "background": {
11 | "scripts": [
12 | "background.js"
13 | ]
14 | },
15 | "browser_action": {
16 | "default_icon": {
17 | "19": "images/icon-19.png"
18 | },
19 | "default_title": "Mocha Test",
20 | "default_popup": "popup.html"
21 | },
22 | "browser_specific_settings": {
23 | "gecko": {
24 | "strict_min_version": "45.0"
25 | }
26 | },
27 | "content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self'"
28 | }
29 |
--------------------------------------------------------------------------------
/mocha-client-tests/addon/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mocha-tests-webextension",
3 | "version": "1.0.0",
4 | "description": "Run test inside your addon",
5 | "main": "background.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "MPL-2.0",
11 | "devDependencies": {
12 | "expect.js": "^0.3.1",
13 | "mocha": "^3.1.2"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/mocha-client-tests/addon/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Mocha Tests
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/de/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Meine Beispielerweiterung",
4 | "description": "Name of the extension."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Benachrichtigt den Benutzer über Linkklicks",
9 | "description": "Description of the extension."
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "Klickbenachrichtigung",
14 | "description": "Title of the click notification."
15 | },
16 |
17 | "notificationContent": {
18 | "message": "Du hast $URL$ angeklickt",
19 | "description": "Tells the user which link they clicked.",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/en/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Notify link clicks i18n",
4 | "description": "Name of the extension."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Shows a notification when the user clicks on links.",
9 | "description": "Description of the extension."
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "Click notification",
14 | "description": "Title of the click notification."
15 | },
16 |
17 | "notificationContent": {
18 | "message": "You clicked $URL$.",
19 | "description": "Tells the user which link they clicked.",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/fr_FR/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Notifications i18n des liens cliqués",
4 | "description": "Nom de l'extension."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Affiche une notification lorsqu'un utilisateur clique sur les liens.",
9 | "description": "Description de l'extension."
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "Notification de clic",
14 | "description": "Titre de la notification de clic."
15 | },
16 |
17 | "notificationContent": {
18 | "message": "Vous avez cliqué sur $URL$.",
19 | "description": "Dit à l'utilisateur sur quel lien il a cliqué.",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/ja/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "リンクを通知する",
4 | "description": "拡張機能の名前です。"
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "ユーザーがリンクをクリックした時通知を表示します。",
9 | "description": "拡張機能の説明です。"
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "クリック通知",
14 | "description": "pushのタイトルです。"
15 | },
16 |
17 | "notificationContent": {
18 | "message": "$URL$がクリックされました。",
19 | "description": "リンクをクリックした時通知を表示します。:変数$1にはurlが代入されます。",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/nb_NO/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Varsling ved trykk på lenke i18n",
4 | "description": "Navn på utvidelsen."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Viser en varsel når brukern trykker på en lenke",
9 | "description": "Beskrivelse av utvidelsen."
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "Varseltrykk",
14 | "description": "Tittel på varselet."
15 | },
16 |
17 | "notificationContent": {
18 | "message": "Du trykket $URL$.",
19 | "description": "Forteller brukeren hvilken lenke som ble trykket.",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/nl/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Meld klikken op hyperlinks",
4 | "description": "Name of the extension."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Toon een melding wanneer een gebruiker op hyperlinks klikt.",
9 | "description": "Description of the extension."
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "Klikmelding",
14 | "description": "Title of the click notification."
15 | },
16 |
17 | "notificationContent": {
18 | "message": "U klikte op $URL$",
19 | "description": "Tells the user which link they clicked.",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/_locales/pt_BR/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Notificação de cliques em links i18n",
4 | "description": "Nome da extensão."
5 | },
6 |
7 | "extensionDescription": {
8 | "message": "Mostra uma notificação quando o usuário clica nos links.",
9 | "description": "Descrição da extensão."
10 | },
11 |
12 | "notificationTitle": {
13 | "message": "Notificação de clique",
14 | "description": "Título da notificação de clique."
15 | },
16 |
17 | "notificationContent": {
18 | "message": "Você clicou em $URL$.",
19 | "description": "Informe aos usuários em qual link eles clicaram.",
20 | "placeholders": {
21 | "url" : {
22 | "content" : "$1",
23 | "example" : "https://developer.mozilla.org"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/background-script.js:
--------------------------------------------------------------------------------
1 | /*
2 | Log that we received the message.
3 | Then display a notification. The notification contains the URL,
4 | which we read from the message.
5 | */
6 | function notify(message) {
7 | console.log("background script received message");
8 | let title = browser.i18n.getMessage("notificationTitle");
9 | let content = browser.i18n.getMessage("notificationContent", message.url);
10 | browser.notifications.create({
11 | "type": "basic",
12 | "iconUrl": browser.extension.getURL("icons/link-48.png"),
13 | "title": title,
14 | "message": content
15 | });
16 | }
17 |
18 | /*
19 | Assign `notify()` as a listener to messages from the content script.
20 | */
21 | browser.runtime.onMessage.addListener(notify);
22 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/content-script.js:
--------------------------------------------------------------------------------
1 | /*
2 | If the click was on a link, send a message to the background page.
3 | The message contains the link's URL.
4 | */
5 | function notifyExtension(e) {
6 | let target = e.target;
7 | while ((target.tagName != "A" || !target.href) && target.parentNode) {
8 | target = target.parentNode;
9 | }
10 | if (target.tagName != "A")
11 | return;
12 |
13 | console.log("content script sending message");
14 | browser.runtime.sendMessage({"url": target.href});
15 | }
16 |
17 | /*
18 | Add notifyExtension() as a listener to click events.
19 | */
20 | window.addEventListener("click", notifyExtension);
21 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The "link-48.png" icon is taken from the Geomicons iconset, and is used here under the MIT license: http://opensource.org/licenses/MIT.
2 |
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/icons/link-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/notify-link-clicks-i18n/icons/link-48.png
--------------------------------------------------------------------------------
/notify-link-clicks-i18n/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "__MSG_extensionName__",
5 | "description": "__MSG_extensionDescription__",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n",
8 | "icons": {
9 | "48": "icons/link-48.png"
10 | },
11 |
12 | "permissions": ["notifications"],
13 |
14 | "background": {
15 | "scripts": ["background-script.js"]
16 | },
17 |
18 | "content_scripts": [
19 | {
20 | "matches": [""],
21 | "js": ["content-script.js"]
22 | }
23 | ],
24 |
25 | "default_locale": "en"
26 | }
27 |
--------------------------------------------------------------------------------
/open-irc-links/README.md:
--------------------------------------------------------------------------------
1 | # open-irc-links
2 |
3 |
4 | ## What it does
5 |
6 | This add-on sets the default client for opening IRC links using `protocol_handlers`.
7 |
8 | Whenever a link using the IRC protocol is clicked, the link is opened in the URI defined in the add-on's manifest.
9 | In this example, all IRC protocol links are opened in mibbit.com.
10 | For example, once you've installed the extension, click this link [irc://irc.freenode.net/drupal](irc://irc.freenode.net/drupal) and the protocol handler opens the Drupal channel in mibbit.com.
11 |
12 | ## What it shows
13 |
14 | How to use protocol handlers to pass content to an application or website designed to handle that content.
15 |
--------------------------------------------------------------------------------
/open-irc-links/icons/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/open-irc-links/icons/icon.png
--------------------------------------------------------------------------------
/open-irc-links/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "IRC Protocol Handler",
4 | "description": "Demos the usage of protocol_handlers",
5 | "version": "1.0.0",
6 | "icons": {
7 | "64": "icons/icon.png"
8 | },
9 | "protocol_handlers": [
10 | {
11 | "protocol": "irc",
12 | "name": "IRC Mibbit Extension",
13 | "uriTemplate": "https://mibbit.com/?url=%s"
14 | }
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/open-my-page-button/README.md:
--------------------------------------------------------------------------------
1 | # open-my-page
2 |
3 | ## What it does
4 |
5 | This extension includes:
6 |
7 | * a background script, "background.js"
8 | * a browser action
9 | * a page "my-page.html"
10 |
11 | All it does is: when the user clicks the button, open "my-page.html" in a new tab.
12 |
13 | ## What it shows
14 |
15 | * how to listen for browser action clicks in a background script
16 | * how to open a page packaged with your extension
17 |
--------------------------------------------------------------------------------
/open-my-page-button/background.js:
--------------------------------------------------------------------------------
1 | /*
2 | Open a new tab, and load "my-page.html" into it.
3 | */
4 | function openMyPage() {
5 | console.log("injecting");
6 | browser.tabs.create({
7 | "url": "/my-page.html"
8 | });
9 | }
10 |
11 |
12 | /*
13 | Add openMyPage() as a listener to clicks on the browser action.
14 | */
15 | browser.browserAction.onClicked.addListener(openMyPage);
16 |
17 |
--------------------------------------------------------------------------------
/open-my-page-button/icons/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.
3 |
--------------------------------------------------------------------------------
/open-my-page-button/icons/page-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/open-my-page-button/icons/page-32.png
--------------------------------------------------------------------------------
/open-my-page-button/icons/page-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/open-my-page-button/icons/page-48.png
--------------------------------------------------------------------------------
/open-my-page-button/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "description": "Adds browser action icon to toolbar to open packaged web page. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#open-my-page-button",
4 | "manifest_version": 2,
5 | "name": "open-my-page",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button",
8 | "icons": {
9 | "48": "icons/page-48.png"
10 | },
11 |
12 | "background": {
13 | "scripts": ["background.js"]
14 | },
15 |
16 | "browser_action": {
17 | "default_icon": "icons/page-32.png"
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/open-my-page-button/my-page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
It's my page!
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webextensions-examples",
3 | "title": "WebExtensions Examples",
4 | "version": "1.0.0",
5 | "description": "Example Firefox add-ons created using the WebExtensions API",
6 | "devDependencies": {
7 | "@babel/eslint-parser": "^7.22.11",
8 | "eslint": "^8.48.0"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/mdn/webextensions-examples.git"
13 | },
14 | "scripts": {
15 | "test": "eslint .",
16 | "lint": "eslint .",
17 | "lint:cwd": "eslint $INIT_CWD",
18 | "lint:fix": "eslint . --fix"
19 | },
20 | "license": "MIT",
21 | "bugs": {
22 | "url": "https://github.com/mdn/webextensions-examples/issues"
23 | },
24 | "keywords": [
25 | "webextensions",
26 | "webextensions-apis",
27 | "mdn",
28 | "firefox",
29 | "mozilla"
30 | ],
31 | "homepage": "https://developer.mozilla.org/Add-ons/WebExtensions/Examples"
32 | }
33 |
--------------------------------------------------------------------------------
/page-to-extension-messaging/README.md:
--------------------------------------------------------------------------------
1 | # page-to-extension-messaging
2 |
3 | ## What it does
4 |
5 | This extension includes a content script, which is injected only into: "https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html".
6 |
7 | The content script listens for clicks on a particular button on the page. When the button is clicked, the content script sends a message to any scripts running in the page.
8 |
9 | Conversely, the content script listens for messages from the same window posted using window.postMessage. When the content script receives such a message, it displays an alert.
10 |
11 | To test it out, visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html and press the buttons. One button sends a message from the page script to the content script, the other button sends a message in the other direction.
12 |
13 | ## What it shows
14 |
15 | How to exchange messages between an extension's content scripts, and scripts running in a web page.
16 |
--------------------------------------------------------------------------------
/page-to-extension-messaging/content-script.js:
--------------------------------------------------------------------------------
1 | /*
2 | Listen for messages from the page.
3 | If the message was from the page script, show an alert.
4 | */
5 | window.addEventListener("message", (event) => {
6 | if (event.source == window &&
7 | event.data &&
8 | event.data.direction == "from-page-script") {
9 | alert("Content script received message: \"" + event.data.message + "\"");
10 | }
11 | });
12 |
13 | /*
14 | Send a message to the page script.
15 | */
16 | function messagePageScript() {
17 | window.postMessage({
18 | direction: "from-content-script",
19 | message: "Message from the content script"
20 | }, "https://mdn.github.io");
21 | }
22 |
23 | /*
24 | Add messagePageScript() as a listener to click events on
25 | the "from-content-script" element.
26 | */
27 | let fromContentScript = document.getElementById("from-content-script");
28 | fromContentScript.addEventListener("click", messagePageScript);
29 |
--------------------------------------------------------------------------------
/page-to-extension-messaging/icons/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | The "message-48.png" icon is taken from the miu iconset created by Linh Pham Thi Dieu, and is used under the terms of its license: http://linhpham.me/miu/.
3 |
--------------------------------------------------------------------------------
/page-to-extension-messaging/icons/message-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/page-to-extension-messaging/icons/message-48.png
--------------------------------------------------------------------------------
/page-to-extension-messaging/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "Page to extension messaging",
5 | "description": "Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#page-to-extension-messaging",
6 | "version": "1.0",
7 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging",
8 | "icons": {
9 | "48": "icons/message-48.png"
10 | },
11 |
12 | "content_scripts": [
13 | {
14 | "matches": ["https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html"],
15 | "js": ["content-script.js"]
16 | }
17 | ]
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/permissions/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "parserOptions": {
3 | "ecmaVersion": 8
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/permissions/README.md:
--------------------------------------------------------------------------------
1 | # Permissions Example
2 |
3 | ## What it does
4 |
5 | An example using the permissions API to grant and revoke an optional permission.
6 |
7 | ## What it shows
8 |
9 | How to request a permission, catching error conditions from the request and querying the permissions API.
10 |
--------------------------------------------------------------------------------
/permissions/background.js:
--------------------------------------------------------------------------------
1 | browser.browserAction.onClicked.addListener(() => {
2 | browser.tabs.create({
3 | url: browser.runtime.getURL("page.html")
4 | });
5 | });
6 |
--------------------------------------------------------------------------------
/permissions/icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/permissions/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "Permissions Example",
4 | "description": "Permissions Example",
5 | "version": "1.0",
6 |
7 | "background": {
8 | "scripts": ["background.js"]
9 | },
10 | "icons": {
11 | "48": "icon.svg"
12 | },
13 | "browser_action": {
14 | "default_title": "Permissions Example",
15 | "default_icon": "icon.svg"
16 | },
17 |
18 | "permissions": [
19 | "tabs"
20 | ],
21 | "optional_permissions": [
22 | "history"
23 | ],
24 | "browser_specific_settings": {
25 | "gecko": {
26 | "strict_min_version": "55.0a2"
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/permissions/page.css:
--------------------------------------------------------------------------------
1 | p.bg-danger, p.bg-success, p.bg-warning {
2 | padding: 1em;
3 | }
4 |
--------------------------------------------------------------------------------
/private-browsing-theme/README.md:
--------------------------------------------------------------------------------
1 | # Private browsing theme
2 |
3 | ## What it does
4 |
5 | An example using the theme API to apply a different theme on private windows.
6 |
7 | ## What it shows
8 |
9 | How to use the windowId argument of browser.theme.reset() and browser.theme.update().
10 |
--------------------------------------------------------------------------------
/private-browsing-theme/background.js:
--------------------------------------------------------------------------------
1 | browser.windows.onCreated.addListener(themeWindow);
2 |
3 | // Theme all currently open windows
4 | browser.windows.getAll().then(wins => wins.forEach(themeWindow));
5 |
6 | function themeWindow(window) {
7 | // Check if the window is in private browsing
8 | if (window.incognito) {
9 | browser.theme.update(window.id, {
10 | images: {
11 | theme_frame: "",
12 | },
13 | colors: {
14 | frame: "black",
15 | tab_background_text: "white",
16 | toolbar: "#333",
17 | toolbar_text: "white"
18 | }
19 | });
20 | }
21 | // Reset to the default theme otherwise
22 | else {
23 | browser.theme.reset(window.id);
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/private-browsing-theme/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "Private browsing theme",
4 | "version": "2.0",
5 | "description": "Extension that sets a dark theme for private windows",
6 | "background": {
7 | "scripts": ["background.js"]
8 | },
9 | "permissions": ["theme"],
10 | "browser_specific_settings": {
11 | "gecko": {
12 | "id": "private-window-theme@mozilla.org",
13 | "strict_min_version": "58.0"
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/proxy-blocker/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The "lock".svg" icon is taken from the Material Core iconset and is used under the terms of its license: https://www.iconfinder.com/iconsets/material-core.
2 |
--------------------------------------------------------------------------------
/proxy-blocker/icons/block.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/proxy-blocker/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "Proxy-blocker",
5 | "description": "Uses the proxy API to block requests to specific hosts.",
6 | "version": "2.0",
7 |
8 | "icons": {
9 | "48": "icons/block.svg",
10 | "96": "icons/block.svg"
11 | },
12 |
13 | "browser_specific_settings": {
14 | "gecko": {
15 | "strict_min_version": "56.0a1"
16 | }
17 | },
18 |
19 | "background": {
20 | "scripts": [
21 | "background/proxy-handler.js"
22 | ]
23 | },
24 |
25 | "options_ui": {
26 | "page": "options/options.html",
27 | "browser_style": true
28 | },
29 |
30 | "permissions": ["proxy", "storage", ""]
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/proxy-blocker/options/options.css:
--------------------------------------------------------------------------------
1 | #blocked-hosts {
2 | display: block;
3 | margin-top: 1em;
4 | }
5 |
--------------------------------------------------------------------------------
/proxy-blocker/options/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Hosts to block:
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/proxy-blocker/options/options.js:
--------------------------------------------------------------------------------
1 | const blockedHostsTextArea = document.querySelector("#blocked-hosts");
2 |
3 | // Store the currently selected settings using browser.storage.local.
4 | function storeSettings() {
5 | let blockedHosts = blockedHostsTextArea.value.split("\n");
6 | browser.storage.local.set({
7 | blockedHosts
8 | });
9 | }
10 |
11 | // Update the options UI with the settings values retrieved from storage,
12 | // or the default settings if the stored settings are empty.
13 | function updateUI(restoredSettings) {
14 | blockedHostsTextArea.value = restoredSettings.blockedHosts.join("\n");
15 | }
16 |
17 | function onError(e) {
18 | console.error(e);
19 | }
20 |
21 | // On opening the options page, fetch stored settings and update the UI with them.
22 | browser.storage.local.get().then(updateUI, onError);
23 |
24 | // Whenever the contents of the textarea changes, save the new values
25 | blockedHostsTextArea.addEventListener("change", storeSettings);
26 |
--------------------------------------------------------------------------------
/quicknote/icons/quicknote-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/quicknote/icons/quicknote-32.png
--------------------------------------------------------------------------------
/quicknote/icons/quicknote-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/quicknote/icons/quicknote-48.png
--------------------------------------------------------------------------------
/quicknote/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "manifest_version": 2,
4 | "name": "Quicknote",
5 | "version": "1.1",
6 |
7 | "description": "Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#quicknote",
8 | "icons": {
9 | "48": "icons/quicknote-48.png"
10 | },
11 |
12 | "permissions": [
13 | "storage"
14 | ],
15 |
16 | "browser_action": {
17 | "default_icon": {
18 | "32" : "icons/quicknote-32.png"
19 | },
20 | "default_title": "Quicknote",
21 | "default_popup": "popup/quicknote.html"
22 | },
23 |
24 | "browser_specific_settings": {
25 | "gecko": {
26 | "id": "quicknote-example@mozilla.org"
27 | }
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/quicknote/popup/quicknote.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/root-cert-stats/README.md:
--------------------------------------------------------------------------------
1 | # root-cert-stats
2 |
3 | ## What it does ##
4 |
5 | The extension includes:
6 |
7 | * a background page which collects stats about the trusted root certs used when
8 | browsing the web. It records the subject name of each root cert, and how many
9 | times that particular root cert was used to establish a TLS connection.
10 |
11 | * a browser action with a popup. The popup displays the collected stats.
12 |
13 | ## What it shows ##
14 |
15 | * how to use the webRequest.getSecurityInfo() API.
16 |
--------------------------------------------------------------------------------
/root-cert-stats/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The icon "icon-32.png" is taken from the IconBeast Lite iconset, and used under the terms of its license (http://www.iconbeast.com/faq/), with a link back to the website: http://www.iconbeast.com/free/.
2 |
--------------------------------------------------------------------------------
/root-cert-stats/icons/icon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/root-cert-stats/icons/icon-32.png
--------------------------------------------------------------------------------
/root-cert-stats/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "Root Certificate Stats",
4 | "description": "Track and display which CA root certificates are used and how often.",
5 | "version": "0.1.0",
6 | "browser_action": {
7 | "default_icon": {
8 | "32": "icons/icon-32.png"
9 | },
10 | "default_title": "Root Certificate Stats",
11 | "default_popup": "popup.html"
12 | },
13 | "permissions": ["webRequest", "webRequestBlocking", ""],
14 | "background": {
15 | "scripts": [ "background.js" ]
16 | },
17 | "icons": {
18 | "32": "icons/icon-32.png"
19 | },
20 | "browser_specific_settings": {
21 | "gecko": {
22 | "strict_min_version": "62.0b5"
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/root-cert-stats/popup.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 1rem/2 sans-serif;
3 | }
4 |
5 | table,
6 | td {
7 | border: 1px solid #333;
8 | padding: .3rem;
9 | }
10 |
11 | .hidden {
12 | display: none;
13 | }
14 |
--------------------------------------------------------------------------------
/root-cert-stats/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Root cert stats
8 |
9 |
10 |
11 |
No data to display yet
12 |
13 |
14 |
15 |
Certification Authorities
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/runtime-examples/README.md:
--------------------------------------------------------------------------------
1 | ## What it does
2 |
3 | Trigger an install notification when you install it. On the browser action text is
4 | shown showing when the background page was last loaded in minutes and seconds.
5 |
6 | Clicking the browser action triggers a reload and updates the background page load time.
7 |
8 | The notifications show the version of the extension by fetching the manifest.
9 |
10 | ## What it shows
11 |
12 | Demonstration of some runtime and notification APIs.
13 |
14 | Icon is from: https://www.iconfinder.com/icons/172151/run_icon#size=128
15 |
--------------------------------------------------------------------------------
/runtime-examples/background.js:
--------------------------------------------------------------------------------
1 | let loadTime = new Date();
2 | let manifest = browser.runtime.getManifest();
3 |
4 | function onInstalledNotification(details) {
5 | browser.notifications.create('onInstalled', {
6 | title: `Runtime Examples version: ${manifest.version}`,
7 | message: `onInstalled has been called, background page loaded at ${loadTime.getHours()}:${loadTime.getMinutes()}`,
8 | type: 'basic'
9 | });
10 | }
11 |
12 | function onClick() {
13 | browser.runtime.reload();
14 | }
15 |
16 | browser.browserAction.onClicked.addListener(onClick);
17 | browser.runtime.onInstalled.addListener(onInstalledNotification);
18 |
--------------------------------------------------------------------------------
/runtime-examples/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "browser_action": {
3 | "default_icon": "run.png"
4 | },
5 | "description": "Demonstration of some runtime APIs",
6 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/runtime-examples",
7 | "manifest_version": 2,
8 | "name": "Runtime examples",
9 | "version": "1.0",
10 | "permissions": ["notifications"],
11 | "background": {
12 | "scripts": ["background.js"]
13 | },
14 | "icons": {
15 | "128": "run.png"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/runtime-examples/run.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/runtime-examples/run.png
--------------------------------------------------------------------------------
/selection-to-clipboard/README.md:
--------------------------------------------------------------------------------
1 | # selection-to-clipboard
2 |
3 | **This add-on injects JavaScript into web pages. The `addons.mozilla.org` domain disallows this operation, so this add-on will not work properly when it's run on pages in the `addons.mozilla.org` domain.**
4 |
5 | ## What it does
6 |
7 | This extension includes:
8 |
9 | * a content script, "content-script.js", that is injected into all pages
10 |
11 | The content script listens for text selections in the page it's attached to and copies the text to the clipboard on mouse-up.
12 |
13 | ## What it shows
14 |
15 | * how to inject content scripts declaratively using manifest.json
16 | * how to write to the [clipboard](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard)
17 |
18 | ## Note
19 | * If the `copySelection` function was in a browser event `clipboardWrite` permissions would be required e.g.
20 | ```
21 | "permissions": ["clipboardWrite"]
22 | ```
23 | See [Interact with the clipboard](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard).
24 |
--------------------------------------------------------------------------------
/selection-to-clipboard/content-script.js:
--------------------------------------------------------------------------------
1 | /*
2 | copy the selected text to clipboard
3 | */
4 | function copySelection() {
5 | let selectedText = window.getSelection().toString().trim();
6 |
7 | if (selectedText) {
8 | document.execCommand("Copy");
9 | }
10 | }
11 |
12 | /*
13 | Add copySelection() as a listener to mouseup events.
14 | */
15 | document.addEventListener("mouseup", copySelection);
--------------------------------------------------------------------------------
/selection-to-clipboard/icons/LICENSE:
--------------------------------------------------------------------------------
1 |
2 | The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.
3 |
--------------------------------------------------------------------------------
/selection-to-clipboard/icons/clipboard-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/selection-to-clipboard/icons/clipboard-48.png
--------------------------------------------------------------------------------
/selection-to-clipboard/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "selection-to-clipboard",
4 | "description": "Example of WebExtensionAPI for writing to the clipboard",
5 | "version": "1.0",
6 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard",
7 |
8 | "icons": {
9 | "48": "icons/clipboard-48.png"
10 | },
11 |
12 | "content_scripts": [{
13 | "matches": [""],
14 | "js": ["content-script.js"]
15 | }]
16 | }
17 |
--------------------------------------------------------------------------------
/session-state/README.md:
--------------------------------------------------------------------------------
1 | # session-state
2 |
3 | ## What it does
4 |
5 | This extension adds a context menu item. When the user clicks the context menu item, the extension adds a border to the page.
6 |
7 | But the extension also uses `sessions.setTabValue` to store the fact that it has added a border to this page. If the user closes the page, then restores it, the extension will retrieve this fact using `sessions.getTabValue`, and use that to reapply the border.
8 |
9 | Note: to restore a tab, press Control+Shift+T (or Command+Shift+T on a Mac). In Firefox you can also restore the tab from your "History->Recently Closed Tabs" menu.
10 |
11 | ## What it shows
12 |
13 | This example demonstrates how you can use the [sessions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/sessions) API to store and retrieve arbitrary state that you want to associate with a tab or window. Then if the tab/window is closed and subsequently restored, you can retrieve the state.
14 |
--------------------------------------------------------------------------------
/session-state/icons/LICENSE:
--------------------------------------------------------------------------------
1 | The icon “border-48.png” is taken from the Google Material Design iconset, and is used under the terms of the Creative Commons Attribution-ShareAlike license: http://creativecommons.org/licenses/by-sa/3.0/.
2 |
--------------------------------------------------------------------------------
/session-state/icons/border-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/session-state/icons/border-48.png
--------------------------------------------------------------------------------
/session-state/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "browser_specific_settings": {
3 | "gecko": {
4 | "id": "session-state@example.com",
5 | "strict_min_version": "57.0a1"
6 | }
7 | },
8 | "manifest_version": 2,
9 | "name": "Session state",
10 | "version": "1.0",
11 | "description": "Demonstrates using the sessions API to store and restore extension-specific tab state.",
12 | "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/session-state",
13 | "icons": {
14 | "48": "icons/border-48.png"
15 | },
16 |
17 | "background": {
18 | "scripts": ["background.js"]
19 | },
20 |
21 | "permissions": ["", "menus", "sessions"]
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/store-collected-images/screenshots/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/store-collected-images/screenshots/screenshot.png
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/.eslintignore:
--------------------------------------------------------------------------------
1 | deps
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@babel/eslint-parser"
3 | }
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/store-collected-images/webextension-plain/images/icon.png
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/images/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/webextensions-examples/386f262076e56ae09c4d351938c09143a3917a9c/store-collected-images/webextension-plain/images/icon16.png
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "store-collected-images",
4 | "version": "1.0",
5 |
6 | "icons": {
7 | "16": "images/icon16.png",
8 | "48": "images/icon.png"
9 | },
10 |
11 | "browser_action": {
12 | "default_icon": {
13 | "48": "images/icon.png"
14 | },
15 | "default_title": "Collected Images"
16 | },
17 |
18 | "background": {
19 | "scripts": ["background.js"]
20 | },
21 |
22 | "permissions": [
23 | "contextMenus",
24 | ""
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/navigate-collection.css:
--------------------------------------------------------------------------------
1 | @import "shared.css";
--------------------------------------------------------------------------------
/store-collected-images/webextension-plain/navigate-collection.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |