Migrate extension build to WXT (#258)

* Migrate extension build to WXT

* Add Firefox data collection declaration

Author: rthaut

.babelrc

@@ -1,5 +1,6 @@
 {
   "env": {
+    "browser": true,
     "es6": true,
     "node": true
   },
@@ -9,7 +10,8 @@
     "plugin:prettier/recommended"
   ],
   "parserOptions": {
-    "ecmaVersion": 2019
+    "ecmaVersion": 2020,
+    "sourceType": "module"
   },
   "root": true,
   "rules": {
@@ -22,4 +24,4 @@
     "no-useless-escape": "off",
     "prettier/prettier": "warn"
   }
-}
+}

.eslintrc

@@ -27,8 +27,5 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run lint
-        run: npm run lint
-
-      - name: Run Firefox extension validation
-        run: npm run test:firefox
+      - name: Run validation
+        run: npm test

.github/workflows/ci.yml

@@ -1,7 +1,9 @@
 node_modules/
+.output/
+.wxt/
 dist/
 packages/
 
 .env
 /stats
-/test-data
+/test-data

.gitignore

@@ -39,11 +39,11 @@ Contributions are always welcome! Even if you aren't comfortable coding, you can
 
 ### Localization/Translation
 
-This extension is setup to be fully localized/translated into multiple languages, but for now English is the only language with full translations. If you are able to help localize/translate, please [check out this guide](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization). All of the text for the extension is stored [here in the `/app/_locales` directory](https://github.com/rthaut/deviantART-Filter/tree/master/app/_locales).
+This extension is setup to be fully localized/translated into multiple languages, but for now English is the only language with full translations. If you are able to help localize/translate, please [check out this guide](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization). All of the text for the extension is stored [here in the `/public/_locales` directory](https://github.com/rthaut/deviantART-Filter/tree/master/public/_locales).
 
 ### Building the Extension
 
-**This extension uses the [WebExtension Toolbox](https://github.com/webextension-toolbox/webextension-toolbox#usage) for development and build processes.**
+**This extension uses [WXT](https://wxt.dev/) for development and build processes.**
 
 To build the extension from source code, you will need to use [Node Package Manager (npm)](https://www.npmjs.com/), which handles all of the dependencies needed for this project and is used to execute the various scripts for development/building/packaging/etc.
 
@@ -54,35 +54,37 @@ npm install
 Then you can run the development process (where the extension is auto-reloaded when changes are made) for your browser of choice:
 
 ```sh
-npm run dev <chrome/edge/firefox>
+npm run start:<chrome/edge/firefox>
 ```
 
 Or you can generate a production build for your browser of choice:
 
 ```sh
-npm run build <chrome/edge/firefox>
+npm run build:<chrome/edge/firefox>
+```
+
+Or you can package the extension for your browser of choice:
+
+```sh
+npm run zip:<chrome/edge/firefox>
 ```
 
 ### Development Process
 
-To make development easier, you can start up a temporary development profile on [Mozilla Firefox](https://getfirefox.com) or [Google Chrome](google.com/chrome) with the extension already loaded. The browser will also automatically detect changes and reload the extension for you (read more about this on the [`web-ext` documentation pages](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext)). Use the following commands **in parallel** to re-build the extension and re-load it in Firefox/Chrome automatically as you make changes:
+To make development easier, you can start up a temporary development profile on [Mozilla Firefox](https://getfirefox.com) or [Google Chrome](google.com/chrome) with the extension already loaded. The browser will also automatically detect changes and reload the extension for you. Use the matching start command for your browser:
 
 Firefox:
 
 ```sh
-npm run dev firefox
 npm run start:firefox
 ```
 
 Chrome:
 
 ```sh
-npm run dev chrome
 npm run start:chrome
 ```
 
-**Note that you will need 2 terminal instances**, one for each of the above commands, as they both remain running until you cancel them (use <kbd>CTRL</kbd> + <kbd>c</kbd> to cancel each process in your terminal(s)).
-
 
 [chrome-url]: https://chrome.google.com/webstore/detail/deviantart-filter/odlmamilbohnpnoomjclomghphbajikp
 [chrome-image-version]: https://img.shields.io/chrome-web-store/v/odlmamilbohnpnoomjclomghphbajikp?logo=googlechrome&style=for-the-badge

README.md

@@ -0,0 +1,25 @@
+import { browser } from "wxt/browser";
+import { defineBackground } from "wxt/utils/define-background";
+
+import { InitMenus } from "scripts/background/menus";
+import { OnRuntimeMessage } from "scripts/background/messages";
+import { OnNotificationClicked } from "scripts/background/notifications";
+import { OnInstalled } from "scripts/background/runtime";
+import { OnStorageChanged } from "scripts/background/storage";
+import { OpenOrShowURL, OnTabUpdate } from "scripts/background/tabs";
+
+export default defineBackground({
+  persistent: true,
+  main() {
+    browser.notifications.onClicked.addListener(OnNotificationClicked);
+    browser.pageAction.onClicked.addListener(() =>
+      OpenOrShowURL(browser.runtime.getURL("manage.html")),
+    );
+    browser.runtime.onInstalled.addListener(OnInstalled);
+    browser.runtime.onMessage.addListener(OnRuntimeMessage);
+    browser.storage.onChanged.addListener(OnStorageChanged);
+    browser.tabs.onUpdated.addListener(OnTabUpdate);
+
+    InitMenus();
+  },
+});

app/entrypoints/background.js

@@ -1,20 +1,26 @@
-const SELECTORS = [
-  `a[href*="deviantart.com/"][href*="/art/"]`,
-  `a[href*="deviantart.com/"][href*="/journal/"]`,
-];
+import { browser } from "wxt/browser";
+import { defineContentScript } from "wxt/utils/define-content-script";
+
+import "../styles/content.css";
 
 import {
   LOCAL_STORAGE_CHANGED,
   SHOW_FILTER_DEVIATION_MODAL,
   HIDE_FILTER_DEVIATION_MODAL,
-} from "./constants/messages";
+} from "scripts/constants/messages";
+
+import { PAGES } from "scripts/constants/url";
 
-import { PAGES } from "./constants/url";
+import { SetMetadataOnNode } from "scripts/content/metadata";
 
-import { SetMetadataOnNode } from "./content/metadata";
+import * as KeywordsFilter from "scripts/content/filters/keywords";
+import * as UsersFilter from "scripts/content/filters/users";
+
+const SELECTORS = [
+  `a[href*="deviantart.com/"][href*="/art/"]`,
+  `a[href*="deviantart.com/"][href*="/journal/"]`,
+];
 
-import * as KeywordsFilter from "./content/filters/keywords";
-import * as UsersFilter from "./content/filters/users";
 const FILTERS = [KeywordsFilter, UsersFilter];
 
 let ENABLED = true;
@@ -149,10 +155,7 @@ const InitFilterFrame = () => {
     iframe = document.createElement("iframe");
     iframe.setAttribute("id", id);
     iframe.setAttribute("role", "dialog");
-    iframe.setAttribute(
-      "src",
-      browser.runtime.getURL("pages/create-filters.html"),
-    );
+    iframe.setAttribute("src", browser.runtime.getURL("create-filters.html"));
     Object.assign(iframe.style, {
       display: "none",
       zIndex: 9999,
@@ -229,35 +232,37 @@ const GetPlaceholderOption = async (optionName, defaultValue) => {
   return data?.options?.placeholders?.[optionName] ?? defaultValue;
 };
 
-/**
- * Run once the content script is loaded
- */
-(async () => {
-  // create the filter frame first so it responds to messages
-  InitFilterFrame();
+export default defineContentScript({
+  matches: ["*://*.deviantart.com/*"],
+  allFrames: false,
+  runAt: "document_end",
+  async main() {
+    // create the filter frame first so it responds to messages
+    InitFilterFrame();
 
-  ENABLED = !(await IsPageDisabled(window.location));
+    ENABLED = !(await IsPageDisabled(window.location));
 
-  // setup message handlers as soon as we are ready to receive them
-  if (!browser.runtime.onMessage.hasListener(OnRuntimeMessage)) {
-    browser.runtime.onMessage.addListener(OnRuntimeMessage);
-  }
+    // setup message handlers as soon as we are ready to receive them
+    if (!browser.runtime.onMessage.hasListener(OnRuntimeMessage)) {
+      browser.runtime.onMessage.addListener(OnRuntimeMessage);
+    }
 
-  if (ENABLED) {
-    document.body.classList.add("enable-metadata-indicators");
+    if (ENABLED) {
+      document.body.classList.add("enable-metadata-indicators");
 
-    if (!(await GetPlaceholderOption("preventClick", true))) {
-      document.body.classList.add("clickable-placeholders");
-    }
+      if (!(await GetPlaceholderOption("preventClick", true))) {
+        document.body.classList.add("clickable-placeholders");
+      }
 
-    if (!(await GetPlaceholderOption("showFilterText", true))) {
-      document.body.classList.add("hide-placeholder-text");
-    }
+      if (!(await GetPlaceholderOption("showFilterText", true))) {
+        document.body.classList.add("hide-placeholder-text");
+      }
 
-    // setup observers for nodes loaded after initial render next
-    WatchForNewNodes(SELECTORS.join(", "));
+      // setup observers for nodes loaded after initial render next
+      WatchForNewNodes(SELECTORS.join(", "));
 
-    // get all existing nodes on the page and work with them
-    await HandleNodes(document.querySelectorAll(SELECTORS.join(", ")));
-  }
-})();
+      // get all existing nodes on the page and work with them
+      await HandleNodes(document.querySelectorAll(SELECTORS.join(", ")));
+    }
+  },
+});

app/scripts/content.js app/entrypoints/content.jsapp/scripts/content.js renamed to app/entrypoints/content.js

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>DeviantArt Filter - Create Filters for Deviation</title>
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../scripts/create-filters.jsx"></script>
+  </body>
+</html>

app/entrypoints/create-filters.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>DeviantArt Filter Management</title>
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../scripts/manage.jsx"></script>
+  </body>
+</html>