use web-pollyfill to support firefox

Author: zubyj

manifest.json

@@ -26,6 +26,7 @@
     "content_scripts": [
         {
             "js": [
+                "node_modules/webextension-polyfill/dist/browser-polyfill.js",
                 "dist/content-script/get-gpt-access-token.js",
                 "dist/content-script/get-user-code.js",
                 "dist/content-script/update-solutions-tab.js",

package-lock.json

@@ -24,11 +24,12 @@
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "typescript": "^5.0.4",
+    "webextension-polyfill": "^0.10.0",
     "webpack": "^5.83.1",
     "webpack-cli": "^5.1.1"
   },
   "dependencies": {
     "eventsource-parser": "^1.0.0",
     "lodash-es": "^4.17.21"
   }
-}
+}

package.json

@@ -1,31 +1,32 @@
 import { getChatGPTAccessToken } from './chatgpt/chatgpt.js';
+var { browser } = require("webextension-polyfill-ts");
 
 // Load JSON & default settings on install
-chrome.runtime.onInstalled.addListener(() => {
+browser.runtime.onInstalled.addListener(() => {
     // Load JSON file into storage
-    const jsonUrl = chrome.runtime.getURL('src/assets/data/leetcode_solutions.json');
+    const jsonUrl = browser.runtime.getURL('src/assets/data/leetcode_solutions.json');
     fetch(jsonUrl)
         .then((response) => response.json())
         .then((data) => {
-            chrome.storage.local.set({ leetcodeProblems: data });
+            browser.storage.local.set({ leetcodeProblems: data });
         })
         .catch((error) => {
             console.error(error);
         });
 
     // Default settings
-    chrome.storage.local.set({ language: 'python' });
-    chrome.storage.local.set({ fontSize: 14 });
-    chrome.storage.local.set({ showCompanyTags: true });
-    chrome.storage.local.set({ showExamples: true });
-    chrome.storage.local.set({ showDifficulty: true });
-    chrome.storage.local.set({ clickedCompany: 'Amazon' });
+    browser.storage.local.set({ language: 'python' });
+    browser.storage.local.set({ fontSize: 14 });
+    browser.storage.local.set({ showCompanyTags: true });
+    browser.storage.local.set({ showExamples: true });
+    browser.storage.local.set({ showDifficulty: true });
+    browser.storage.local.set({ clickedCompany: 'Amazon' });
 });
 
-chrome.runtime.onMessage.addListener(
+browser.runtime.onMessage.addListener(
     function (request, _, sendResponse) {
         if (request.action == 'openSolutionVideo') {
-            chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            browser.tabs.query({ active: true, currentWindow: true }, (tabs) => {
                 let url = tabs[0].url;
                 if (url) {
                     // Remove /description/ if it exists
@@ -39,7 +40,7 @@ chrome.runtime.onMessage.addListener(
                     if (tabs.length > 0 && tabs[0].id) {
                         const tabId = tabs[0].id;
                         const updateProperties = { url: newUrl };
-                        chrome.tabs.update(tabId, updateProperties);
+                        browser.tabs.update(tabId, updateProperties);
                     }
                 }
             });
@@ -48,35 +49,35 @@ chrome.runtime.onMessage.addListener(
     },
 );
 
-chrome.runtime.onMessage.addListener((request) => {
+browser.runtime.onMessage.addListener((request) => {
     if (request.action === 'openCompanyPage') {
-        chrome.storage.local.set({ clickedCompany: request.company });
-        chrome.tabs.create({
-            url: chrome.runtime.getURL('src/problems-by-company/company.html'),
+        browser.storage.local.set({ clickedCompany: request.company });
+        browser.tabs.create({
+            url: browser.runtime.getURL('src/problems-by-company/company.html'),
             active: true,
         }, function (tab) {
             // Keep a reference to the listener so it can be removed later
             const listener = function (tabId: number, changedProps: any) {
                 // When the tab is done loading
                 if (tabId == tab.id && changedProps.status == 'complete') {
-                    chrome.tabs.sendMessage(tabId, request);
+                    browser.tabs.sendMessage(tabId, request);
                     // Remove the listener once the tab is loaded
-                    chrome.tabs.onUpdated.removeListener(listener);
+                    browser.tabs.onUpdated.removeListener(listener);
                 }
             };
             // Attach the listener
-            chrome.tabs.onUpdated.addListener(listener);
+            browser.tabs.onUpdated.addListener(listener);
         });
     }
 });
 
-chrome.runtime.onMessage.addListener((request: any) => {
+browser.runtime.onMessage.addListener((request: any) => {
     if (request.type === 'OPEN_LOGIN_PAGE') {
-        chrome.tabs.create({ url: 'https://chat.openai.com' });
+        browser.tabs.create({ url: 'https://chat.openai.com' });
     }
 });
 
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.type === 'GET_CHATGPT_ACCESS_TOKEN') {
         getChatGPTAccessToken().then((accessToken) => {
             sendResponse({ accessToken: accessToken });
@@ -86,13 +87,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 });
 
 // If the user is on a Leetcode problem page, show the solution video or company tags.
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     // If descriptions tab is opened or updated, update the description
     let urlPattern = /^https:\/\/leetcode\.com\/problems\/.*\/(description\/)?/;
     if (changeInfo.status === 'complete' && tab.url && tab.url.match(urlPattern)) {
         setTimeout(() => {
-            chrome.tabs.get(tabId, (updatedTab) => {
-                chrome.tabs.sendMessage(tabId, { action: 'updateDescription', title: updatedTab.title || 'title' });
+            browser.tabs.get(tabId, (updatedTab) => {
+                browser.tabs.sendMessage(tabId, { action: 'updateDescription', title: updatedTab.title || 'title' });
             });
         }, 1000);
     }
@@ -101,8 +102,8 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     urlPattern = /^https:\/\/leetcode\.com\/problems\/.*\/solutions\/?/;
     if (changeInfo.status === 'complete' && tab.url && tab.url.match(urlPattern)) {
         setTimeout(() => {
-            chrome.tabs.get(tabId, (updatedTab) => {
-                chrome.tabs.sendMessage(tabId, { action: 'addVideo', title: updatedTab.title || 'title' });
+            browser.tabs.get(tabId, (updatedTab) => {
+                browser.tabs.sendMessage(tabId, { action: 'addVideo', title: updatedTab.title || 'title' });
             });
         }, 1000);
     }
@@ -111,7 +112,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     urlPattern = /^https:\/\/leetcode\.com\/problems\/.*\/?/;
     if (changeInfo.status === 'complete' && tab.url && tab.url.match(urlPattern)) {
         setTimeout(() => {
-            chrome.storage.local.set({ 'currentLeetCodeProblemTitle': tab.title || 'title' });
+            browser.storage.local.set({ 'currentLeetCodeProblemTitle': tab.title || 'title' });
         }, 1000);
     }
 });

src/background/background.ts

@@ -1,8 +1,10 @@
+var browser = require("webextension-polyfill");
+
 // Request the access token from the background script
-chrome.runtime.sendMessage({ type: 'GET_CHATGPT_ACCESS_TOKEN' }, (response) => {
+browser.runtime.sendMessage({ type: 'GET_CHATGPT_ACCESS_TOKEN' }, (response) => {
     const accessToken = response.accessToken;
     if (accessToken) {
-        chrome.storage.local.set({ accessToken });
+        browser.storage.local.set({ accessToken });
     } else {
         console.error('Error: Unable to get ChatGPT access token.');
     }

src/content-script/get-gpt-access-token.ts

@@ -1,7 +1,9 @@
+var { browser } = require("webextension-polyfill-ts");
+
 // Reads the code from the user's code editor and sends it to the background script
 
 // On get user code request, read & send the code as a response
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.type === 'getCode') {
         sendResponse({ data: getCode() });
     }

src/content-script/get-user-code.ts

@@ -4,9 +4,11 @@
     This includes hiding the company tags, examples, and difficulty of the problem.
 */
 
+var { browser } = require('webextension-polyfill-ts');
+
 // shows the examples if the user has enabled it in the settings
 function showExamples() {
-    chrome.storage.local.get(['showExamples'], (result) => {
+    browser.storage.local.get(['showExamples'], (result) => {
         const showExamples = result.showExamples;
         const descriptionContainer = document.querySelector('div._1l1MA') as Element;
         if (!descriptionContainer) {
@@ -29,7 +31,7 @@ function showExamples() {
 
 // show the leetcode difficulty if the user has enabled it in the settings
 function showDifficulty() {
-    chrome.storage.local.get(['showDifficulty'], (result) => {
+    browser.storage.local.get(['showDifficulty'], (result) => {
         const showDifficulty = result.showDifficulty;
 
         // Finding the difficulty element and then toggling the display.
@@ -46,7 +48,7 @@ function showDifficulty() {
 
 // show the company tags if the user has enabled it in the settings
 function showCompanyTags(problemTitle: string) {
-    chrome.storage.local.get(['showCompanyTags'], (result) => {
+    browser.storage.local.get(['showCompanyTags'], (result) => {
         const showCompanyTags = result.showCompanyTags;
         let companyTagContainer = document.getElementById('companyTagContainer');
 
@@ -101,7 +103,7 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
         }>;
     }
 
-    chrome.storage.local.get(['leetcodeProblems'], (result) => {
+    browser.storage.local.get(['leetcodeProblems'], (result) => {
         const problem = result.leetcodeProblems.questions.find((problem: problem) => problem.title === problemTitle);
         if (problem.companies && problem.companies.length > 0) {
             const topCompanies = problem.companies.slice(0, 5);
@@ -110,7 +112,7 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
                 const button = document.createElement('button');
                 // opens the company page when the button is clicked
                 button.onclick = () => {
-                    chrome.runtime.sendMessage({
+                    browser.runtime.sendMessage({
                         action: 'openCompanyPage', company: company.name,
                     });
                 };
@@ -157,7 +159,7 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
     return companyTagContainer;
 }
 
-chrome.runtime.onMessage.addListener((request) => {
+browser.runtime.onMessage.addListener((request) => {
     if (request.action === 'updateDescription') {
         showExamples();
         showCompanyTags(request.title.split('-')[0].trim());

src/content-script/update-description-tab.ts

@@ -2,6 +2,8 @@
     Adds the top 5 youtube solution videos into the solutions tab of a Leetcode problem page.
 */
 
+var { browser } = require('webextension-polyfill-ts');
+
 const VIDEO_ASPECT_RATIO = 56.25; // 16:9 aspect ratio
 
 function createStyledElement(tagName: string, styles: { [key: string]: string }) {
@@ -99,7 +101,7 @@ function addVideo(title: string) {
     const existingContainer = solutionsTab.parentElement?.querySelector('div.video-container');
     if (existingContainer) return;
 
-    chrome.storage.local.get(['leetcodeProblems'], (result) => {
+    browser.storage.local.get(['leetcodeProblems'], (result) => {
         const problem = result.leetcodeProblems.questions.find((problem: { title: string }) => problem.title === title);
         if (problem?.videos?.length) {
             let currentVideoIndex = 0;
@@ -165,7 +167,7 @@ function updateVideo(container: HTMLDivElement, videoUrl: string, channelName: s
     }
 }
 
-chrome.runtime.onMessage.addListener((request) => {
+browser.runtime.onMessage.addListener((request) => {
     if (request.action === 'addVideo') {
         const title = request.title.split('-')[0].trim();
         addVideo(title);

src/content-script/update-solutions-tab.ts

@@ -5,6 +5,8 @@
     <title>Leetcode Explained</title>
     <link rel="stylesheet" href="./popup.css">
     <link rel="stylesheet" href="prism.css">
+    <script type="application/javascript"
+        src="../../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
     <script type="module" src="../../dist/popup/popup.js"></script>
 </head>