I am having a similar issue to this. I am trying to inject a content script into a 3rd party website using https, and receiving the following error:

Uncaught Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
    at new SockJS (fanduel.bundle.js:9519:13)
    at new SockJSClient (fanduel.bundle.js:7020:17)
    at initSocket (fanduel.bundle.js:14279:12)
    at ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=localhost&port=3000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=false (fanduel.bundle.js:7474:55)
    at options.factory (fanduel.bundle.js:17300:31)
    at __webpack_require__ (fanduel.bundle.js:16758:33)
    at fanduel.bundle.js:17875:11
    at fanduel.bundle.js:17880:12

My code is as follows manifest.json

{
    "manifest_version": 3,
    "background": { "service_worker": "background.bundle.js" },
    "action": {},
    "permissions": [
        "identity",
        "storage",
        "tabs",
        "activeTab",
        "scripting",
        "downloads"
    ],
    "host_permissions": ["<all_urls>"]
}

index.js (background script)

chrome.windows.create(
	{
		url: "https://www.fanduel.com/history",
		focused: false,
		state: "minimized",
	},
	async (hiddenWindow) => {
		const tab = hiddenWindow.tabs[0];

		const res = await chrome.scripting.executeScript({
			target: { tabId: tab.id },
			files: ["fanduel.bundle.js"],
		});
		console.log(res);
	}
);

fanduel.js (fanduel.bundle.js)

chrome.runtime.sendMessage({
    message: "from fanduel.js",
});
console.log("from fanduel.js");
window.onload = () => {
    chrome.runtime.sendMessage({
        message: "onload event from fanduel.js",
    });

    console.log("onload event from fanduel.js");
};

Jan 24 '23 02:01 chanzer0

The only way to workaround this is to execute npm run build everytime you make a change and re-load the unpacked extension. Hope this helps solving @lxieyang

Jan 24 '23 02:01 chanzer0

A quick fix for this. In utils of project's root folder, look for webserver.js. Change server.client.webSocketTransport to ws. Change server.webSocketServer to ws. So it will look like this:

Restart dev server and the problem is gone 🎉🎉🎉

Jan 26 '23 13:01 monokaijs

Thank you!! Absolutely clutch.

Jan 27 '23 01:01 AriTavakoli

Didn't work, I got [webpack-dev-server] [object Event] error Stack Trace contentScript.bundle.js:8007 (logger) contentScript.bundle.js:8176 (anonymous function) contentScript.bundle.js:7626 (error) contentScript.bun

Feb 08 '23 06:02 hadnet

@hadnet can you provide a full log of error?

Feb 08 '23 06:02 monokaijs

FYI, if you testing only against local webpages it's enough to set chrome://flags/#allow-insecure-localhost

Feb 10 '23 20:02 naps62

Too many issues with this bp. Just gave up and built my own using React 18 + TS + Webpack 5

Feb 11 '23 01:02 hadnet

@hadnet is it public? I'd be interested in incorporating some ideas if you happened to get a better setup

Feb 11 '23 08:02 naps62

That works for me, thanks :+1:

Feb 16 '23 03:02 kiennt

It did not work for me I am getting another error:

WebSocket connection to 'wss://github.com/ws' failed: 
WebSocketClient @ WebSocketClient.js:16
initWDSSocket @ WDSSocket.js:23
initSocket @ ErrorOverlayEntry.js:83
executeWithRetryAndTimeout @ retry.js:9
runWithRetry @ retry.js:17
setupOverlay @ ErrorOverlayEntry.js:82
runWithPatchedUrl @ patchUrl.js:29
./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js @ ErrorOverlayEntry.js:77
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:8
index.js:561 [webpack-dev-server] Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Feb 24 '23 00:02 uri3000

It did not work for me I am getting another error:

WebSocket connection to 'wss://github.com/ws' failed: 
WebSocketClient @ WebSocketClient.js:16
initWDSSocket @ WDSSocket.js:23
initSocket @ ErrorOverlayEntry.js:83
executeWithRetryAndTimeout @ retry.js:9
runWithRetry @ retry.js:17
setupOverlay @ ErrorOverlayEntry.js:82
runWithPatchedUrl @ patchUrl.js:29
./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js @ ErrorOverlayEntry.js:77
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:8
index.js:561 [webpack-dev-server] Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Verify if it's working by do some modifications. In my case, I just ignore the error, it keeps working as the error is unrelevant (maybe).

Feb 24 '23 01:02 monokaijs

For Developers still getting errors This Should Works publicPath: `http://localhost to publicPath: `wss://localhost

Try with wss://, which indicates you want a secure WebSocket connection.

If you have your WebSocket server running with your Web server, it will probably use the same security certificate and you do not need to do anything. If it does not work, please check your WebSocket server documentation about how to add certificates and enable wss://.

https: true,
  hot: true,
  liveReload: false,
  client: {
    webSocketTransport: 'sockjs',
  },
  webSocketServer: 'sockjs',
  host: 'localhost',
  port: env.PORT,
  static: {
    directory: path.join(__dirname, '../build'),
  },
  devMiddleware: {
    publicPath: `wss://localhost:${env.PORT}/`,
    writeToDisk: true,
  },
  ```

Mar 14 '23 16:03 ahmedragabshaban

Make https: true, in webpackdevserver Initialtor in webserver.js file

Mar 18 '23 18:03 MirzaHasnat

This bug will also cause the issue that content js is not working. After changed webserver.js, it works well.

Mar 22 '23 04:03 cmsax

Thanks! This works for me.

Mar 31 '23 10:03 slc3a2

After applying these changes, when you change anything, the dev server reload the page infinitely (infinity loop)

Mar 31 '23 14:03 masihjahangiri

Exact same issue. Tried all of the solutions from above and more.

Apr 02 '23 15:04 alexburlis

For anyone still viewing, this solved my issues. The other alternative being building a static package each change (which sucks, but works)

Apr 02 '23 16:04 chanzer0

Did you have any issues with infinite reloading when changing the content script? For some reason it doesn't stop for me.

Apr 02 '23 16:04 alexburlis

No, the hot reloads worked fine for me afterwards

Apr 02 '23 17:04 chanzer0

Nothing helped, so I ended up using this boilerplate instead: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

Apr 03 '23 06:04 FSou1

I got it working , but the hot loading doesn't seem to work now... or at least for the background page

Apr 26 '23 05:04 twigs67

I tested out @FSou1 suggestion and it works without this issue. I would pay someone to fix this issue for this repo.

Apr 26 '23 06:04 twigs67

This is the way.

May 01 '23 17:05 cworsley4

Things still do infinite loops after editing the content/index.js, not sure what to do here.

May 30 '23 13:05 cmosguy

thanks, change sockjs to ws and enable chrome allow insecure flag it's work for me

Jun 02 '23 07:06 phamvankhang

All tabs opened on chrome goes on infinite reload loop once I make any changes on the code. I have already changed sockjs to ws and also enable enabled "allow-insecure-flag"

Jun 03 '23 07:06 aayush-sinha

Facing infinite reload loop also. It happened when you made any changes. Ended up with turned off Hot Reload

Jun 09 '23 16:06 megatunger

Had a similar issue on my end. I'm loading a content script whenever the extension runs which then sends a message back to the popup. For me, when I would load the extension the first time the content script messages would properly get sent but any time loading the extension after the messages would stop.

A combination below seemed to work well for me:

Change webSocketTransport: 'sockjs' to webSocketTransport: 'ws' Change webSocketServer: 'sockjs' to webSocketServer: 'ws' Change https: false to https: true

Jun 22 '23 19:06 ajzaradichMV

Alright, I've been dealing with this issue for a few days and found a solution that worked out for me. The TLDR (with some explanatory comments) for the solution is:

Solution TLDR:

In webserver.js:

set hot: false
Make sure you are setting the hot entry points manually
manually add HotModuleReplacementPlugin to the plugin list
set client: false
set https: false (haven't tested with true but I think it should work the same)

Example

# webserver.js
...

// Set hot entry points manually
for (let entryName in config.entry) {
  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
    // Enable HMR for all entries except those in the "notHMR" list
    // See "Manual entry points" in https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr
    config.entry[entryName] = [
      'webpack/hot/dev-server.js',
      `webpack-dev-server/client/index.js?hot=true&hostname=localhost&port=${env.PORT}`,
    ].concat(config.entry[entryName]);
  }
}

// Add HotModuleReplacementPlugin to plugin list
config.plugins = [new webpack.HotModuleReplacementPlugin({})].concat(
  config.plugins || []
);
...

var server = new WebpackDevServer(
  {
    https: false,
    // We do not enable hot mode because we are defining above HMR only for some entries
    hot: false,
    liveReload: false,
    client: false,
    // From here and below the rest of the options don't need changing, just posted the most important ones here for clarity
    host: 'localhost',
    port: env.PORT,
    static: {
      directory: path.join(__dirname, '../build'),
    },
    devMiddleware: {
      publicPath: `http://localhost:${env.PORT}/`,
      writeToDisk: true,
    },
    ...
  }
)

Explanation

Let me preface my explanation by clarifying I am not an expert and this is what I've come to understand from reading documentation and debugging the issue for a few days.

As I understand it, the issueAn insecure SockJS connection may not be initiated from a page loaded over HTTPS comes from using sockjs as the webSocketServer option in the webserver.js file.

However, if you change webSocketServer to ws you will notice that the error is gone but now you will get an infinite refresh loop whenever you refresh a page or make a change to your code.

This stems from the fact that HMR is enabled for ALL entry points via hot:true in the dev server config. Which includes the modules that should not have HMR enabled, content script being the culprit in this case for the infinite reload. If you open the dev console on the webpage that is reloading you will notice that it is attempting to create a websocket connection to the site that you are on currently, this would usually throw an exception when using sockjs due to it being insecure and stop further code execution, preventing HMR from attempting to get updates (this is why when using sockjs you don't have infinite reload loops), but now that we are using ws and no exception is thrown HMR will try to find updates which it will never get and prompt it to refresh the page in search for updates, causing an infinite loop.

To fix this we declare hot:false and instead define manual entry points for HMR following webpack's documentation. And we also need to explicitly add the HotModuleReplacementPlugin that webpack would automatically add when hot:true.

Closing Notes & Improved implementation

If you want to implement an even better version of HMR + the ability to reload the extension automatically when content or background scripts change, you can use this fork which implements that later feature and apply the changes mentioned to achieve both

Jun 30 '23 18:06 Termtime

chrome-extension-boilerplate-react chrome-extension-boilerplate-react copied to clipboard

Uncaught Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS

After applying these changes, when you change anything, the dev server reload the page infinitely (infinity loop)

After applying these changes, when you change anything, the dev server reload the page infinitely (infinity loop)

Solution TLDR:

Explanation

Closing Notes & Improved implementation

chrome-extension-boilerplate-react
chrome-extension-boilerplate-react copied to clipboard