MDN get started tutorial examples to manifest V3

beastify/README.md

@@ -1,40 +1,41 @@
 # beastify
 
+This extension used a tootlbar button to enable the section of beast that replaces the content of the active web page.
+
 ## What it does ##
 
 The extension includes:
 
-* a browser action with a popup including HTML, CSS, and JS
-* a content script
-* three images, each of a different beast, packaged as web accessible resources
+* An action with a popup that includes HTML, CSS, and JavaScript.
+* A content script.
+* Three images, each of a beast, packaged as web accessible resources.
 
-When the user clicks the browser action button, the popup is shown, enabling
-the user to choose one of three beasts.
+When the user clicks the action (toolbar button), the extension's popup opens, enabling the user to choose one of three beasts.
 
-When it is shown, the popup injects a content script into the current page.
+When opened, the popup injects a content script into the active page.
 
-When the user chooses a beast, the extension sends the content script a message containing
-the name of the chosen beast.
+When the user chooses a beast, the extension sends the content script a message containing the name of the chosen beast.
 
-When the content script receives this message, it replaces the current page
-content with an image of the chosen beast.
+When the content script receives this message, it replaces the active page content with an image of the chosen beast.
 
-When the user clicks the reset button, the page reloads, and reverts to its original form.
+When the user clicks the reset button, the page reloads and reverts to its original form.
 
 Note that:
 
-* if the user reloads the tab, or switches tabs, while the popup is open, then the popup won't be able to beastify the page any more (because the content script was injected into the original tab).
+* If the user reloads the tab, or switches tabs, while the popup is open, then the popup can't beastify the page (because the content script was injected into the original tab).
 
-* by default [`tabs.executeScript()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript) injects the script only when the web page and its resources have finished loading. This means that clicks in the popup will have no effect until the page has finished loading.
+* By default, [`scripting.executeScript()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/scripting/executeScript) injects the script only when the web page and its resources have finished loading. This means that clicks in the popup have no effect until the page has finished loading.
 
-* it's not possible to inject content scripts into certain pages, including privileged browser pages like "about:debugging" and the [addons.mozilla.org](https://addons.mozilla.org/) website. If the user clicks the beastify icon when such a page is loaded into the active tab, the popup displays an error message.
+* Browsers don't allow extensions to inject content scripts into specific pages. In Firefox, this includes privileged browser pages, such as "about:debugging", and the [addons.mozilla.org](https://addons.mozilla.org/) website. In Chrome, this includes internal pages, such as `chrome:extensions`, and the [chromewebstore.google.com](https://chromewebstore.google.com/) website. If the user clicks the beastify icon on one of these pages, the popup displays an error message.
 
 ## What it shows ##
 
-* write a browser action with a popup
-* how to have different browser_action images based upon the theme
-* give the popup style and behavior using CSS and JS
-* inject a content script programmatically using `tabs.executeScript()`
-* send a message from the main extension to a content script
-* use web accessible resources to enable web pages to load packaged content
-* reload web pages
+In this eample, you see how to:
+
+* Write an action (toolbar button) with a popup.
+* Display action (toolbar button) icons based on the browser theme.
+* Give a popup style and behavior using CSS and JavaScript.
+* Inject a content script programmatically using `scripting.executeScript()`.
+* Send a message from the main extension to a content script.
+* Use web accessible resources to enable web pages to load packaged content.
+* Reload web pages.

beastify/content_scripts/beastify.js

@@ -1,30 +1,33 @@
 (function() {
   /**
-   * Check and set a global guard variable.
-   * If this content script is injected into the same page again,
-   * it will do nothing next time.
+   * Check and set a global guard variable to
+   * ensure that if this content script is injected into a page again,
+   * it returns (and does nothing).
    */
   if (window.hasRun) {
     return;
   }
   window.hasRun = true;
 
   /**
-   * Given a URL to a beast image, remove all existing beasts, then
-   * create and style an IMG node pointing to
-   * that image, then insert the node into the document.
+   * Given a URL for a beast image, remove all beasts, 
+   * then create and style an IMG node pointing to the image and
+   * insert the node into the document.
    */
   function insertBeast(beastURL) {
     removeExistingBeasts();
     let beastImage = document.createElement("img");
     beastImage.setAttribute("src", beastURL);
-    beastImage.style.height = "100vh";
+    beastImage.style.objectFit = "contain";
+    beastImage.style.position = "fixed";
+    beastImage.style.height = "100%";
+    beastImage.style.width = "100%";
     beastImage.className = "beastify-image";
     document.body.appendChild(beastImage);
   }
 
   /**
-   * Remove every beast from the page.
+   * Remove all beasts from the page.
    */
   function removeExistingBeasts() {
     let existingBeasts = document.querySelectorAll(".beastify-image");
@@ -35,7 +38,7 @@
 
   /**
    * Listen for messages from the background script.
-   * Call "beastify()" or "reset()".
+   * Depending on the message, call "beastify()" or "reset()".
    */
   browser.runtime.onMessage.addListener((message) => {
     if (message.command === "beastify") {

beastify/manifest.json

@@ -1,7 +1,7 @@
 {
 
   "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",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Beastify",
   "version": "1.0",
   "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
@@ -10,10 +10,20 @@
   },
 
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "scripting"
   ],
 
-  "browser_action": {
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]",
+      "data_collection_permissions": {
+        "required": ["none"]
+      }
+    }
+  },
+
+  "action": {
     "default_icon": "icons/beasts-32.png",
     "theme_icons": [{
         "light": "icons/beasts-32-light.png",
@@ -25,7 +35,10 @@
   },
 
   "web_accessible_resources": [
-    "beasts/*.jpg"
+    {
+      "resources": [ "beasts/*.jpg" ],
+      "matches": [ "*://*/*" ]
+    }
   ]
 
 }

beastify/popup/choose_beast.js

@@ -1,20 +1,19 @@
 /**
  * CSS to hide everything on the page,
- * except for elements that have the "beastify-image" class.
+ * except for elements that have the ".beastify-image" class.
  */
 const hidePage = `body > :not(.beastify-image) {
-                    display: none;
+                    display: none !important;
                   }`;
 
 /**
  * Listen for clicks on the buttons, and send the appropriate message to
  * the content script in the page.
  */
 function listenForClicks() {
-  document.addEventListener("click", (e) => {
-
+  document.addEventListener("click", async (e) => {
     /**
-     * Given the name of a beast, get the URL to the corresponding image.
+     * Given the name of a beast, get the URL for the corresponding image.
      */
     function beastNameToURL(beastName) {
       switch (beastName) {
@@ -29,33 +28,35 @@ function listenForClicks() {
 
     /**
      * Insert the page-hiding CSS into the active tab,
-     * then get the beast URL and
+     * get the beast URL, and 
      * send a "beastify" message to the content script in the active tab.
      */
-    function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
-        const url = beastNameToURL(e.target.textContent);
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "beastify",
-          beastURL: url
-        });
+    async function beastify(tab) {
+      await browser.scripting.insertCSS({
+        target: { tabId: tab.id },
+        css: hidePage,
+      });
+      const url = beastNameToURL(e.target.textContent);
+      browser.tabs.sendMessage(tab.id, {
+        command: "beastify",
+        beastURL: url,
       });
     }
 
     /**
-     * Remove the page-hiding CSS from the active tab,
+     * Remove the page-hiding CSS from the active tab and
      * send a "reset" message to the content script in the active tab.
      */
-    function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "reset",
-        });
+    async function reset(tab) {
+      await browser.scripting.removeCSS({
+        target: { tabId: tab.id },
+        css: hidePage,
       });
+      browser.tabs.sendMessage(tab.id, { command: "reset" });
     }
 
     /**
-     * Just log the error to the console.
+     * Log the error to the console.
      */
     function reportError(error) {
       console.error(`Could not beastify: ${error}`);
@@ -68,15 +69,18 @@ function listenForClicks() {
     if (e.target.tagName !== "BUTTON" || !e.target.closest("#popup-content")) {
       // Ignore when click is not on a button within <div id="popup-content">.
       return;
-    } 
-    if (e.target.type === "reset") {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(reset)
-        .catch(reportError);
-    } else {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(beastify)
-        .catch(reportError);
+    }
+
+    try {
+      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+
+      if (e.target.type === "reset") {
+        await reset(tab);
+      } else {
+        await beastify(tab);
+      }
+    } catch (error) {
+      reportError(error);
     }
   });
 }
@@ -92,10 +96,20 @@ function reportExecuteScriptError(error) {
 }
 
 /**
- * When the popup loads, inject a content script into the active tab,
+ * When the popup loads, inject a content script into the active tab
  * and add a click handler.
- * If we couldn't inject the script, handle the error.
+ * If the extension couldn't inject the script, handle the error.
  */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
-.then(listenForClicks)
-.catch(reportExecuteScriptError);
+(async function runOnPopupOpened() {
+  try {
+    const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+
+    await browser.scripting.executeScript({
+      target: { tabId: tab.id },
+      files: ["/content_scripts/beastify.js"],
+    });
+    listenForClicks();
+  } catch (e) {
+    reportExecuteScriptError(e);
+  }
+})();

borderify/README.md

@@ -1,16 +1,16 @@
 # borderify
 
-**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.**
+This add-on injects JavaScript into mozilla.org web pages.
 
 ## What it does
 
-This extension just includes:
+This extension includes a content script, "borderify.js", that is injected into any pages
+under "mozilla.org/" or any of its subdomains.
 
-* a content script, "borderify.js", that is injected into any pages
-under "mozilla.org/" or any of its subdomains
+**The `addons.mozilla.org` domain doesn't allow scripts to be injected into its pages. Therefore, this extension doesn't work on pages in the `addons.mozilla.org` domain.**
 
 The content script draws a border around the document.body.
 
 ## What it shows
 
-* how to inject content scripts declaratively using manifest.json
+From this example, you see how to inject content scripts declaratively using manifest.json.

borderify/borderify.js

@@ -1,4 +1,4 @@
 /*
-Just draw a border round the document.body.
+Draw a border round the document.body.
 */
 document.body.style.border = "5px solid red";

borderify/manifest.json

@@ -1,14 +1,23 @@
 {
 
   "description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Borderify",
   "version": "1.0",
   "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
   "icons": {
     "48": "icons/border-48.png"
   },
 
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]",
+      "data_collection_permissions": {
+        "required": ["none"]
+      }
+    }
+  },
+
   "content_scripts": [
     {
       "matches": ["*://*.mozilla.org/*"],