Use WebExtension API for cross-browser support

package.json

@@ -10,5 +10,8 @@
     "eventsource-parser": "^0.0.5",
     "expiry-map": "^2.0.0",
     "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "webextension-polyfill": "^0.10.0"
   }
 }

src/background/index.mjs

@@ -1,5 +1,6 @@
-import { v4 as uuidv4 } from "uuid";
 import ExpiryMap from "expiry-map";
+import { v4 as uuidv4 } from "uuid";
+import Browser from "webextension-polyfill";
 import { fetchSSE } from "./fetch-sse.mjs";
 
 const KEY_ACCESS_TOKEN = "accessToken";
@@ -57,7 +58,7 @@ async function getAnswer(question, callback) {
   });
 }
 
-chrome.runtime.onConnect.addListener((port) => {
+Browser.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener(async (msg) => {
     console.debug("received msg", msg);
     try {

src/content-script/index.mjs

@@ -1,9 +1,4 @@
-function getMainContainerWidth() {
-  const resultContainer = document.getElementById("center_col");
-  if (resultContainer) {
-    return resultContainer.offsetWidth + "px";
-  }
-}
+import Browser from "webextension-polyfill";
 
 async function run(question) {
   const container = document.createElement("div");
@@ -18,7 +13,7 @@ async function run(question) {
     document.getElementById("rcnt").appendChild(container);
   }
 
-  const port = chrome.runtime.connect();
+  const port = Browser.runtime.connect();
   port.onMessage.addListener(function (msg) {
     if (msg.answer) {
       container.innerHTML = `<p><span class="prefix">ChatGPT:</span><pre>${msg.answer}</pre></p>`;