Merge pull request #4 from ProjectMyosotis/feat/use-wxt

Building with WXT & Migrate to MV3
ProjectMyosotis · Aug 18, 2024 · 1b1d74b · 1b1d74b
2 parents 1e0d7b6 + e96f4c9
commit 1b1d74b
Show file tree

Hide file tree

Showing 34 changed files with 4,775 additions and 2,313 deletions.
diff --git a/.github/workflows/build-extension.yaml b/.github/workflows/build-extension.yaml
@@ -0,0 +1,42 @@
+name: Build WXT Extension
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-24.04
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build extension
+        run: pnpm run zip
+
+      - name: Build extension for firefox
+        run: pnpm run zip:firefox
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-${{ github.sha }}
+          path: .output/*.zip
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# FOR MIGRATION
+example-wxt/
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+v22.6.0
diff --git a/css/bootstrap-multiselect.css b/css/bootstrap-multiselect.css
diff --git a/css/bootstrap-switch.min.css b/css/bootstrap-switch.min.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/global.css b/css/global.css
diff --git a/css/main.css b/css/main.css
diff --git a/entrypoints/content.ts b/entrypoints/content.ts
@@ -0,0 +1,99 @@
+export default defineContentScript({
+  matches: ["*://*/*"],
+  runAt: "document_end",
+  main() {
+    nyanize();
+  },
+});
+
+let nyanizeStatus = 1;
+
+async function nyanize() {
+  await initConfigs();
+
+  if (nyanizeStatus === 0) {
+    return;
+  }
+
+  walk(document.body);
+
+  const observer = new MutationObserver((mutationRecords) => {
+    for (const record of mutationRecords) {        
+      for (const node of record.addedNodes) {
+        walk(node);
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+}
+
+async function initConfigs() {
+  const data = await browser.storage.local.get(null);
+  if (typeof data.nyanizeStatus !== "undefined") {
+    nyanizeStatus = parseInt(data.nyanizeStatus);
+  }
+}
+
+function walk(node: Node) {
+  switch (node.nodeType) {
+    case 1: // Element
+      // ignore special node
+      if (
+        ["SCRIPT", "CODE", "SVG", "NOSCRIPT", "STYLE"].includes(node.nodeName)
+      ) {
+        break;
+      }
+    case 9: // Document
+    case 11: // Document fragment
+      let child = node.firstChild;
+      while (child) {
+        walk(child);
+        child = child.nextSibling;
+      }
+      break;
+
+    case 3: // Text node
+      handleText(node as Text);
+      break;
+
+    default:
+      console.log(node)
+  }
+}
+
+function handleText(textNode: Text) {
+  let v = textNode.nodeValue;
+  if (v === null) {
+    console.error("textNode.nodeValue is null");
+    return;
+  }
+  if (nyanizeStatus === 2) {
+    v = v.replace(/にゃ/g, "な"); // temporary reverse
+    v = v.replace(/[ぁ-ん]/g, "にゃ");
+    v = v.replace(/ニャ/g, "ナ"); // temporary reverse
+    v = v.replace(/[ァ-ン]/g, "ニャ");
+    v = v.replace(/ﾆｬ/g, "ﾅ"); // temporary reverse
+    v = v.replace(/[ｧ-ﾝﾞﾟ]/g, "ﾆｬ");
+    v = v.replace(/[一-龥]/g, "にゃ");
+    v = v.replace(/nya/g, "n"); // temporary reverse
+    v = v.replace(/[a-z]/g, "nya");
+    v = v.replace(/NYA/g, "N"); // temporary reverse
+    v = v.replace(/[A-Z]/g, "NYA");
+  } else {
+    v = v.replace(/な/g, "にゃ");
+    v = v.replace(/ナ/g, "ニャ");
+    v = v.replace(/ﾅ/g, "ﾆｬ");
+    v = v.replace(/na/g, "nya");
+    v = v.replace(/Na/g, "Nya");
+    v = v.replace(/nA/g, "nyA");
+    v = v.replace(/NA/g, "NYA");
+  }
+  if (textNode.nodeValue !== v) {
+    textNode.nodeValue = v;
+  }
+}
diff --git a/entrypoints/popup/index.html b/entrypoints/popup/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en" style="opacity: 0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nyanize Extension</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="main-outer">
+      <div id="main-inner">
+        <h1 id="main-title">Nyanize</h1>
+        <p>
+          <label class="form-check form-switch">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="nyanizeStatus"
+              name="nyanizeStatus"
+              data-size="mini"
+              role="switch"
+            />
+            Enable nyanize
+          </label>
+        </p>
+        <p>
+          <label class="form-check form-switch">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              id="ultimatenyanizeStatus"
+              name="ultimatenyanizeStatus"
+              data-size="mini"
+              role="switch"
+            />
+            Ultimate Nyanize mode
+          </label>
+        </p>
+        <p>Settings are effective after reloading.</p>
+      </div>
+    </div>
+
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/entrypoints/popup/main.ts b/entrypoints/popup/main.ts
@@ -0,0 +1,77 @@
+import "./style.scss";
+
+async function init_main() {
+  let isEnyabled = 1;
+  //get the current enyabled state and rule list
+  const data = await browser.storage.local.get("nyanizeStatus");
+
+  console.log(data);
+  if (typeof data.nyanizeStatus !== "undefined") {
+    isEnyabled = parseInt(data.nyanizeStatus);
+  }
+  //make the switch reflect our current state
+  const nyanizeStatus = document.getElementById(
+    "nyanizeStatus",
+  ) as HTMLInputElement;
+  const ultimatenyanizeStatus = document.getElementById(
+    "ultimatenyanizeStatus",
+  ) as HTMLInputElement;
+
+  if (isEnyabled === 1) {
+    nyanizeStatus.checked = true;
+    ultimatenyanizeStatus.checked = false;
+  } else if (isEnyabled === 2) {
+    nyanizeStatus.checked = true;
+    ultimatenyanizeStatus.checked = true;
+  } else {
+    nyanizeStatus.checked = false;
+    ultimatenyanizeStatus.checked = false;
+  }
+
+  setupEventHandler();
+
+  //show the menu with fade-in effect
+  document.documentElement.style.transition = "opacity 1s";
+  setTimeout(() => {
+    document.documentElement.style.opacity = "1";
+  }, 0);
+}
+
+function setupEventHandler() {
+  const nyanizeStatus = document.getElementById(
+    "nyanizeStatus",
+  ) as HTMLInputElement;
+  const ultimatenyanizeStatus = document.getElementById(
+    "ultimatenyanizeStatus",
+  ) as HTMLInputElement;
+
+  //handle enyabling or disabling or the extension
+  nyanizeStatus.addEventListener("change", function (event) {
+    if (this.checked) {
+      browser.storage.local.set({
+        nyanizeStatus: 1,
+      });
+    } else {
+      ultimatenyanizeStatus.checked = false;
+      browser.storage.local.set({
+        nyanizeStatus: 0,
+      });
+    }
+  });
+
+  ultimatenyanizeStatus.addEventListener("change", function (event) {
+    if (this.checked) {
+      nyanizeStatus.checked = true;
+      browser.storage.local.set({
+        nyanizeStatus: 2,
+      });
+    } else {
+      browser.storage.local.set({
+        nyanizeStatus: 1,
+      });
+    }
+  });
+}
+
+//bind events to dom elements
+document.addEventListener("DOMContentLoaded", init_main);