feat(mv3): blocking by observing

.mocharc.json

@@ -0,0 +1,17 @@
+{
+  "diff": true,
+  "extensions": [".js", ".ts"],
+  "package": "./package.json",
+  "require": [
+    "ignore-styles",
+    "ts-node/register",
+    "tsconfig-paths/register"
+  ],
+  "exit": true,
+  "recursive": true,
+  "node-option": [
+    "es-module-specifier-resolution=node",
+    "experimental-specifier-resolution=node",
+    "loader=ts-node/esm"
+  ]
+}

add-on/manifest.chromium.json

@@ -1,5 +1,5 @@
 {
-  "minimum_chrome_version": "72",
+  "minimum_chrome_version": "101",
   "permissions": [
     "clipboardWrite",
     "contextMenus",
@@ -9,7 +9,9 @@
     "tabs",
     "unlimitedStorage",
     "webNavigation",
-    "webRequest"
+    "webRequest",
+    "declarativeNetRequest",
+    "declarativeNetRequestFeedback"
   ],
   "host_permissions": ["<all_urls>"],
   "incognito": "not_allowed"

add-on/manifest.common.json

@@ -6,14 +6,14 @@
   "description": "__MSG_manifest_extensionDescription__",
   "homepage_url": "https://github.com/ipfs-shipyard/ipfs-companion",
   "author": "IPFS Community",
+  "background": {
+    "service_worker": "dist/bundles/backgroundPage.bundle.js"
+  },
   "icons": {
     "19": "icons/png/ipfs-logo-on_19.png",
     "38": "icons/png/ipfs-logo-on_38.png",
     "128": "icons/png/ipfs-logo-on_128.png"
   },
-  "background": {
-    "service_worker": "dist/bundles/backgroundPage.bundle.js"
-  },
   "action": {
     "default_icon": {
       "19": "icons/png/ipfs-logo-off_19.png",

add-on/src/lib/ipfs-companion.js

@@ -1,6 +1,7 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+// @ts-ignore
 import debug from 'debug'
 
 import browser from 'webextension-polyfill'
@@ -23,6 +24,8 @@ import createRuntimeChecks from './runtime-checks.js'
 import { createContextMenus, findValueForContext, contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress, contextMenuViewOnGateway, contextMenuCopyPermalink, contextMenuCopyCidAddress } from './context-menus.js'
 import { registerSubdomainProxy } from './http-proxy.js'
 import { runPendingOnInstallTasks } from './on-installed.js'
+import { getExtraInfoSpec } from './redirect-handler/blockOrObserve.js'
+
 const log = debug('ipfs-companion:main')
 log.error = debug('ipfs-companion:main:error')
 
@@ -33,7 +36,7 @@ export default async function init (windowedContext = false) {
   // INIT
   // ===================================================================
   let ipfs // ipfs-api instance
-  /** @type {import('../types.js').CompanionState} */
+  /** @type {import('../types/companion.js').CompanionState} */
   let state // avoid redundant API reads by utilizing local cache of various states
   let dnslinkResolver
   let ipfsPathValidator
@@ -54,6 +57,7 @@ export default async function init (windowedContext = false) {
     await migrateOptions(browser.storage.local, debug)
     const options = await browser.storage.local.get(optionDefaults)
     runtime = await createRuntimeChecks(browser)
+    // @ts-ignore
     state = initState(options)
     notify = createNotifier(getState)
 
@@ -65,6 +69,7 @@ export default async function init (windowedContext = false) {
         console.error('[ipfs-companion] Failed to init IPFS client', err)
         notify(
           'notify_startIpfsNodeErrorTitle',
+          // @ts-ignore
           err.name === 'ValidationError' ? err.details[0].message : err.message
         )
       }
@@ -115,9 +120,11 @@ export default async function init (windowedContext = false) {
       // Note: we need this for code ensuring kubo-rpc-client can talk to API without setting CORS
       onBeforeSendInfoSpec.push('extraHeaders')
     }
-    browser.webRequest.onBeforeSendHeaders.addListener(onBeforeSendHeaders, { urls: ['<all_urls>'] }, onBeforeSendInfoSpec)
-    browser.webRequest.onBeforeRequest.addListener(onBeforeRequest, { urls: ['<all_urls>'] })
-    browser.webRequest.onHeadersReceived.addListener(onHeadersReceived, { urls: ['<all_urls>'] }, ['responseHeaders'])
+    browser.webRequest.onBeforeSendHeaders.addListener(
+      // @ts-ignore
+      onBeforeSendHeaders, { urls: ['<all_urls>'] }, getExtraInfoSpec(onBeforeSendInfoSpec))
+    browser.webRequest.onBeforeRequest.addListener(onBeforeRequest, { urls: ['<all_urls>'] }, getExtraInfoSpec())
+    browser.webRequest.onHeadersReceived.addListener(onHeadersReceived, { urls: ['<all_urls>'] }, getExtraInfoSpec(['responseHeaders']))
     browser.webRequest.onErrorOccurred.addListener(onErrorOccurred, { urls: ['<all_urls>'], types: ['main_frame'] })
     browser.webRequest.onCompleted.addListener(onCompleted, { urls: ['<all_urls>'], types: ['main_frame'] })
     browser.storage.onChanged.addListener(onStorageChange)
@@ -307,6 +314,7 @@ export default async function init (windowedContext = false) {
         }
         // console.log('onAddFromContext.context', context)
         // console.log('onAddFromContext.fetchOptions', fetchOptions)
+        // @ts-ignore
         const response = await fetch(dataSrc, fetchOptions)
         const blob = await response.blob()
         const url = new URL(response.url)
@@ -315,6 +323,7 @@ export default async function init (windowedContext = false) {
           ? url.hostname
           : url.pathname.replace(/[\\/]+$/, '').split('/').pop()
         data = {
+          // @ts-ignore
           path: decodeURIComponent(filename),
           content: blob
         }
@@ -332,13 +341,15 @@ export default async function init (windowedContext = false) {
       }
     } catch (error) {
       console.error('Error in import to IPFS context menu', error)
+      // @ts-ignore
       if (error.message === 'NetworkError when attempting to fetch resource.') {
         notify('notify_importErrorTitle', 'notify_importTrackingProtectionErrorMsg')
         console.warn('IPFS import often fails because remote file can not be downloaded due to Tracking Protection. See details at: https://github.com/ipfs/ipfs-companion/issues/227')
         browser.tabs.create({
           url: 'https://github.com/ipfs/ipfs-companion/issues/227'
         })
       } else {
+        // @ts-ignore
         notify('notify_importErrorTitle', 'notify_inlineErrorMsg', `${error.message}`)
       }
     }
@@ -524,6 +535,7 @@ export default async function init (windowedContext = false) {
       // Chromium does not support SVG [ticket below is 8 years old, I can't even..]
       // https://bugs.chromium.org/p/chromium/issues/detail?id=29683
       // Still, we want icon, so we precompute rasters of popular sizes and use them instead
+      // @ts-ignore
       iconDefinition = await rasterIconDefinition(iconPath)
       await browser.action.setIcon(iconDefinition)
     }
@@ -537,13 +549,15 @@ export default async function init (windowedContext = false) {
     if (state.automaticMode && state.localGwAvailable) {
       if (oldPeerCount === offlinePeerCount && newPeerCount > offlinePeerCount && !state.redirect) {
         await browser.storage.local.set({ useCustomGateway: true })
+        // @ts-ignore
         reloadIpfsClientOfflinePages(browser, ipfs, state)
       } else if (newPeerCount === offlinePeerCount && state.redirect) {
         await browser.storage.local.set({ useCustomGateway: false })
       }
     }
   }
 
+  // @ts-ignore
   async function onStorageChange (changes, area) {
     let shouldReloadExtension = false
     let shouldRestartIpfsClient = false
@@ -634,6 +648,7 @@ export default async function init (windowedContext = false) {
         await destroyIpfsClient(browser)
       } catch (err) {
         console.error('[ipfs-companion] Failed to destroy IPFS client', err)
+        // @ts-ignore
         notify('notify_stopIpfsNodeErrorTitle', err.message)
       } finally {
         ipfs = null
@@ -648,6 +663,7 @@ export default async function init (windowedContext = false) {
         console.error('[ipfs-companion] Failed to init IPFS client', err)
         notify(
           'notify_startIpfsNodeErrorTitle',
+          // @ts-ignore
           err.name === 'ValidationError' ? err.details[0].message : err.message
         )
       }
@@ -715,9 +731,11 @@ export default async function init (windowedContext = false) {
   return api
 }
 
+// @ts-ignore
 const rasterIconDefinition = pMemoize((svgPath) => {
   const pngPath = (size) => {
     // point at precomputed PNG file
+    // @ts-ignore
     const baseName = /\/icons\/(.+)\.svg/.exec(svgPath)[1]
     return `/icons/png/${baseName}_${size}.png`
   }

add-on/src/lib/ipfs-request.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 'use strict'
 /* eslint-env browser, webextensions */
 
@@ -10,6 +11,7 @@ import { dropSlash, ipfsUri, pathAtHttpGateway, sameGateway } from './ipfs-path.
 import { safeURL } from './options.js'
 import { braveNodeType } from './ipfs-client/brave.js'
 import { recoveryPagePath } from './constants.js'
+import { addRuleToDynamicRuleSet, supportsBlock } from './redirect-handler/blockOrObserve.js'
 
 const log = debug('ipfs-companion:request')
 log.error = debug('ipfs-companion:request:error')
@@ -146,20 +148,34 @@ export function createRequestModifier (getState, dnslinkResolver, ipfsPathValida
       // to public gateway.
       if (!state.nodeActive && request.type === 'main_frame' && sameGateway(request.url, state.gwURL)) {
         const publicUri = await ipfsPathValidator.resolveToPublicUrl(request.url, state.pubGwURLString)
-        return { redirectUrl: `${dropSlash(runtimeRoot)}${recoveryPagePath}#${encodeURIComponent(publicUri)}` }
+        return handleRedirection({
+          originUrl: request.url,
+          redirectUrl: `${dropSlash(runtimeRoot)}${recoveryPagePath}#${encodeURIComponent(publicUri)}`
+        })
       }
 
       // When Subdomain Proxy is enabled we normalize address bar requests made
       // to the local gateway and replace raw IP with 'localhost' hostname to
       // take advantage of subdomain redirect provided by go-ipfs >= 0.5
       if (state.redirect && request.type === 'main_frame' && sameGateway(request.url, state.gwURL)) {
         const redirectUrl = safeURL(request.url, { useLocalhostName: state.useSubdomains }).toString()
-        if (redirectUrl !== request.url) return { redirectUrl }
+        if (redirectUrl !== request.url) {
+          return handleRedirection({
+            originUrl: request.url,
+            redirectUrl
+          })
+        }
       }
+
       // For now normalize API to the IP to comply with go-ipfs checks
       if (state.redirect && request.type === 'main_frame' && sameGateway(request.url, state.apiURL)) {
         const redirectUrl = safeURL(request.url, { useLocalhostName: false }).toString()
-        if (redirectUrl !== request.url) return { redirectUrl }
+        if (redirectUrl !== request.url) {
+          return handleRedirection({
+            originUrl: request.url,
+            redirectUrl
+          })
+        }
       }
 
       // early sanity checks
@@ -459,6 +475,15 @@ export function createRequestModifier (getState, dnslinkResolver, ipfsPathValida
   }
 }
 
+function handleRedirection ({ originUrl, redirectUrl }) {
+  if (supportsBlock) {
+    return { redirectUrl }
+  }
+
+  // Let browser handle redirection MV3 style.
+  addRuleToDynamicRuleSet({ originUrl, redirectUrl })
+}
+
 // Returns a string with URL at the active gateway (local or public)
 async function redirectToGateway (request, url, state, ipfsPathValidator, runtime) {
   const { resolveToPublicUrl, resolveToLocalUrl } = ipfsPathValidator
@@ -507,7 +532,12 @@ async function redirectToGateway (request, url, state, ipfsPathValidator, runtim
   }
 
   // return a redirect only if URL changed
-  if (redirectUrl && request.url !== redirectUrl) return { redirectUrl }
+  if (redirectUrl && request.url !== redirectUrl) {
+    return handleRedirection({
+      originUrl: request.url,
+      redirectUrl
+    })
+  }
 }
 
 function isSafeToRedirect (request, runtime) {
@@ -574,7 +604,10 @@ function normalizedRedirectingProtocolRequest (request, pubGwUrl) {
   // additional fixups of the final path
   path = fixupDnslinkPath(path) // /ipfs/example.com → /ipns/example.com
   if (oldPath !== path && isIPFS.path(path)) {
-    return { redirectUrl: pathAtHttpGateway(path, pubGwUrl) }
+    return handleRedirection({
+      originUrl: request.url,
+      redirectUrl: pathAtHttpGateway(path, pubGwUrl)
+    })
   }
   return null
 }
@@ -616,7 +649,10 @@ function normalizedUnhandledIpfsProtocol (request, pubGwUrl) {
   if (isIPFS.path(path)) {
     // replace search query with a request to a public gateway
     // (will be redirected later, if needed)
-    return { redirectUrl: pathAtHttpGateway(path, pubGwUrl) }
+    return handleRedirection({
+      originUrl: request.url,
+      redirectUrl: pathAtHttpGateway(path, pubGwUrl)
+    })
   }
 }
 

add-on/src/lib/options.js

@@ -4,7 +4,7 @@ import isFQDN from 'is-fqdn'
 import { isIPv4, isIPv6 } from 'is-ip'
 
 /**
- * @type {Readonly<import('../types.js').CompanionOptions>}
+ * @type {Readonly<import('../types/companion.js').CompanionOptions>}
  */
 export const optionDefaults = Object.freeze({
   active: true, // global ON/OFF switch, overrides everything else