watch causes web extension background script to reload when tab with active content script is closed

[Xerillio]

🐛 bug report

Using --config @parcel/config-webextension, the watch command seems to build a bundle that causes weird reload behaviour of the background script in the extension. At least when tested in Firefox.

If you open two tabs in the browser where at least one has an injected content script and you then close that tab, the background script gets reloaded. This causes loss of whatever state and event listeners you might have going on in the background script.

🎛 Configuration (.babelrc, package.json, cli command)

package.json:

{
  "name": "tmp",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "npm-run-all clean-dist build:start",
    "build:start": "parcel build manifest.json --no-source-maps --config @parcel/config-webextension",
    "clean-dist": "rimraf dist",
    "watch": "npm-run-all clean-dist watch:start",
    "watch:start": "parcel watch manifest.json --config @parcel/config-webextension --host localhost"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/config-webextension": "^2.12.0",
    "npm-run-all": "^4.1.5",
    "parcel": "^2.12.0",
    "web-ext": "^6.8.0"
  }
}

manifest.json:

{
  "manifest_version": 3,
  "name": "tmp",
  "description": "tmp tmp",
  "version": "0.0.1",
  "icons": {
    "64": "icons/icon.png"
  },
  "background": {
    "scripts": [
      "background_script.ts"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "*://github.com/*"
      ],
      "js": [
        "content_script.ts"
      ]
    }
  ]
}

🤔 Expected Behavior

The background script should only load once at browser startup like it does when using the build command. Of course, if source files are changed it should reload as usual.

😯 Current Behavior

Say you have two tabs open in the browser (A and B) and B has a content script injected (same behaviour if A has the content script loaded too). When you close tab B, the background script is reloaded (see console.log in the sample below). It doesn't seem to be specifically due to the tab closing, but because the page is unloaded. The same behaviour is also seen if you navigate to another page and the current page has the content script loaded.

💁 Possible Solution

🔦 Context

I'm building an extension, that tries to force images (and other resources) to show in the browser rather than downloading them as a file in cases where the HTTP response contains the header Content-Disposition: attachment.... The content script triggers the background script to load the URL of the image into either a new tab or the currently active tab (configurable in the extension). When loaded into the active tab, it breaks during watch-mode, because the webRequest.onHeadersReceived event listener in the background script is destroyed and doesn't catch the response for that URL and therefore can't remove the Content-Disposition header.

💻 Code Sample

The content_script.ts and background_script.ts mentioned in the manifest.json above:

// content_script.ts
console.log("Content script loaded!");

// background_script.ts
console.log("Background script loaded!");

Then run npm run watch and npx web-ext run. Make sure the extension is given permission to access github.com in permission settings for the extension at about:addons (Firefox). Open the dev tools for the background page (about:debugging#/runtime/this-firefox => "Inspect").

Now open two tabs at https://github.com/. Close one tab and see in the console that another line with "Background script loaded!" is written:

    Content-Security-Policy: Upgrading insecure request ‘ws://localhost:1234/’ to use ‘wss’

=>  Background script loaded! [background_script.ts:2:8](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/background_script.ts)

    Content-Security-Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). 2 [runtime-fbc6a09690e9548d.js:106:14](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/node_modules/@parcel/runtime-browser-hmr/lib/runtime-fbc6a09690e9548d.js)

    Firefox can’t establish a connection to the server at wss://localhost:1234/. [runtime-fbc6a09690e9548d.js:90:11](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/node_modules/@parcel/runtime-browser-hmr/lib/runtime-fbc6a09690e9548d.js)

    [parcel] 🚨 Connection to the HMR server was lost [runtime-fbc6a09690e9548d.js:180:14](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/node_modules/@parcel/runtime-browser-hmr/lib/runtime-fbc6a09690e9548d.js)

    Content-Security-Policy: Upgrading insecure request ‘ws://localhost:1234/’ to use ‘wss’

=>  Background script loaded! [background_script.ts:2:8](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/background_script.ts)

    Content-Security-Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). 2 [runtime-fbc6a09690e9548d.js:106:14](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/node_modules/@parcel/runtime-browser-hmr/lib/runtime-fbc6a09690e9548d.js)

    Firefox can’t establish a connection to the server at wss://localhost:1234/. [runtime-fbc6a09690e9548d.js:90:11](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/node_modules/@parcel/runtime-browser-hmr/lib/runtime-fbc6a09690e9548d.js)

    [parcel] 🚨 Connection to the HMR server was lost [runtime-fbc6a09690e9548d.js:180:14](moz-extension://d77d7143-e252-425c-8367-f7356f53bff3/node_modules/@parcel/runtime-browser-hmr/lib/runtime-fbc6a09690e9548d.js)

🌍 Your Environment

Software	Version(s)
Parcel	2.12.0
Node	21.5.0
npm/Yarn	10.2.4
Operating System	Windows 11