Simplify logic & make compatible with manifest v3

dthung1602 · May 5, 2022 · 2bd66b1 · 2bd66b1
1 parent f089190
commit 2bd66b1
Show file tree

Hide file tree

Showing 13 changed files with 283 additions and 250 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .idea/
 build/
+manifest.json
diff --git a/README.md b/README.md
@@ -45,6 +45,10 @@ Simply get rid of "🔥🔥 neW BaNger aLErt 🔥🔥" in the comment section
 
 ![](images/demo/replace-by-text.png)
 
+#### Click on the Spam icon in the tool bar to customize
+
+![](images/demo/toolbar.png)
+
 ## Installation
 
 To be updated
@@ -56,15 +60,25 @@ To be updated
     git clone https://github.com/dthung1602/the-spamminator
     ```
 2. Load extension for debugging in Chrome:
+    - Make a symlink `manifest.json` -> `manifest-v3.json`
+        ```shell
+        ln -s manifest.json manifest-v3.json     
+        ```
     - Go to [chrome://extensions/](chrome://extensions/)
     - Click on `Load unpacked` button on the top left
     - Select the cloned repo
-    - (!) Note that chrome support for manifest v2 will end in June 2023
 3. Load extension for debugging in Firefox:
+    - Make a symlink `manifest.json` -> `manifest-v2.json`
+        ```shell
+        ln -s manifest.json manifest-v2.json     
+        ```
     - Go to [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox)
     - Click on `Load Temporary Add-on`
     - Select the manifest.json file
-
+    - Note that Chrome can also load manifest v2, but this will be deprecated in June 2023
+4. Package for distribution:
+    - Run `build.sh`
+    - The output zip files are in the `build` directory
 <!-- CONTRIBUTING -->
 ## Contributing
 

diff --git a/build.sh b/build.sh
@@ -2,23 +2,33 @@
 
 set -e
 
+echo "--> Start"
 SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 BUILD_DIR="$SCRIPT_DIR/build"
 RAW_CONTENT="${BUILD_DIR}/raw"
 
+echo "--> Preparing"
 if [ -d "$BUILD_DIR" ]; then
     rm -rf "$BUILD_DIR"
 fi
 mkdir -p "$RAW_CONTENT"
 
 cd "$SCRIPT_DIR"
-cp -r manifest.json vendor scripts popup images "$RAW_CONTENT"
+cp -r vendor scripts popup images "$RAW_CONTENT"
 rm -rf "$RAW_CONTENT/images/demo"
 
 cd "$RAW_CONTENT"
-zip -r -FS ../the-spamminator.zip *
 
+echo "--> Building FireFox extension"
+cp "${SCRIPT_DIR}/manifest-v2.json" manifest.json
+zip -r -FS ../the-spamminator-firefox.zip *
+
+echo "--> Building Chrome extension"
+cp "${SCRIPT_DIR}/manifest-v3.json" manifest.json
+zip -r -FS ../the-spamminator-chrome.zip *
+
+echo "--> Cleaning up"
 cd ..
 rm -rf "$RAW_CONTENT"
 
-echo "Done!"
+echo "--> Done"
diff --git a/images/demo/toolbar.png b/images/demo/toolbar.png
diff --git a/manifest.json → manifest-v2.json b/manifest.json → manifest-v2.json
@@ -1,13 +1,16 @@
 {
   "manifest_version": 2,
   "name": "TheSpamminator",
-  "version": "0.1",
-  "description": "Remove banger alert spams from comment section of mangakakalot",
+  "version": "1.0",
+  "description": "Remove banger alert spams from comment section of mangakakalot & manganato",
   "icons": {
     "16": "images/logo/spam-logo-16.png",
     "32": "images/logo/spam-logo-32.png",
     "64": "images/logo/spam-logo-64.png"
   },
+  "web_accessible_resources": [
+    "images/*"
+  ],
   "browser_action": {
     "default_icon": {
       "16": "images/logo/spam-logo-16.png",
@@ -17,33 +20,25 @@
     "default_title": "The Spamminator",
     "default_popup": "popup/popup.html"
   },
+  "background": {
+    "scripts": [
+      "vendor/browser-polyfill.min.js",
+      "scripts/service-worker.js"
+    ]
+  },
   "content_scripts": [
     {
       "matches": [
-        "*://mangakakalot.com/chapter/*",
-        "*://readmanganato.com/manga-*"
+        "https://www.facebook.com/*"
       ],
       "js": [
-        "vendor/webextension-polyfill.js",
-        "scripts/mangasite.js"
+        "vendor/browser-polyfill.min.js",
+        "scripts/clean-spams.js"
       ],
       "all_frames": true
     }
   ],
-  "background": {
-    "scripts": [
-      "vendor/webextension-polyfill.js",
-      "scripts/background.js"
-    ]
-  },
-  "web_accessible_resources": [
-    "images/*",
-    "vendor/webextension-polyfill.js"
-  ],
   "permissions": [
-    "storage",
-    "activeTab",
-    "tabs",
-    "<all_urls>"
+    "storage"
   ]
-}
+}
diff --git a/manifest-v3.json b/manifest-v3.json
@@ -0,0 +1,44 @@
+{
+  "manifest_version": 3,
+  "name": "TheSpamminator",
+  "version": "1.0",
+  "description": "Remove banger alert spams from comment section of mangakakalot & manganato",
+  "icons": {
+    "16": "images/logo/spam-logo-16.png",
+    "32": "images/logo/spam-logo-32.png",
+    "64": "images/logo/spam-logo-64.png"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["/images/*"],
+      "matches": ["https://www.facebook.com/*"]
+    }
+  ],
+  "action": {
+    "default_icon": {
+      "16": "images/logo/spam-logo-16.png",
+      "32": "images/logo/spam-logo-32.png",
+      "64": "images/logo/spam-logo-64.png"
+    },
+    "default_title": "The Spamminator",
+    "default_popup": "popup/popup.html"
+  },
+  "background": {
+    "service_worker": "scripts/service-worker.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://www.facebook.com/*"
+      ],
+      "js": [
+        "vendor/browser-polyfill.min.js",
+        "scripts/clean-spams.js"
+      ],
+      "all_frames": true
+    }
+  ],
+  "permissions": [
+    "storage"
+  ]
+}
diff --git a/popup/popup.html b/popup/popup.html
@@ -28,7 +28,7 @@
     <div class="clean-spam-option hidden" id="replace-with-image">
         <select id="image">
             <option value="behold-the-spamminator.jpg">Behold! The spamminator!</option>
-            <option value="destroyed-by-the-spamminator.jpg">Destroyed by the spamminator</option>
+            <option value="destroyed-by-spamminator.jpg">Destroyed by the spamminator</option>
             <option value="just-spamming.jpg">Just spamming</option>
             <option value="spam.png">Spam!</option>
             <option value="spam-everywhere.jpg">Spam everywhere</option>
@@ -53,7 +53,7 @@
         </div>
     </div>
 </footer>
-<script src="/vendor/webextension-polyfill.js"></script>
+<script src="/vendor/browser-polyfill.min.js"></script>
 <script src="/popup/popup.js"></script>
 </body>
 </html>
diff --git a/popup/popup.js b/popup/popup.js
@@ -1,43 +1,40 @@
-// // debug code
-// if (window.browser === undefined) {
-//   if (window.chrome) {
-//     window.browser = window.chrome;
-//   } else {
-//     window.__storage__ = {};
-//     browser = {
-//       storage: {
-//         local: {
-//           set(value) {
-//             window.__storage__ = { ...window.__storage__, ...value }
-//             console.debug("Storage is set to: ", window.__storage__);
-//             return Promise.resolve(window.__storage__)
-//           },
-//           get(value) {
-//             return Promise.resolve(window.__storage__)
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
+// debug code
+if (window.browser === undefined) {
+  if (window.chrome) {
+    window.browser = window.chrome;
+  } else {
+    window.__storage__ = {};
+    browser = {
+      storage: {
+        local: {
+          set(value) {
+            window.__storage__ = { ...window.__storage__, ...value }
+            console.debug("Storage is set to: ", window.__storage__);
+            return Promise.resolve(window.__storage__)
+          },
+          get(value) {
+            return Promise.resolve(window.__storage__)
+          }
+        }
+      }
+    }
+  }
+}
 
 // Load value from storage to UI
 async function loadSettings() {
   // TODO add ban domain settings
   let {
     enable,
     cleanSpamAction,
-    cleanSpamOptions
-  } = await browser.storage.local.get(["enable", "cleanSpamAction", "cleanSpamOptions"]);
-
-  enable = enable === undefined ? true : enable;
-  cleanSpamAction = cleanSpamAction === undefined ? "replace-with-image" : cleanSpamAction;
-  cleanSpamOptions = cleanSpamOptions === undefined ? { url: "random", text: "" } : cleanSpamOptions;
+    cleanSpamText,
+    cleanSpamImage
+  } = await browser.storage.local.get(["enable", "cleanSpamAction", "cleanSpamText", "cleanSpamImage"]);
 
   document.getElementById("toggle").checked = enable;
   document.getElementById("action").value = cleanSpamAction;
-  document.getElementById("image").value = cleanSpamOptions.url || "random";
-  document.getElementById("text").value = cleanSpamOptions.text || "";
+  document.getElementById("image").value = cleanSpamImage;
+  document.getElementById("text").value = cleanSpamText;
 
   if (enable) {
     document.querySelector("body").classList.add("on");
@@ -51,13 +48,12 @@ loadSettings().catch(console.error);
 
 // Enable / disable
 // https://codepen.io/agoodwin/pen/JBvBPr
-const toggle = document.querySelector('#toggle');
 const toggleOnOff = () => {
-  const enable = document.querySelector("body").classList.toggle('on');
+  const enable = document.querySelector("body").classList.toggle("on");
   browser.storage.local.set({ enable }).catch(console.error);
   return false;
 }
-toggle.addEventListener("click", toggleOnOff);
+document.getElementById("toggle").addEventListener("click", toggleOnOff);
 
 // Select action
 const selectAction = (event) => {
@@ -74,11 +70,9 @@ document.getElementById("action").addEventListener("change", selectAction);
 
 // Save options
 const saveOptions = (event) => {
-  const cleanSpamOptions = {
-    text: document.getElementById("text").value,
-    url: document.getElementById("image").value,
-  }
-  browser.storage.local.set({ cleanSpamOptions }).catch(console.error);
+  const cleanSpamText = document.getElementById("text").value;
+  const cleanSpamImage = document.getElementById("image").value;
+  browser.storage.local.set({ cleanSpamText, cleanSpamImage }).catch(console.error);
 }
 document.getElementById("image").addEventListener("change", saveOptions);
 document.getElementById("text").addEventListener("change", saveOptions);

diff --git a/scripts/background.js b/scripts/background.js