use latest browser.* manifest V3 APIs (fix firefox)

Author: sqs

client/browser/scripts/tasks.ts

@@ -186,6 +186,11 @@ function writeManifest(environment: BuildEnvironment, browser: Browser, writeDir
         delete manifest.storage
     }
 
+    if (browser === 'firefox') {
+        // activeTab is not sufficient to call browser.scripting.executeScript (as it is in Chrome).
+        manifest.permissions.push('scripting')
+    }
+
     if (browser === 'safari') {
         // If any modifications need to be done to the manifest for Safari, they
         // can be done here.
@@ -194,9 +199,12 @@ function writeManifest(environment: BuildEnvironment, browser: Browser, writeDir
         }
     }
 
-    // Add the inline extensions to web accessible resources
-    manifest.web_accessible_resources = manifest.web_accessible_resources || []
-    manifest.web_accessible_resources.push('extensions/*')
+    // Firefox doesn't support service workers, so we need a workaround. See
+    // https://github.com/mozilla/web-ext/issues/2532.
+    if (browser === 'firefox') {
+        manifest.background!.scripts = [manifest.background!.service_worker]
+        delete manifest.background!.service_worker
+    }
 
     delete manifest.$schema
 

client/browser/src/browser-extension/browser-action-icon.ts

@@ -60,7 +60,7 @@ const browserActionIconPaths: Record<BrowserActionIconState, BrowserActionIconPa
 export function setBrowserActionIconState(iconState: BrowserActionIconState): void {
     const iconPaths = browserActionIconPaths[iconState]
     console.log('Setting icons to', iconPaths)
-    browser.browserAction.setIcon({ path: iconPaths }).catch(error => {
+    browser.action.setIcon({ path: iconPaths }).catch(error => {
         console.error(error)
     })
 }

client/browser/src/browser-extension/scripts/backgroundPage.main.ts

@@ -203,9 +203,9 @@ async function main(): Promise<void> {
                          * Loading content script dynamically
                          * See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#loading_content_scripts
                          */
-                        await browser.tabs.executeScript(tabId, {
-                            file: 'js/contentPage.main.bundle.js',
-                            runAt: 'document_end',
+                        await browser.scripting.executeScript({
+                            files: ['js/contentPage.main.bundle.js'],
+                            target: { tabId },
                         })
                     }
                 })
@@ -281,7 +281,7 @@ async function main(): Promise<void> {
 
     // The `popup=true` param is used by the options page to determine if it's
     // loaded in the popup or in th standalone options page.
-    browser.browserAction.setPopup({ popup: 'options.html?popup=true' })
+    browser.action.setPopup({ popup: 'options.html?popup=true' })
 
     const ENDPOINT_KIND_REGEX = /^(proxy|expose)-/
 

client/browser/src/browser-extension/scripts/contentPage.main.ts

@@ -1,12 +1,12 @@
 // Set globals first before any imports.
-import '../../config/extension.entry'
 import '../../config/content.entry'
+import '../../config/extension.entry'
 // Polyfill before other imports.
 import '../../shared/polyfills'
 
 import { firstValueFrom, fromEvent, Subscription } from 'rxjs'
 
-import { setLinkComponent, AnchorLink } from '@sourcegraph/wildcard'
+import { AnchorLink, setLinkComponent } from '@sourcegraph/wildcard'
 
 import { determineCodeHost } from '../../shared/code-hosts/shared/codeHost'
 import { injectCodeIntelligence } from '../../shared/code-hosts/shared/inject'
@@ -46,7 +46,7 @@ function loadStyleSheet(options: { id: string; path: string }): HTMLLinkElement
         styleSheet.id = id
         styleSheet.rel = 'stylesheet'
         styleSheet.type = 'text/css'
-        styleSheet.href = browser.extension.getURL(path)
+        styleSheet.href = browser.runtime.getURL(path)
     }
     return styleSheet
 }

client/browser/src/types/webextension-polyfill/index.d.ts

@@ -133,7 +133,7 @@ declare namespace browser.bookmarks {
     >
 }
 
-declare namespace browser.browserAction {
+declare namespace browser.action {
     type ColorArray = [number, number, number, number]
     type ImageDataType = ImageData
 
@@ -1361,6 +1361,10 @@ declare namespace browser.storage {
     const onChanged: CallbackEventEmitter<(changes: ChangeDict<any>, areaName: AreaName) => void>
 }
 
+declare namespace browser.scripting {
+    function executeScript(details: { files: string[], target: any }): Promise<object[]>
+}
+
 declare namespace browser.tabs {
     type MutedInfoReason = 'capture' | 'extension' | 'user'
     interface MutedInfo {
@@ -1425,10 +1429,6 @@ declare namespace browser.tabs {
     function captureVisibleTab(windowId?: number, options?: extensionTypes.ImageDetails): Promise<string>
     function detectLanguage(tabId?: number): Promise<string>
     function duplicate(tabId: number): Promise<Tab>
-    function executeScript(
-        tabId: number | undefined,
-        details: extensionTypes.InjectDetails
-    ): Promise<object[]>
     function get(tabId: number): Promise<Tab>
     // deprecated: function getAllInWindow(): x;
     function getCurrent(): Promise<Tab>