Just a quick question, does the wxt community have any good suggestions for making cross-domain requests in the content script and forwarding them to the background?

[rxliuli]

I am developing a browser extension that will call fetch requests to some server APIs in the content script. This works fine in Chrome, but Firefox prohibits cross-fetch calls in the content script, following the website's own CSP settings. It must be forwarded from the main world content script to the isolation world content script and then to the background. I want to know if there is a simpler way to do this.

Context
https://bugzilla.mozilla.org/show_bug.cgi?id=1267027
https://bugzilla.mozilla.org/show_bug.cgi?id=1294996

[aklinker1]

Right now, no. Usually, I'd use @webext-core/proxy-service for this, but that's only for isolated world → background communication. It's not designed for the extra step of main world → isolated world like you need.

We have plans to add a first-party messaging library that will support this use-case, but it's on hold until v1.0 is out: #643

[rxliuli]

Just sharing the current solution, maybe someone will be interested in non-invasive methods.

The basic idea is to use the declarativeNetRequest API to remove the website's CSP settings to solve the problem. Since this issue only occurs on Firefox, it is necessary to use conditional branches in wxt.config.ts to build the bundle, adding the additional permission declarativeNetRequest when building the Firefox bundle.

import { defineConfig, UserManifest } from 'wxt'
import path from 'path'

export default defineConfig({
  srcDir: 'src',
  extensionApi: 'chrome',
  modules: ['@wxt-dev/module-svelte'],
  manifestVersion: 3,
  manifest: (env) => {
    const manifest: UserManifest = {
      // other config...
      host_permissions: ['https://x.com/**'],
    }
    if (env.browser === 'firefox') {
      manifest.permissions!.push('declarativeNetRequest')
      manifest.declarative_net_request = {
        rule_resources: [
          {
            id: 'ruleset',
            enabled: true,
            path: 'rules.json',
          },
        ],
      }
    }
    return manifest
  },
})

Then add rules.json to your public/ directory.

[
  {
    "id": 1,
    "condition": {
      "urlFilter": "https://x.com/**",
      "excludedResourceTypes": []
    },
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {
          "header": "content-security-policy",
          "operation": "remove"
        }
      ]
    }
  }
]

I know this is not a good method, but the other method of using webRequestBlocking permission to modify CSP to add the required domain names requires too high permissions and is also not available in Chrome Manifest V3, even though this issue does not exist in Chrome...