chore: use scripting API in Firefox

Author: dessant

src/assets/manifest/firefox.json

@@ -21,7 +21,8 @@
     "webRequestBlocking",
     "webNavigation",
     "nativeMessaging",
-    "<all_urls>"
+    "<all_urls>",
+    "scripting"
   ],
 
   "content_security_policy": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data:; connect-src *; object-src 'none'; frame-ancestors http://127.0.0.1:*;",

src/base/main.js

@@ -5,7 +5,7 @@ import {
   findNode,
   getRandomFloat,
   sleep,
-  getBrowser
+  getBrowserVersion
 } from 'utils/common';
 import {targetEnv, clientAppVersion} from 'utils/config';
 
@@ -181,10 +181,7 @@ function main() {
     const scale = window.devicePixelRatio;
 
     let evScreenPropScale = osScale;
-    if (
-      targetEnv === 'firefox' &&
-      parseInt((await getBrowser()).version.split('.')[0], 10) >= 99
-    ) {
+    if (targetEnv === 'firefox' && (await getBrowserVersion()) >= 99) {
       // https://bugzilla.mozilla.org/show_bug.cgi?id=1753836
 
       evScreenPropScale = scale;

src/setup/App.vue

@@ -66,7 +66,7 @@
 import {App, Button, TextField} from 'vueton';
 
 import {pingClientApp} from 'utils/app';
-import {getText} from 'utils/common';
+import {getText, getBrowser} from 'utils/common';
 
 export default {
   components: {
@@ -189,7 +189,7 @@ export default {
   },
 
   created: async function () {
-    this.browser = (await browser.runtime.sendMessage({id: 'getBrowser'})).name;
+    this.browser = (await getBrowser()).name;
 
     await this.setLocation();
 

src/utils/common.js

@@ -17,9 +17,13 @@ function insertCSS({
   origin = 'USER'
 }) {
   if (mv3) {
-    const params = {target: {tabId, allFrames}};
+    const params = {target: {tabId}};
 
-    if (!allFrames) {
+    // Safari 17: allFrames and frameIds cannot both be specified,
+    // fixed in Safari 18.
+    if (allFrames) {
+      params.target.allFrames = true;
+    } else {
       params.target.frameIds = frameIds;
     }
 
@@ -60,10 +64,14 @@ async function executeScript({
 
   code = ''
 }) {
-  if (mv3) {
-    const params = {target: {tabId, allFrames}, world};
+  if (mv3 || (targetEnv === 'firefox' && (await getBrowserVersion()) >= 128)) {
+    const params = {target: {tabId}, world};
 
-    if (!allFrames) {
+    // Safari 17: allFrames and frameIds cannot both be specified,
+    // fixed in Safari 18.
+    if (allFrames) {
+      params.target.allFrames = true;
+    } else {
       params.target.frameIds = frameIds;
     }
 
@@ -287,6 +295,29 @@ async function getPlatform() {
   };
 }
 
+async function getBrowser() {
+  if (!isBackgroundPageContext()) {
+    return browser.runtime.sendMessage({id: 'getBrowser'});
+  }
+
+  let name, version;
+  try {
+    ({name, version} = await browser.runtime.getBrowserInfo());
+  } catch (err) {}
+
+  if (!name) {
+    ({name, version} = Bowser.getParser(self.navigator.userAgent).getBrowser());
+  }
+
+  return {name: name.toLowerCase(), version: version.toLowerCase()};
+}
+
+async function getBrowserVersion() {
+  const {version} = await getBrowser();
+
+  return parseInt(version.split('.')[0], 10);
+}
+
 async function isAndroid() {
   return (await getPlatform()).isAndroid;
 }
@@ -425,21 +456,6 @@ function findNode(
   });
 }
 
-async function getBrowser() {
-  let name, version;
-  try {
-    ({name, version} = await browser.runtime.getBrowserInfo());
-  } catch (err) {}
-
-  if (!name) {
-    ({name, version} = Bowser.getParser(self.navigator.userAgent).getBrowser());
-  }
-
-  name = name.toLowerCase();
-
-  return {name, version};
-}
-
 async function normalizeAudio(buffer) {
   const ctx = new AudioContext();
   const audioBuffer = await ctx.decodeAudioData(buffer);
@@ -577,6 +593,8 @@ export {
   isValidTab,
   getPlatformInfo,
   getPlatform,
+  getBrowser,
+  getBrowserVersion,
   isAndroid,
   getDarkColorSchemeQuery,
   getDayPrecisionEpoch,
@@ -589,7 +607,6 @@ export {
   querySelectorXpath,
   nodeQuerySelector,
   findNode,
-  getBrowser,
   normalizeAudio,
   sliceAudio,
   prepareAudio,

webpack.config.js

@@ -25,7 +25,7 @@ export default async function (env, argv) {
 
   const provideExtApi = !['firefox', 'safari'].includes(targetEnv);
 
-  const provideModules = {Buffer: ['buffer', 'Buffer']};
+  const provideModules = {};
   if (provideExtApi) {
     provideModules.browser = 'webextension-polyfill';
   }