working on imports, maybe not worth it for the content script, it can't be an es module

manifest.json

@@ -20,13 +20,15 @@
     },
 
     "background": {
-        "scripts": ["scripts/report-slop.js"]
+        "scripts": ["scripts/report-slop.js"],
+        "type": "module"
     },
 
     "content_scripts": [
         {
             "matches": ["*://*.duckduckgo.com/*q=*"],
-            "js": ["scripts/hide-slop.js"]
+            "js": ["scripts/hide-slop.js"],
+            "type":"module"
         }
     ]
 }

pages/action_popup.html

@@ -3,7 +3,7 @@
     <meta charset="UTF-8">
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
     <!-- <script async defer src="https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js" type="module"></script> -->
-    <script async src="/scripts/action_popup.js" type="module"></script>
+    <script async src="/scripts/browser-action.js" type="module"></script>
 
     <title>Slop Farmer</title>
 </head>

src/browser-action.ts

@@ -1,4 +1,4 @@
-import { API_URL, send_message_to_background } from "common"
+import { API_URL, send_message_to_background } from "./common.js"
 
 const login_form = document.getElementById("login-form") as HTMLFormElement
 const login_status = document.getElementById("login-status")

src/hide-slop.ts

@@ -1,4 +1,4 @@
-import { send_message_to_background } from "common"
+let common: any
 
 class SearchLink {
 
@@ -78,7 +78,7 @@ function check_links(search_links: SearchLink[]) {
         return search_link.target
     })
 
-    send_message_to_background({type: "check", urls: urls})
+    common.send_message_to_background({type: "check", urls: urls})
 }
 
 async function backend_message_listener(message: any) {
@@ -156,12 +156,17 @@ async function onload_handler() {
     setup_result_observer()
 }
 
-// listen for messages from the background script
-browser.runtime.onMessage.addListener(backend_message_listener)
+import("./common.js").then((module) => {
+    common = module
+    // listen for messages from the background script
+    browser.runtime.onMessage.addListener(backend_message_listener)
+
+    // initialize state on document load
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", onload_handler)
+    } else {
+        wait_for_results().then(onload_handler)
+    }
+})
+
 
-// initialize state on document load
-if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", onload_handler)
-} else {
-    wait_for_results().then(onload_handler)
-}

src/report-slop.ts

@@ -1,4 +1,4 @@
-import { API_URL } from "common"
+import { API_URL } from "./common.js"
 let access_token: string
 
 function setup_storage_db() {
@@ -182,10 +182,10 @@ async function update_page_action_icon(details: browser.webNavigation._OnCommitt
 }
 
 async function message_listener(message: any, sender: any, send_response: Function) {
-    const tabid = sender.tab.id
     switch (message.type) {
         
         case "check":
+            const tabid = sender.tab.id
             let check_promises = new Array()
             let not_found_local = new Array()
 
@@ -226,6 +226,5 @@ function get_access_token() {
 
 browser.runtime.onInstalled.addListener(on_install_handler)
 browser.runtime.onStartup.addListener(get_access_token)
-browser.pageAction.onClicked.addListener(on_button_clicked_handler)
 browser.webNavigation.onCommitted.addListener(update_page_action_icon)
 browser.runtime.onMessage.addListener(message_listener)

tsconfig.json

@@ -6,6 +6,7 @@
         "lib": ["ES7", "DOM"],
         "sourceMap": true,
         "target": "esnext",
-        "baseUrl": "src/"
+        "baseUrl": "src/",
+        "module": "esnext"
     }
 }