Add background script

getnimbus · Aug 10, 2022 · 245909c · 245909c
1 parent 707adfa
commit 245909c
Show file tree

Hide file tree

Showing 9 changed files with 196 additions and 18 deletions.
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const browser: typeof import('webextension-polyfill')['default']
+}
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "svelte-preprocess": "^4.9.8",
     "tslib": "^2.3.1",
     "typescript": "^4.4.4",
+    "unplugin-auto-import": "^0.11.1",
     "vite": "~2.9.0",
     "web-ext": "^6.6.0"
   },
@@ -38,8 +39,8 @@
     "numeral": "^2.0.6",
     "svelte-windicss-preprocess": "^4.2.8",
     "tippy.js": "^6.3.7",
-    "vite-imagetools": "^4.0.4",
     "url-pattern": "^1.0.3",
+    "vite-imagetools": "^4.0.4",
     "webext-bridge": "^5.0.5",
     "webextension-polyfill": "^0.9.0",
     "windicss": "^3.5.6"

diff --git a/src/entries/background/main.ts b/src/entries/background/main.ts
@@ -1,5 +1,43 @@
-import browser from "webextension-polyfill";
+import * as browser from "webextension-polyfill";
+import { onMessage } from "webext-bridge";
 
 browser.runtime.onInstalled.addListener(() => {
   console.log("Extension installed");
 });
+
+console.log(browser);
+
+const fetchBasicData = async () => {
+  const list = await fetch("https://api.coingecko.com/api/v3/search").then(
+    (response) => response.json()
+  );
+  console.log(browser.storage);
+  browser.storage.local
+    .set({ coinList: JSON.stringify(list.coins) })
+    .then(() => {
+      console.log("Loaded crypto list");
+    });
+};
+
+browser.runtime.onStartup.addListener(async () => {
+  console.log("onStartup....");
+  await fetchBasicData();
+});
+
+interface ICoinListInput {
+  limit: number;
+}
+
+onMessage<ICoinListInput, any>("coinList", async ({ data: { limit } }) => {
+  try {
+    const data = JSON.parse(
+      (await browser.storage.local.get("coinList")).coinList
+    );
+    return data.slice(0, limit);
+  } catch (error) {
+    return [];
+  }
+});
+
+// Run on init
+fetchBasicData();
diff --git a/src/entries/contentScript/main.ts b/src/entries/contentScript/main.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 // import { onMessage, sendMessage } from "webext-bridge";
-// import browser from "webextension-polyfill";
+import * as browser from "webextension-polyfill";
 import Mark from "mark.js";
 import "@webcomponents/webcomponentsjs/webcomponents-bundle.js";
 import { coinGeko } from "./views/network";
@@ -11,6 +11,7 @@ import "./views/AddressHighlight.svelte";
 import "./views/TrxHighlight.svelte";
 import "./views/NativeTokenHighlight.svelte";
 import { escapeRegex } from "./views/utils";
+import { sendMessage } from "webext-bridge";
 
 const regexETHTrx = /0x[a-fA-F0-9]{64}/g; // TODO: Ignore longer address
 const regexETHAddress = /0x[a-fA-F0-9]{40}/g; // TODO: Solana, Near regex
@@ -90,19 +91,24 @@ const getCoinList = async () => {
 
 // Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
 (async () => {
-  // const coinList: { [key: string]: string | number }[] =
-  //   (await sendMessage("coinList", { limit: 500 })) || [];
+  const coinList: { [key: string]: string | number }[] =
+    (await sendMessage("coinList", { limit: 500 })) || [];
 
-  const coinList = (await getCoinList()) || [];
+  console.log(coinList);
+
+  // const coinList = (await getCoinList()) || [];
 
   const nameAndSymbolList: string[] = [
     ...coinList.map((item: any) => item.symbol.toUpperCase()),
   ];
 
   const regexNativeToken = new RegExp(
-    `\\b(${nameAndSymbolList.slice(0, 500).map(function (w) {
-      return escapeRegex(w);
-    }).join("|")})\\b`,
+    `\\b(${nameAndSymbolList
+      .slice(0, 500)
+      .map(function (w) {
+        return escapeRegex(w);
+      })
+      .join("|")})\\b`,
     "g"
   );
 
@@ -205,8 +211,6 @@ const getCoinList = async () => {
                   data.symbol === item.innerText || data.name === item.innerText
               );
 
-              console.log("selectedItem: ", selectedItem)
-
               // Inject address as props
               item.setAttribute("id", selectedItem?.id);
               item.setAttribute("name", item.innerText);

diff --git a/src/entries/options/index.html b/src/entries/options/index.html
@@ -8,7 +8,7 @@
 
 <body>
   <div id="app"></div>
-  <script type="module" src="./main.ts"></script>
+  <!-- <script type="module" src="./main.ts"></script> -->
   <nimbus-options />
 </body>
 

diff --git a/src/entries/popup/index.html b/src/entries/popup/index.html
@@ -8,7 +8,7 @@
 
 <body style="min-width: 100px">
   <div id="app"></div>
-  <script type="module" src="./main.ts"></script>
+  <!-- <script type="module" src="./main.ts"></script> -->
   <nimbus-popup />
 </body>
 

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -23,7 +23,7 @@ const sharedManifest = {
     page: "src/entries/options/index.html",
     open_in_tab: true,
   },
-  permissions: [],
+  permissions: ["tabs", "storage", "activeTab", "http://*/", "https://*/"],
 };
 
 const browserAction = {
@@ -55,6 +55,7 @@ const ManifestV3 = {
   action: browserAction,
   background: {
     service_worker: "src/entries/background/serviceWorker.ts",
+    type: "module",
   },
   host_permissions: ["*://*/*"],
 };

diff --git a/vite.config.ts b/vite.config.ts
@@ -5,6 +5,9 @@ import path from "path";
 import { getManifest } from "./src/manifest";
 import { windi } from "svelte-windicss-preprocess";
 import sveltePreprocess from "svelte-preprocess";
+import AutoImport from "unplugin-auto-import/vite";
+
+console.log({ env: process.env.NODE_ENV });
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -14,19 +17,32 @@ export default defineConfig(({ mode }) => {
     plugins: [
       svelte({
         preprocess: [sveltePreprocess(), windi({})],
-        exclude: ["*.normal.svelte"],
+        // exclude: ["*.normal.svelte"],
         compilerOptions: {
           customElement: true,
         },
       }),
       webExtension({
         manifest: getManifest(Number(env.MANIFEST_VERSION)),
       }),
+      AutoImport({
+        imports: [
+          {
+            "webextension-polyfill": [["default", "browser"]],
+          },
+        ],
+      }),
     ],
     resolve: {
       alias: {
         "~": path.resolve(__dirname, "./src"),
       },
     },
+    build: {
+      sourcemap: true, // TODO: Change me for prod build
+    },
+    optimizeDeps: {
+      include: ["webextension-polyfill"],
+    },
   };
 });