Changed for manifest version 3 and compatibility to Chrome and CCleaner browsers

beastify/content_scripts/beastify.js

@@ -1,3 +1,10 @@
+// Making compatible with Chrome
+if (typeof browser == "undefined") {
+  // `browser` is not defined in Chrome, but Manifest V3 extensions in Chrome
+  // also support promises in the `chrome` namespace, like Firefox. To easily
+  // test the example without modifications, polyfill "browser" to "chrome".
+  globalThis.browser = chrome;
+}
 (function() {
   /**
    * Check and set a global guard variable.
@@ -20,6 +27,7 @@
     beastImage.setAttribute("src", beastURL);
     beastImage.style.height = "100vh";
     beastImage.className = "beastify-image";
+    beastImage.setAttribute("id","beastify-image")
     document.body.appendChild(beastImage);
   }
 
@@ -35,7 +43,7 @@
 
   /**
    * Listen for messages from the background script.
-   * Call "beastify()" or "reset()".
+   * Call "beastify()", or "removeExistingBeasts()" for resting.
    */
   browser.runtime.onMessage.addListener((message) => {
     if (message.command === "beastify") {
@@ -45,4 +53,4 @@
     }
   });
 
-})();
+})();

beastify/manifest.json

@@ -1,19 +1,20 @@
 {
 
   "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",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/beastify",
   "icons": {
     "48": "icons/beasts-48.png"
   },
 
   "permissions": [
-    "activeTab"
+    "activeTab", 
+    "scripting"
   ],
 
-  "browser_action": {
+  "action": {
     "default_icon": "icons/beasts-32.png",
     "theme_icons": [{
         "light": "icons/beasts-32-light.png",
@@ -25,7 +26,11 @@
   },
 
   "web_accessible_resources": [
-    "beasts/*.jpg"
+    { "resources": [ 
+        "beasts/*.jpg"
+      ],
+      "matches": ["<all_urls>"]
+    }
   ]
 
 }

beastify/popup/choose_beast.js

@@ -1,10 +1,20 @@
+// Making compatible with Chrome
+if (typeof browser == "undefined") {
+  // `browser` is not defined in Chrome, but Manifest V3 extensions in Chrome
+  // also support promises in the `chrome` namespace, like Firefox. To easily
+  // test the example without modifications, polyfill "browser" to "chrome".
+  globalThis.browser = chrome;
+}
 /**
  * CSS to hide everything on the page,
  * except for elements that have the "beastify-image" class.
  */
-const hidePage = `body > :not(.beastify-image) {
-                    display: none;
-                  }`;
+const hidePage = `
+  body > :not(img.beastify-image#beastify-image) {
+    display: none;
+
+  };
+`;
 
 /**
  * Listen for clicks on the buttons, and send the appropriate message to
@@ -33,7 +43,22 @@ function listenForClicks() {
      * send a "beastify" message to the content script in the active tab.
      */
     function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
+      /* below browser.scripting.removeCSS is added for Chrome compability.
+       * browser.scripting.insertCSS in Chrome adds additional copies of CSS 
+       * een though that CSS alredy exists.   removeCSS is added to remove 
+       * any old copy of CSS
+       */
+      browser.scripting.removeCSS({
+        css: hidePage, 
+        target: {tabId:tabs[0].id}
+      }).then(()=>{
+          browser.scripting.insertCSS({
+            css: hidePage, 
+            target: {tabId:tabs[0].id}
+          });
+      })
+      .then( (p)=> {
+        console.log(p);
         const url = beastNameToURL(e.target.textContent);
         browser.tabs.sendMessage(tabs[0].id, {
           command: "beastify",
@@ -47,7 +72,10 @@ function listenForClicks() {
      * send a "reset" message to the content script in the active tab.
      */
     function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
+      browser.scripting.removeCSS({
+        css: hidePage, 
+        target: {tabId:tabs[0].id}
+      }).then( e => {
         browser.tabs.sendMessage(tabs[0].id, {
           command: "reset",
         });
@@ -96,6 +124,13 @@ function reportExecuteScriptError(error) {
  * and add a click handler.
  * If we couldn't inject the script, handle the error.
  */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+browser.tabs.query({ currentWindow: true, active: true })
+.then( (tabs) => {
+    return browser.scripting
+    .executeScript({
+        files : [ "./content_scripts/beastify.js"],
+        target : { allFrames : true, tabId: tabs[0].id}
+    })
+})
 .then(listenForClicks)
 .catch(reportExecuteScriptError);

examples.json

@@ -34,9 +34,9 @@
             "extension.getURL",
             "runtime.onMessage",
             "tabs.executeScript",
-            "tabs.insertCSS",
+            "scripting.insertCSS",
             "tabs.query",
-            "tabs.removeCSS",
+            "scripting.removeCSS",
             "tabs.sendMessage",
             "tabs.Tab"
         ],