fix: `scripting` and `action` API

src/newtab/pages/Recording.vue

@@ -35,7 +35,7 @@
           </p>
           <p
             :title="item.data.description || item.description"
-            class="text-overflow text-sm leading-tight text-gray-600"
+            class="text-overflow text-sm leading-tight text-gray-600 dark:text-gray-300"
           >
             {{ item.data.description || item.description }}
           </p>
@@ -208,7 +208,7 @@ async function stopRecording() {
     }
 
     await browser.storage.local.remove(['isRecording', 'recording']);
-    await browser.action.setBadgeText({ text: '' });
+    await (browser.action || browser.browserAction).setBadgeText({ text: '' });
 
     const tabs = (await browser.tabs.query({})).filter((tab) =>
       tab.url.startsWith('http')

src/newtab/utils/RecordWorkflowUtils.js

@@ -1,6 +1,7 @@
 import browser from 'webextension-polyfill';
 
 const validateUrl = (str) => str?.startsWith('http');
+const isMV2 = browser.runtime.getManifest().manifest_version === 2;
 
 class RecordWorkflowUtils {
   static async updateRecording(callback) {
@@ -106,13 +107,21 @@ class RecordWorkflowUtils {
       const { isRecording } = await browser.storage.local.get('isRecording');
       if (!isRecording) return;
 
-      await browser.scripting.executeScript({
-        target: {
-          tabId,
+      if (isMV2) {
+        await browser.tabs.executeScript(tabId, {
           allFrames: true,
-        },
-        files: ['recordWorkflow.bundle.js'],
-      });
+          runAt: 'document_start',
+          file: './recordWorkflow.bundle.js',
+        });
+      } else {
+        await browser.scripting.executeScript({
+          target: {
+            tabId,
+            allFrames: true,
+          },
+          files: ['recordWorkflow.bundle.js'],
+        });
+      }
     } catch (error) {
       console.error(error);
     }

src/newtab/utils/elementSelector.js

@@ -1,6 +1,8 @@
 import browser from 'webextension-polyfill';
 import { isXPath, sleep } from '@/utils/helper';
 
+const isMV2 = browser.runtime.getManifest().manifest_version === 2;
+
 async function getActiveTab() {
   const [tab] = await browser.tabs.query({
     active: true,
@@ -36,13 +38,21 @@ export async function initElementSelector(tab = null) {
   });
 
   if (!result) {
-    await browser.scripting.executeScript({
-      target: {
+    if (isMV2) {
+      await browser.tabs.executeScript(activeTab.id, {
         allFrames: true,
-        tabId: activeTab.id,
-      },
-      files: ['./elementSelector.bundle.js'],
-    });
+        runAt: 'document_start',
+        file: './elementSelector.bundle.js',
+      });
+    } else {
+      await browser.scripting.executeScript({
+        target: {
+          allFrames: true,
+          tabId: activeTab.id,
+        },
+        files: ['./elementSelector.bundle.js'],
+      });
+    }
   }
 
   await browser.tabs.update(activeTab.id, { active: true });

src/newtab/utils/startRecordWorkflow.js

@@ -1,5 +1,7 @@
 import browser from 'webextension-polyfill';
 
+const isMV2 = browser.runtime.getManifest().manifest_version === 2;
+
 export default async function (options = {}) {
   try {
     const flows = [];
@@ -30,8 +32,10 @@ export default async function (options = {}) {
         ...options,
       },
     });
-    await browser.action.setBadgeBackgroundColor({ color: '#ef4444' });
-    await browser.action.setBadgeText({ text: 'rec' });
+
+    const action = browser.action || browser.browserAction;
+    await action.setBadgeBackgroundColor({ color: '#ef4444' });
+    await action.setBadgeText({ text: 'rec' });
 
     const tabs = await browser.tabs.query({});
     for (const tab of tabs) {
@@ -39,13 +43,21 @@ export default async function (options = {}) {
         tab.url.startsWith('http') &&
         !tab.url.includes('chrome.google.com')
       ) {
-        await browser.scripting.executeScript({
-          target: {
-            tabId: tab.id,
+        if (isMV2) {
+          await browser.tabs.executeScript(tab.id, {
             allFrames: true,
-          },
-          files: ['recordWorkflow.bundle.js'],
-        });
+            runAt: 'document_start',
+            file: './recordWorkflow.bundle.js',
+          });
+        } else {
+          await browser.scripting.executeScript({
+            target: {
+              tabId: tab.id,
+              allFrames: true,
+            },
+            files: ['recordWorkflow.bundle.js'],
+          });
+        }
       }
     }
   } catch (error) {