You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
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
The text was updated successfully, but these errors were encountered:
🐛 bug report
Using
--config @parcel/config-webextension
, thewatch
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:
manifest.json:
🤔 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 thewebRequest.onHeadersReceived
event listener in the background script is destroyed and doesn't catch the response for that URL and therefore can't remove theContent-Disposition
header.💻 Code Sample
The
content_script.ts
andbackground_script.ts
mentioned in themanifest.json
above:Then run
npm run watch
andnpx web-ext run
. Make sure the extension is given permission to access github.com in permission settings for the extension atabout: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:
🌍 Your Environment
The text was updated successfully, but these errors were encountered: