mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
This change is to remove the 3 embedded web extension examples. The technology to support these examples was removed from Firefox in November 2017, with the release of Firefox 57.
This commit is contained in:
Richard Bloor
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true,
|
||||
"amd": true,
|
||||
"webextensions": true
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
This is an example of how to use [embedded WebExtensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Embedded_WebExtensions) to convert a legacy [Bootstrapped extension](https://developer.mozilla.org/en-US/Add-ons/Bootstrapped_extensions) to a [WebExtension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions) in stages, and migrate the legacy add-on's data so it's accessible by the WebExtension.
|
||||
|
||||
The legacy add-on contains:
|
||||
|
||||
- some user data stored in the Firefox preferences
|
||||
- a button in the toolbar
|
||||
|
||||
When the button is pressed, the add-on displays a panel containing the stored data.
|
||||
|
||||
This directory contains three versions of the add-on.
|
||||
|
||||
- **step0-legacy-addon**: the initial add-on, written entirely using the bootstrapped extension method.
|
||||
- **step1-hybrid-addon**: a hybrid consisting of a bootstrapped extension containing an embedded WebExtension. The bootstrapped extension reads the stored data and sends it to the embedded WebExtension. The embedded WebExtension stores the data using the [`storage`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage) API, and also implements the UI.
|
||||
- **step2-pure-webextension**: the final version, written entirely using the WebExtensions method. This version can be deployed after the hybrid version has migrated the stored data to the `storage` API.
|
||||
@@ -1,16 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
function startup(data) {
|
||||
Components.utils.import("chrome://original-bootstrap-addon-id/content/AddonPrefs.jsm");
|
||||
Components.utils.import("chrome://original-bootstrap-addon-id/content/AddonUI.jsm");
|
||||
|
||||
AddonPrefs.set("super-important-user-setting", "char", "addon preference content");
|
||||
AddonUI.init(data);
|
||||
}
|
||||
|
||||
function shutdown(data) {
|
||||
AddonUI.shutdown(data);
|
||||
|
||||
Components.utils.unload("chrome://original-bootstrap-addon-id/content/AddonUI.jsm");
|
||||
Components.utils.unload("chrome://original-bootstrap-addon-id/content/AddonPrefs.jsm");
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
content original-bootstrap-addon-id chrome/
|
||||
@@ -1,41 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var EXPORTED_SYMBOLS = ["AddonPrefs"];
|
||||
|
||||
Components.utils.import("resource://gre/modules/Services.jsm");
|
||||
|
||||
const BASE_PREF = "extensions.original-bootstrap-addon-id.";
|
||||
|
||||
function get(key, type = "char") {
|
||||
key = BASE_PREF + key;
|
||||
|
||||
switch(type) {
|
||||
case "char":
|
||||
return Services.prefs.getCharPref(key);
|
||||
case "bool":
|
||||
return Services.prefs.getBoolPref(key);
|
||||
case "int":
|
||||
return Services.prefs.getIntPref(key);
|
||||
}
|
||||
|
||||
throw new Error(`Unknown type: ${type}`);
|
||||
}
|
||||
|
||||
function set(key, type, value) {
|
||||
key = BASE_PREF + key;
|
||||
|
||||
switch(type) {
|
||||
case "char":
|
||||
return Services.prefs.setCharPref(key, value);
|
||||
case "bool":
|
||||
return Services.prefs.setBoolPref(key, value);
|
||||
case "int":
|
||||
return Services.prefs.setIntPref(key, value);
|
||||
}
|
||||
|
||||
throw new Error(`Unknown type: ${type}`);
|
||||
}
|
||||
|
||||
var AddonPrefs = {
|
||||
get, set,
|
||||
};
|
||||
@@ -1,65 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var EXPORTED_SYMBOLS = ["AddonUI"];
|
||||
|
||||
Components.utils.import("resource:///modules/CustomizableUI.jsm");
|
||||
|
||||
Components.utils.import("chrome://original-bootstrap-addon-id/content/AddonPrefs.jsm");
|
||||
|
||||
const BUTTON_ID = "original-bootstrap-addon-id--toolbar-button";
|
||||
const BUTTON_ICON_URL = "chrome://original-bootstrap-addon-id/content/icons/icon-32.png";
|
||||
|
||||
const PANEL_ID = "original-bootstrap-addon-id--popup-panel";
|
||||
|
||||
function createPanel(node) {
|
||||
var doc = node.ownerDocument;
|
||||
|
||||
var panel = doc.createElement("panel");
|
||||
panel.setAttribute("type", "arrow");
|
||||
panel.setAttribute("id", PANEL_ID);
|
||||
panel.setAttribute("flip", "slide");
|
||||
panel.setAttribute("hidden", true);
|
||||
panel.setAttribute("position", "bottomcenter topright");
|
||||
var panelContent = doc.createElement("label");
|
||||
panelContent.textContent = AddonPrefs.get("super-important-user-setting");
|
||||
panel.appendChild(panelContent);
|
||||
|
||||
return panel;
|
||||
}
|
||||
|
||||
function defineButtonWidget() {
|
||||
let buttonDef = {
|
||||
id : BUTTON_ID,
|
||||
type : "button",
|
||||
defaultArea : CustomizableUI.AREA_NAVBAR,
|
||||
label : "button label",
|
||||
tooltiptext : "button tooltip",
|
||||
onCreated : function (node) {
|
||||
node.setAttribute('image', BUTTON_ICON_URL);
|
||||
|
||||
const panel = createPanel(node);
|
||||
node.appendChild(panel);
|
||||
|
||||
node.addEventListener("click", () => {
|
||||
panel.setAttribute("hidden", false);
|
||||
panel.openPopup(node, panel.getAttribute("position"), 0, 0, false, false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
CustomizableUI.createWidget(buttonDef);
|
||||
};
|
||||
|
||||
|
||||
|
||||
function init({id}) {
|
||||
defineButtonWidget(BUTTON_ID);
|
||||
}
|
||||
|
||||
function shutdown({id}) {
|
||||
CustomizableUI.destroyWidget(BUTTON_ID);
|
||||
}
|
||||
|
||||
var AddonUI = {
|
||||
init, shutdown,
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
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/.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
@@ -1,33 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
|
||||
<Description about="urn:mozilla:install-manifest">
|
||||
<em:id>original-bootstrap-addon-id@mozilla.com</em:id>
|
||||
<em:type>2</em:type>
|
||||
<em:bootstrap>true</em:bootstrap>
|
||||
<em:unpack>false</em:unpack>
|
||||
<em:version>0.1.0</em:version>
|
||||
<em:name>Legacy Addon Name</em:name>
|
||||
<em:description>
|
||||
A simple bootstrap addon which wants to transition to a WebExtension.
|
||||
|
||||
Step 0: original legacy bootstrap addon.
|
||||
</em:description>
|
||||
<em:creator>Luca Greco <lgreco@mozilla.com></em:creator>
|
||||
|
||||
<em:targetApplication>
|
||||
<Description>
|
||||
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
|
||||
<em:minVersion>49.0</em:minVersion>
|
||||
<em:maxVersion>*</em:maxVersion>
|
||||
</Description>
|
||||
</em:targetApplication>
|
||||
|
||||
<em:targetApplication>
|
||||
<Description>
|
||||
<em:id>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</em:id>
|
||||
<em:minVersion>49.0</em:minVersion>
|
||||
<em:maxVersion>*</em:maxVersion>
|
||||
</Description>
|
||||
</em:targetApplication>
|
||||
</Description>
|
||||
</RDF>
|
||||
@@ -1,24 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
function startup({webExtension}) {
|
||||
Components.utils.import("chrome://original-bootstrap-addon-id/content/AddonPrefs.jsm");
|
||||
|
||||
// Start the embedded webextension.
|
||||
webExtension.startup().then(api => {
|
||||
const {browser} = api;
|
||||
browser.runtime.onMessage.addListener((msg, sender, sendReply) => {
|
||||
if (msg == "import-legacy-data") {
|
||||
// When the embedded webextension asks for the legacy data,
|
||||
// dump the data which needs to be preserved and send it back to the
|
||||
// embedded extension.
|
||||
sendReply({
|
||||
"super-important-user-setting": AddonPrefs.get("super-important-user-setting"),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function shutdown(data) {
|
||||
Components.utils.unload("chrome://original-bootstrap-addon-id/content/AddonPrefs.jsm");
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
content original-bootstrap-addon-id chrome/
|
||||
@@ -1,41 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var EXPORTED_SYMBOLS = ["AddonPrefs"];
|
||||
|
||||
Components.utils.import("resource://gre/modules/Services.jsm");
|
||||
|
||||
const BASE_PREF = "extensions.original-bootstrap-addon-id.";
|
||||
|
||||
function get(key, type = "char") {
|
||||
key = BASE_PREF + key;
|
||||
|
||||
switch(type) {
|
||||
case "char":
|
||||
return Services.prefs.getCharPref(key);
|
||||
case "bool":
|
||||
return Services.prefs.getBoolPref(key);
|
||||
case "int":
|
||||
return Services.prefs.getIntPref(key);
|
||||
}
|
||||
|
||||
throw new Error(`Unknown type: ${type}`);
|
||||
}
|
||||
|
||||
function set(key, type, value) {
|
||||
key = BASE_PREF + key;
|
||||
|
||||
switch(type) {
|
||||
case "char":
|
||||
return Services.prefs.setCharPref(key, value);
|
||||
case "bool":
|
||||
return Services.prefs.setBoolPref(key, value);
|
||||
case "int":
|
||||
return Services.prefs.setIntPref(key, value);
|
||||
}
|
||||
|
||||
throw new Error(`Unknown type: ${type}`);
|
||||
}
|
||||
|
||||
var AddonPrefs = {
|
||||
get, set,
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
|
||||
<Description about="urn:mozilla:install-manifest">
|
||||
<em:id>original-bootstrap-addon-id@mozilla.com</em:id>
|
||||
<em:type>2</em:type>
|
||||
<em:bootstrap>true</em:bootstrap>
|
||||
<em:hasEmbeddedWebExtension>true</em:hasEmbeddedWebExtension>
|
||||
<em:unpack>false</em:unpack>
|
||||
<em:version>0.2.0</em:version>
|
||||
<em:name>Legacy Addon Name</em:name>
|
||||
<em:description>
|
||||
A simple bootstrap addon which wants to transition to a WebExtension.
|
||||
|
||||
Step 1: transition hybrid addon.
|
||||
</em:description>
|
||||
<em:creator>Luca Greco <lgreco@mozilla.com></em:creator>
|
||||
|
||||
<em:targetApplication>
|
||||
<Description>
|
||||
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
|
||||
<em:minVersion>51.0a1</em:minVersion>
|
||||
<em:maxVersion>*</em:maxVersion>
|
||||
</Description>
|
||||
</em:targetApplication>
|
||||
|
||||
<em:targetApplication>
|
||||
<Description>
|
||||
<em:id>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</em:id>
|
||||
<em:minVersion>51.0a1</em:minVersion>
|
||||
<em:maxVersion>*</em:maxVersion>
|
||||
</Description>
|
||||
</em:targetApplication>
|
||||
</Description>
|
||||
</RDF>
|
||||
@@ -1,16 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
browser.storage.local.get("super-important-user-setting")
|
||||
.then(results => {
|
||||
// If the old preferences data has not been imported yet...
|
||||
if (!results["super-important-user-setting"]) {
|
||||
// Ask to the legacy part to dump the needed data and send it back
|
||||
// to the background page...
|
||||
browser.runtime.sendMessage("import-legacy-data").then(reply => {
|
||||
if (reply) {
|
||||
// Where it can be saved using the WebExtensions storage API.
|
||||
browser.storage.local.set(reply);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
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/.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"name": "Legacy Addon Name",
|
||||
"version": "0.2.0",
|
||||
"manifest_version": 2,
|
||||
"permissions": ["storage"],
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"browser_action": {
|
||||
"browser_style": true,
|
||||
"default_icon": "icons/icon-32.png",
|
||||
"default_title": "button label",
|
||||
"default_popup": "popup.html"
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE.html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div id="panel-content"></div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var gettingItem = browser.storage.local.get("super-important-user-setting");
|
||||
gettingItem.then(results => {
|
||||
const panelContent = results["super-important-user-setting"] || "No settings saved.";
|
||||
document.querySelector("#panel-content").textContent = panelContent;
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
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/.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"name": "Legacy Addon Name",
|
||||
"version": "0.3.0",
|
||||
"manifest_version": 2,
|
||||
"permissions": ["storage"],
|
||||
"browser_action": {
|
||||
"browser_style": true,
|
||||
"default_icon": "icons/icon-32.png",
|
||||
"default_title": "button label",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "original-bootstrap-addon-id@mozilla.com",
|
||||
"strict_min_version": "51.0a1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE.html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div id="panel-content"></div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
var gettingItem = browser.storage.local.get("super-important-user-setting");
|
||||
gettingItem.then(results => {
|
||||
const panelContent = results["super-important-user-setting"] || "No settings saved.";
|
||||
document.querySelector("#panel-content").textContent = panelContent;
|
||||
});
|
||||
@@ -1,2 +0,0 @@
|
||||
content my-overlay-addon content/
|
||||
overlay chrome://browser/content/browser.xul chrome://my-overlay-addon/content/overlay.xul
|
||||
@@ -1,31 +0,0 @@
|
||||
/* globals Components, dump */
|
||||
|
||||
{
|
||||
const addonId = "my-overlay-addon@me";
|
||||
const {
|
||||
AddonManager,
|
||||
} = Components.utils.import("resource://gre/modules/AddonManager.jsm", {});
|
||||
|
||||
AddonManager.getAddonByID(addonId, addon => {
|
||||
const baseURI = addon.getResourceURI("/");
|
||||
|
||||
const {
|
||||
LegacyExtensionsUtils,
|
||||
} = Components.utils.import("resource://gre/modules/LegacyExtensionsUtils.jsm");
|
||||
|
||||
const myOverlayEmbeddedWebExtension = LegacyExtensionsUtils.getEmbeddedExtensionFor({
|
||||
id: addonId, resourceURI: baseURI,
|
||||
});
|
||||
|
||||
myOverlayEmbeddedWebExtension.startup().then(({browser}) => {
|
||||
dump(`${addonId} - embedded webext started\n`);
|
||||
browser.runtime.onMessage.addListener(msg => {
|
||||
dump(`${addonId} - received message from embedded webext ${msg}\n`);
|
||||
});
|
||||
}).catch(err => {
|
||||
Components.utils.reportError(
|
||||
`${addonId} - embedded webext startup failed: ${err.message} ${err.stack}\n`
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<overlay id="myOverlayAddon" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<script src="chrome://my-overlay-addon/content/init.js"></script>
|
||||
</overlay>
|
||||
@@ -1,23 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
|
||||
|
||||
<Description about="urn:mozilla:install-manifest">
|
||||
<em:id>my-overlay-addon@me</em:id>
|
||||
<em:version>1.0.1</em:version>
|
||||
<em:name>My Legacy Overlay Addon</em:name>
|
||||
|
||||
<em:type>2</em:type>
|
||||
<em:multiprocessCompatible>true</em:multiprocessCompatible>
|
||||
|
||||
<em:targetApplication>
|
||||
<Description>
|
||||
<!-- firefox -->
|
||||
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
|
||||
<em:minVersion>51.0</em:minVersion>
|
||||
<em:maxVersion>*</em:maxVersion>
|
||||
</Description>
|
||||
</em:targetApplication>
|
||||
|
||||
</Description>
|
||||
</RDF>
|
||||
@@ -1,3 +0,0 @@
|
||||
console.log("Embedded WebExtension", window.location.href);
|
||||
|
||||
browser.runtime.sendMessage("embedded_webext -> overlay addon container");
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"manifest_version": 2,
|
||||
"name": "Overlay Addon WebExtension",
|
||||
"version": "1.0.1",
|
||||
"description": "test embedding a webextension in a legacy overlay addon",
|
||||
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true,
|
||||
"amd": true,
|
||||
"webextensions": true
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
This is an example of how to use [embedded WebExtensions](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Embedded_WebExtensions) to convert a legacy [SDK add-on](https://developer.mozilla.org/en-US/Add-ons/SDK) to a [WebExtension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions) in stages, and migrate the legacy add-on's data so it's accessible by the WebExtension.
|
||||
|
||||
The legacy add-on contains:
|
||||
|
||||
- A content script that is attached to any pages under "mozilla.org" or any of its subdomains. The content script sends a message to the main add-on, which then displays a [notification](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/notifications).
|
||||
- Some user data stored using the SDK's [`simple-prefs`](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/simple-prefs) API.
|
||||
- Some user data stored using the SDK's [`simple-storage`](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/simple-storage) API.
|
||||
- A button in the toolbar: when the button is pressed, the add-on shows a panel containing the stored data.
|
||||
|
||||
This directory contains three versions of the add-on.
|
||||
|
||||
- **step0-legacy-addon**: the initial add-on, written entirely using the Add-on SDK.
|
||||
- **step1-hybrid-addon**: a hybrid consisting of an Add-on SDK add-on containing an embedded WebExtension. The Add-on SDK part sends the stored data to the embedded WebExtension. It also listens for any changes to the [`simple-prefs`](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/simple-prefs) data, and updates the WebExtension whenever that data is changed (for example, if the user changes the data in the add-on's preferences UI under about:addons). The embedded WebExtension stores the data using the [`storage`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage) API and implements everything else, including the button/panel and the content script.
|
||||
- **step2-pure-webextension**: the final version, written entirely using the WebExtensions method. This version can be deployed after the hybrid version has migrated the stored data to the `storage` API. In this version the add-on uses an [options page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages) to provide a UI for the preferences data.
|
||||
@@ -1 +0,0 @@
|
||||
self.port.emit("notify-attached-tab", window.location.href);
|
||||
@@ -1 +0,0 @@
|
||||
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/.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE.html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<pre id="panel-content"></pre>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,3 +0,0 @@
|
||||
addon.port.on("got-user-data", results => {
|
||||
document.querySelector("#panel-content").textContent = JSON.stringify(results, null, 2);
|
||||
});
|
||||
@@ -1,42 +0,0 @@
|
||||
const { ToggleButton } = require('sdk/ui/button/toggle');
|
||||
const panels = require("sdk/panel");
|
||||
const self = require("sdk/self");
|
||||
const ss = require("sdk/simple-storage");
|
||||
const sp = require("sdk/simple-prefs");
|
||||
|
||||
const button = ToggleButton({
|
||||
id: "my-button",
|
||||
label: "my button",
|
||||
icon: {
|
||||
"32": self.data.url("icons/icon-32.png"),
|
||||
},
|
||||
onChange: handleChange,
|
||||
});
|
||||
|
||||
const panel = panels.Panel({
|
||||
contentURL: self.data.url("popup.html"),
|
||||
onHide: handleHide,
|
||||
});
|
||||
|
||||
panel.on("show", () => {
|
||||
panel.port.emit("got-user-data", {
|
||||
prefs: {
|
||||
superImportantUserPref: sp.prefs["superImportantUserPref"],
|
||||
},
|
||||
storage: {
|
||||
superImportantUserStoredData: ss.storage.superImportantUserStoredData,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
function handleChange(state) {
|
||||
if (state.checked) {
|
||||
panel.show({
|
||||
position: button,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleHide() {
|
||||
button.state('window', {checked: false});
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
const data = require("sdk/self").data;
|
||||
const pageMod = require("sdk/page-mod");
|
||||
const notifications = require("sdk/notifications");
|
||||
|
||||
pageMod.PageMod({
|
||||
include: "*.mozilla.org",
|
||||
contentScriptFile: [
|
||||
data.url("content-script.js"),
|
||||
],
|
||||
onAttach: function(worker) {
|
||||
worker.port.on("notify-attached-tab", (msg) => {
|
||||
notifications.notify({
|
||||
title: "Attached to tab",
|
||||
text: msg
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -1,3 +0,0 @@
|
||||
const ss = require("sdk/simple-storage");
|
||||
|
||||
ss.storage.superImportantUserStoredData = "This value was saved in the simple-storage";
|
||||
@@ -1,3 +0,0 @@
|
||||
require("./lib/addon-ui");
|
||||
require("./lib/user-data-storage");
|
||||
require("./lib/content-scripts");
|
||||
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"id": "original-sdk-addon-id@mozilla.com",
|
||||
"version": "0.1.0",
|
||||
"main": "./main.js",
|
||||
"name": "sdk-addon-name",
|
||||
"fullName": "SDK Addon Name",
|
||||
"description": "A simple SDK addon which wants to transition to a WebExtension",
|
||||
"preferences": [
|
||||
{
|
||||
"name": "superImportantUserPref",
|
||||
"title": "Super important user preference",
|
||||
"type": "string",
|
||||
"value": "saved superImportantUserPref value"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"firefox": ">= 49",
|
||||
"fennec": ">= 49"
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
const sp = require("sdk/simple-prefs");
|
||||
const ss = require("sdk/simple-storage");
|
||||
|
||||
ss.storage.superImportantUserStoredData = "This value was saved in the simple-storage";
|
||||
|
||||
exports.setSyncLegacyDataPort = function(port) {
|
||||
// Send the initial data dump.
|
||||
port.postMessage({
|
||||
prefs: {
|
||||
superImportantUserPref: sp.prefs["superImportantUserPref"],
|
||||
},
|
||||
storage: {
|
||||
superImportantUserStoredData: ss.storage.superImportantUserStoredData,
|
||||
},
|
||||
});
|
||||
|
||||
// Keep the preferences in sync with the data stored in the webextension.
|
||||
sp.on("superImportantUserPref", () => {
|
||||
port.postMessage({
|
||||
prefs: {
|
||||
superImportantUserPref: sp.prefs["superImportantUserPref"],
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
const webext = require("sdk/webextension");
|
||||
const {setSyncLegacyDataPort} = require("./lib/user-data-storage");
|
||||
|
||||
webext.startup().then(({browser}) => {
|
||||
browser.runtime.onConnect.addListener(port => {
|
||||
if (port.name === "sync-legacy-addon-data") {
|
||||
setSyncLegacyDataPort(port);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"id": "original-sdk-addon-id@mozilla.com",
|
||||
"version": "0.2.0",
|
||||
"main": "./main.js",
|
||||
"name": "sdk-addon-name",
|
||||
"fullName": "SDK Addon Name",
|
||||
"description": "A simple SDK addon which wants to transition to a WebExtension",
|
||||
"preferences": [
|
||||
{
|
||||
"name": "superImportantUserPref",
|
||||
"title": "Super important user preference",
|
||||
"type": "string",
|
||||
"value": "saved superImportantUserPref value"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"firefox": ">= 51.0a1",
|
||||
"fennec": ">= 51.0a1"
|
||||
},
|
||||
"hasEmbeddedWebExtension": true
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
// Ask to the legacy part to dump the needed data and send it back
|
||||
// to the background page...
|
||||
var port = browser.runtime.connect({name: "sync-legacy-addon-data"});
|
||||
port.onMessage.addListener((msg) => {
|
||||
if (msg) {
|
||||
// Where it can be saved using the WebExtensions storage API.
|
||||
browser.storage.local.set(msg);
|
||||
}
|
||||
});
|
||||
|
||||
browser.runtime.onMessage.addListener(msg => {
|
||||
const {type} = msg;
|
||||
|
||||
switch (type) {
|
||||
case "notify-attached-tab":
|
||||
browser.notifications.create({
|
||||
type: "basic",
|
||||
title: "Attached to tab",
|
||||
message: msg.message
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
browser.runtime.sendMessage({
|
||||
type: "notify-attached-tab",
|
||||
message: window.location.href,
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
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/.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "SDK Transition Addon",
|
||||
"version": "0.2.0",
|
||||
"manifest_version": 2,
|
||||
"permissions": ["storage", "notifications"],
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["*://*.mozilla.org/*"],
|
||||
"js": ["content-script.js"]
|
||||
}
|
||||
],
|
||||
"browser_action": {
|
||||
"browser_style": true,
|
||||
"default_icon": "icons/icon-32.png",
|
||||
"default_title": "button label",
|
||||
"default_popup": "popup.html"
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE.html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<pre id="panel-content"></pre>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +0,0 @@
|
||||
const gettingItem = browser.storage.local.get();
|
||||
gettingItem.then((results) => {
|
||||
document.querySelector("#panel-content").textContent = JSON.stringify(results, null, 2);
|
||||
});
|
||||
@@ -1,15 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
browser.runtime.onMessage.addListener(msg => {
|
||||
const {type} = msg;
|
||||
|
||||
switch (type) {
|
||||
case "notify-attached-tab":
|
||||
browser.notifications.create({
|
||||
type: "basic",
|
||||
title: "Attached to tab",
|
||||
message: msg.message
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
browser.runtime.sendMessage({
|
||||
type: "notify-attached-tab",
|
||||
message: window.location.href,
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
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/.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "SDK Addon Name",
|
||||
"version": "0.3.0",
|
||||
"manifest_version": 2,
|
||||
"permissions": ["storage", "notifications"],
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["*://*.mozilla.org/*"],
|
||||
"js": ["content-script.js"]
|
||||
}
|
||||
],
|
||||
"options_ui": {
|
||||
"page": "options.html"
|
||||
},
|
||||
"browser_action": {
|
||||
"browser_style": true,
|
||||
"default_icon": "icons/icon-32.png",
|
||||
"default_title": "button label",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "original-sdk-addon-id@mozilla.com",
|
||||
"strict_min_version": "51.0a1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<label for="superImportantUserPref">Super important user preference</label>
|
||||
<input type="text" id="superImportantUserPref">
|
||||
</div>
|
||||
<script src="options.js">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,21 +0,0 @@
|
||||
const gettingItem = browser.storage.local.get("prefs");
|
||||
gettingItem.then(results => {
|
||||
const {prefs} = results || {
|
||||
prefs: {
|
||||
superImportantUserPref: "default value"
|
||||
},
|
||||
};
|
||||
|
||||
const el = document.querySelector("#superImportantUserPref");
|
||||
el.value = prefs.superImportantUserPref;
|
||||
|
||||
const updatePref = () => {
|
||||
browser.storage.local.set({
|
||||
prefs: {
|
||||
superImportantUserPref: el.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
el.addEventListener("input", updatePref);
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE.html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<pre id="panel-content"></pre>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +0,0 @@
|
||||
const gettingItem = browser.storage.local.get();
|
||||
gettingItem.then((results) => {
|
||||
document.querySelector("#panel-content").textContent = JSON.stringify(results, null, 2);
|
||||
});
|
||||
@@ -150,35 +150,6 @@
|
||||
],
|
||||
"name": "dynamic-theme"
|
||||
},
|
||||
{
|
||||
"description": "Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension.",
|
||||
"javascript_apis": [
|
||||
"runtime.onMessage",
|
||||
"runtime.sendMessage",
|
||||
"storage.local"
|
||||
],
|
||||
"name": "embedded-webextension-bootstrapped"
|
||||
},
|
||||
{
|
||||
"description": "Demonstrates how to use an embedded WebExtension to port from an overlay extension.",
|
||||
"javascript_apis": [
|
||||
"runtime.onMessage",
|
||||
"runtime.sendMessage"
|
||||
],
|
||||
"name": "embedded-webextension-overlay"
|
||||
},
|
||||
{
|
||||
"description": "Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on.",
|
||||
"javascript_apis": [
|
||||
"notifications.create",
|
||||
"runtime.connect",
|
||||
"runtime.onConnect",
|
||||
"runtime.onMessage",
|
||||
"runtime.sendMessage",
|
||||
"storage.local"
|
||||
],
|
||||
"name": "embedded-webextension-sdk"
|
||||
},
|
||||
{
|
||||
"description": "Replaces words with emojis.",
|
||||
"javascript_apis": [],
|
||||
|
||||
Reference in New Issue
Block a user