Fix duplicate injected script error in MV3 (#2298)

shared/js/background/background.js

@@ -18,6 +18,7 @@
 import { onStartup } from './startup'
 import FireButton from './components/fire-button'
 import TabTracker from './components/tab-tracking'
+import MV3ContentScriptInjection from './components/mv3-content-script-injection'
 import initDebugBuild from './devbuild'
 import initReloader from './devbuild-reloader'
 import tabManager from './tab-manager'
@@ -27,7 +28,6 @@ require('./events')
 const settings = require('./settings')
 if (BUILD_TARGET === 'chrome-mv3') {
     require('./dnr-config-rulesets')
-    require('./script-injection')
 }
 
 settings.ready().then(() => {
@@ -43,9 +43,14 @@ const components = {
     tabTracking: new TabTracker({ tabManager })
 }
 
+// Chrome-only components
 if (BUILD_TARGET === 'chrome' || BUILD_TARGET === 'chrome-mv3') {
     components.fireButton = new FireButton({ settings, tabManager })
 }
+// MV3-only components
+if (BUILD_TARGET === 'chrome-mv3') {
+    components.scriptInjection = new MV3ContentScriptInjection()
+}
 console.log('Loaded components:', components)
 // @ts-ignore
 self.components = components

shared/js/background/components/mv3-content-script-injection.js

@@ -0,0 +1,48 @@
+// With Manifest V2 the content scripts are run directly from the manifest and
+// they inject into the main world of websites by adding a <script> element to
+// the DOM. With Manifest V3 however the chrome.scripting API must be used to
+// inject scripts into the main world.
+// Note: It's important that the isolated world script runs first. The order the
+//       scripts are added by registerContentScripts is based on the script ID,
+//       but note that's an implementation detail (from use of std::set for new
+//       script IDs[1]) and could change in the future.
+// 1 - https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/extensions/api/scripting/scripting_api.cc;l=929
+
+export default class MV3ContentScriptInjection {
+    constructor () {
+        this.ready = this.registerScripts()
+    }
+
+    async registerScripts () {
+        // check if scripts were already registered - in scripts will remain registered under
+        // some startup conditions, and in that case registering the scripts will throw an error.
+        const scripts = await chrome.scripting.getRegisteredContentScripts()
+        const ids = scripts.map(s => s.id)
+        if (ids.length > 0) {
+            await chrome.scripting.unregisterContentScripts({ ids })
+        }
+        await chrome.scripting.registerContentScripts([{
+            id: '1-script-injection-isolated-world',
+            allFrames: true,
+            js: ['public/js/content-scripts/content-scope-messaging.js'],
+            runAt: 'document_start',
+            world: 'ISOLATED',
+            matches: ['<all_urls>'],
+            excludeMatches: [
+                '*://localhost/*',
+                '*://*.localhost/'
+            ]
+        }, {
+            id: '2-script-injection-main-world',
+            allFrames: true,
+            js: ['public/js/inject.js'],
+            runAt: 'document_start',
+            world: 'MAIN',
+            matches: ['<all_urls>'],
+            excludeMatches: [
+                '*://localhost/*',
+                '*://*.localhost/'
+            ]
+        }])
+    }
+}