extension: switch to scripting api, should work with chrome mv3 now!

for firefox mv3 still need some work for permissions

extension/src/background.ts

@@ -4,6 +4,7 @@ import type {Action, BrowserAction, Menus, PageAction, Runtime, Tabs, WebNavigat
 
 import type {Url, SearchPageParams} from './common'
 import {Visit, Visits, Blacklisted, Methods, assert, uuid} from './common'
+import {executeScript} from './compat'
 import type {Options} from './options'
 import {Toggles, getOptions, setOption, THIS_BROWSER_TAG} from './options'
 
@@ -140,10 +141,11 @@ async function updateState(tab: TabUrl): Promise<void> {
     // todo only inject after blacklist check? just in case?
     let proceed: boolean
     try {
-        await browser.tabs.insertCSS    (tabId, {file: 'sidebar-outer.css'})
-        await browser.tabs.insertCSS    (tabId, {file: 'sidebar.css'      })
-        await browser.tabs.insertCSS    (tabId, {code: opts.position_css  })
-        await browser.tabs.executeScript(tabId, {file: 'sidebar.js'})
+        const target = {tabId: tabId}
+        await browser.scripting.insertCSS    ({target: target, files: ['sidebar-outer.css']})
+        await browser.scripting.insertCSS    ({target: target, files: ['sidebar.css'      ]})
+        await browser.scripting.insertCSS    ({target: target, css: opts.position_css      })
+        await browser.scripting.executeScript({target: target, files: ['sidebar.js'       ]})
         proceed = true // successful code injection
     } catch (error) {
         const msg = (error as Error).message
@@ -313,33 +315,38 @@ async function filter_urls(urls: Array<Url | null>) {
 }
 
 
+
 async function doToggleMarkVisited(tabId: number, {show}: {show: boolean | null} = {show: null}) {
     // first check if we need to disable TODO
-    const _should_show = await browser.tabs.executeScript(tabId, {
-        code: `
-{
-    let res // ?boolean
-    let show = ${show == null ? 'null' : String(show)}
-    const shown = window.promnesiaShowsVisits || false
-    if (show == null) {
-        // we want the opposite
-        show = !shown
-    }
-    if (show === shown) {
-        res = null // no change
-    } else if (show) {
-        res = true // should show
-        window.promnesiaShowsVisits = true // ugh. set early to avoid race conditions...
-    } else {//
-        res = false // should hide
-        setTimeout(() => hideMarks()) // async to return straightaway
-        window.promnesiaShowsVisits = false
-    }
-    res
-}
-`})
-    const should_show: boolean | null = _should_show![0]
-    if (should_show == null) {
+    const target = {tabId: tabId}
+    const should_show = await executeScript<boolean | null>({
+        target: target,
+        func: (show: boolean) => {
+            let res: boolean | null
+            // @ts-expect-error
+            const shown = window.promnesiaShowsVisits || false
+            if (show == null) {
+                // we want the opposite
+                show = !shown
+            }
+            if (show === shown) {
+                res = null // no change
+            } else if (show) {
+                res = true // should show
+                // @ts-expect-error
+                window.promnesiaShowsVisits = true // ugh. set early to avoid race conditions...
+            } else {
+                res = false // should hide
+                // @ts-expect-error hideMarks is declared in showvisited.js
+                setTimeout(() => hideMarks()) // async to return straightaway
+                // @ts-expect-error
+                window.promnesiaShowsVisits = false
+            }
+            return res
+        },
+        args: [show],
+    })
+    if (should_show === null) {
         console.debug('requested state %s: no change needed', show)
         return
     } else if (should_show === false) {
@@ -348,22 +355,23 @@ async function doToggleMarkVisited(tabId: number, {show}: {show: boolean | null}
     }
 
     // collect URLS from the page
-    const mresults = await browser.tabs.executeScript(tabId, {
-        code: `
-     // NOTE: important to make a snapshot here.. otherwise might go in an infinite loop
-     link_elements = Array.from(document.getElementsByTagName("a"))
-     link_elements.map(el => {
-        try {
-            // handle relative urls
-            return new URL(el.href, document.baseURI).href
-        } catch {
-            return null
+    const results = await executeScript<Array<Url | null>>({
+        target: target,
+        func: () => {
+            // NOTE: important to make a snapshot here.. otherwise might go in an infinite loop
+            const links = Array.from(document.getElementsByTagName("a"))
+            // @ts-expect-error
+            window.link_elements = links
+            return links.map(el => {
+                try {
+                    // handle relative urls
+                    return new URL(el.href, document.baseURI).href
+                } catch {
+                    return null
+                }
+            })
         }
-     })
- `
-})
-    // not sure why it's returning array..
-    const results: Array<Url | null> = mresults![0]
+    })
     const page_urls = Array.from(await filter_urls(results))
     const resp = await allsources.visited(page_urls)
     if (resp instanceof Error) {
@@ -410,21 +418,24 @@ async function doToggleMarkVisited(tabId: number, {show}: {show: boolean | null}
             visited.delete(url)
         }
     }
-    // todo ugh. errors inside the script (e.g. syntax errors) get swallowed..
-    // TODO not sure.. probably need to inject the script once and then use a message listener or something like in sidebar??
-    await browser.tabs.insertCSS(tabId, {
-        file: 'showvisited.css',
-    })
-    await browser.tabs.executeScript(tabId, {
-        file: 'showvisited.js',
-    })
-    await browser.tabs.executeScript(tabId, {
-        code: `
-visited = new Map(JSON.parse(${JSON.stringify(JSON.stringify([...visited]))}))
-setTimeout(() => showMarks())
-// best to set it in case of partial processing
-window.promnesiaShowsVisits = true
-`
+    await browser.scripting.insertCSS    ({target: target, files: ['showvisited.css']})
+    await executeScript({target: target, files: ['showvisited.js' ]})
+    await executeScript({
+        target: target,
+        func: (visited_entries: Array<[Url, any]>) => {
+            // FIXME ok, the only thing I'm not sure about is how it preserves Visit objects?
+            // but I suspect this is consistent with previous version of code anyway
+            const visited = new Map(visited_entries)
+            // @ts-expect-error
+            window.visited = visited
+            // @ts-expect-error
+            setTimeout(() => showMarks())
+            // best to set it in case of partial processing
+            // @ts-expect-error
+            window.promnesiaShowsVisits = true
+        },
+        // ugh. need to make sure it's json serializable
+        args: [Array.from(visited, ([key, value]) => [key, value.toJObject()])],
     })
 }
 
@@ -701,24 +712,28 @@ async function active(): Promise<TabUrl> {
 async function globalExcludelistPrompt(): Promise<Array<Url>> {
     // NOTE: needs to take active tab becaue tab isn't present in the 'info' object if it was clicked from the launcher etc.
     const {id: tabId, url: url} = await active()
-    const prompt = `Global excludelist. Supported formats:
+    const prompt_msg = `Global excludelist. Supported formats:
 - domain.name, e.g.: web.telegram.org
       Will exclude whole Telegram website.
 - http://exact/match, e.g.: http://github.com
       Will only exclude Github main page. Subpages will still work.
 - /regul.r.*expression/, e.g.: /github.*/yourusername/
       Quick way to exclude your own Github repostitories.
-`;
+`
 
     // ugh. won't work for multiple urls, prompt can only be single line...
-    const res = await browser.tabs.executeScript(tabId, {
-        code: `prompt(\`${prompt}\`, "${url}");`
+    const res = await executeScript<Url | null>({
+        target: {tabId: tabId},
+        func: (prompt_msg: string, url: string) => {
+            return prompt(prompt_msg, url)
+        },
+        args: [prompt_msg, url],
     })
-    if (res == null || res[0] == null) {
+    if (res == null) {
         console.info('user chose not to add %s', url)
         return []
     }
-    return [res[0]]
+    return [res]
 }
 
 async function handleAddToGlobalExcludelist() {
@@ -748,56 +763,61 @@ const AddToMarkVisitedExcludelist = {
         // TODO only call prompts if more than one? sort before showing?
         const {id: tabId, url: _url} = await active()
 
-        await browser.tabs.executeScript(tabId, {
-            code: `{
-let listener = e => {
-    e.stopPropagation()
-
-    const tgt = e.target
-    const old = tgt.style.outline
-
-    tgt.addEventListener('mouseout', e => {
-        tgt.style.outline = old
-    })
-    // display zapper frame
-    tgt.style.outline = '4px solid #07C'
-    // todo use css class?
-}
-document.addEventListener('mouseover', listener)
-
-document.addEventListener('click', e => {
-    // console.error("CLiCK!!! %o", e)
-    document.removeEventListener('mouseover', listener)
-
-    // FIXME ugh. it also captures file:// links and javascript:
-    // should't traverse inside promnesia clases...
-    let links = Array.from(e.target.getElementsByTagName('a')).map(el => {
-        const href = el.href
-        if (href == null) {
-            return null
-        }
-        try {
-            // handle relative urls
-            return new URL(href, document.baseURI).href
-        } catch (e) {
-            console.error(e)
-            return null
-        }
-    }).filter(e => e != null)
-    links = [...new Set(links)].sort() // make unique
-    //
-    chrome.runtime.sendMessage({method: '${Methods.ZAPPER_EXCLUDELIST}', data: links})
-})
-let cancel = e => {
-    // console.error("ESCAPE!!!, %o", e)
-    if (e.key == 'Escape') {
-        document.removeEventListener('mouseover', listener)
-        window.removeEventListener('keydown', cancel)
-    }
-}
-window.addEventListener('keydown', cancel)
-
-}`})
+        // TODO ugh at this point could just move to external file?
+        await executeScript({
+            target: {tabId: tabId},
+            func: (method_zapper_excludelist: string) => {
+                const listener = (e: MouseEvent) => {
+                    e.stopPropagation()
+
+                    const tgt = e.target!
+                    // @ts-expect-error
+                    const tgt_style = tgt.style
+                    const old = tgt_style.outline
+
+                    tgt.addEventListener('mouseout', e => {
+                        tgt_style.outline = old
+                    })
+                    // display zapper frame
+                    tgt_style.outline = '4px solid #07C'
+                    // todo use css class?
+                }
+                document.addEventListener('mouseover', listener)
+
+                document.addEventListener('click', (e: MouseEvent) => {
+                    document.removeEventListener('mouseover', listener)
+
+                    // FIXME ugh. it also captures file:// links and javascript:
+                    // should't traverse inside promnesia clases...
+                    // @ts-expect-error
+                    let links = Array.from(e.target.getElementsByTagName('a')).map((el: HTMLAnchorElement) => {
+                        const href = el.href
+                        if (href == null) {
+                            return null
+                        }
+                        try {
+                            // handle relative urls
+                            return new URL(href, document.baseURI).href
+                        } catch (e) {
+                            console.error(e)
+                            return null
+                        }
+                    }).filter(e => e != null)
+                    links = Array.from(new Set(links)).sort() // make unique
+                    // @ts-expect-error
+                    chrome.runtime.sendMessage({method: method_zapper_excludelist, data: links})
+                })
+                let cancel = (e: KeyboardEvent) => {
+                    // console.error("ESCAPE!!!, %o", e)
+                    if (e.key == 'Escape') {
+                        document.removeEventListener('mouseover', listener)
+                        window.removeEventListener('keydown', cancel)
+                    }
+                }
+                window.addEventListener('keydown', cancel)
+            },
+            args: [Methods.ZAPPER_EXCLUDELIST],
+        })
     },
     handleZapperResult: async function(msg: any) {
         const urls: Array<Url> = msg.data

extension/src/common.ts

@@ -67,9 +67,9 @@ export class Visit {
         const o = {}
         Object.assign(o, this)
         // @ts-expect-error
-        o.time     = o.time    .getTime()
+        o.time     = o.time    .toJSON()
         // @ts-expect-error
-        o.dt_local = o.dt_local.getTime()
+        o.dt_local = o.dt_local.toJSON()
         return o
     }
 
@@ -247,17 +247,17 @@ export type Json = JsonArray | JsonObject
 
 export function getBrowser(): string {
     // https://stackoverflow.com/questions/12489546/getting-a-browsers-name-client-side
-    const agent = window.navigator.userAgent.toLowerCase()
+    const agent = navigator.userAgent.toLowerCase()
     switch (true) {
         // @ts-expect-error
-        case agent.indexOf("chrome") > -1 && !! window.chrome: return "chrome";
-        case agent.indexOf("firefox") > -1                   : return "firefox";
-        case agent.indexOf("safari") > -1                    : return "safari";
-        case agent.indexOf("edge") > -1                      : return "edge";
+        case agent.indexOf("chrome") > -1 && !! chrome: return "chrome"
+        case agent.indexOf("firefox") > -1            : return "firefox"
+        case agent.indexOf("safari") > -1             : return "safari"
+        case agent.indexOf("edge") > -1               : return "edge"
         // @ts-expect-error
-        case agent.indexOf("opr") > -1 && !!window.opr       : return "opera";
-        case agent.indexOf("trident") > -1                   : return "ie";
-        default: return "browser";
+        case agent.indexOf("opr") > -1 && !!opr       : return "opera"
+        case agent.indexOf("trident") > -1            : return "ie"
+        default: return "browser"
     }
 }
 
@@ -317,8 +317,11 @@ export async function fetch_max_stale(url: string, {max_stale}: {max_stale: numb
 
 
 // useful for debugging
+// borrowed from https://stackoverflow.com/a/2117523/706389
 export function uuid(): string {
-    return URL.createObjectURL(new Blob([])).substr(-36)
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+        (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
+    )
 }
 
 

extension/src/compat.ts

@@ -0,0 +1,24 @@
+import browser from "webextension-polyfill"
+import type {Scripting} from "webextension-polyfill"
+
+import {assert} from './common'
+
+
+export async function executeScript<R>(injection: Scripting.ScriptInjection): Promise<R> {
+    /**
+     * In firefox, executeScript sets error property, whereas in chrome it just throws
+     * (see https://issues.chromium.org/issues/40205757)
+     * For consistency, this wrapper throws in all cases instead
+     */
+    const results = await browser.scripting.executeScript(injection)
+    assert(results.length == 1)
+    const [{result, error}] = results
+    if (error != null) {
+        if (error instanceof Error) {
+            throw error
+        } else {
+            throw new Error(`Error during executeScript: ${error}`)
+        }
+    }
+    return result
+}