Content Script not working on https websites when using dev server

[vaibhavhrt]

When using dev server from npm start, it can't load content scripts on websites running https because WDS tries to get updates from https://localhost:3000/sockjs-node/info?t=... but the request fails as the dev server is running on http. I tried running the dev server on https but then its giving some certificate error.

My manifest:

{
  "manifest_version": 2,
  "name": "Name",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon19.png",
    "default_title": "description"
  },
  "permissions": [
    "contextMenus",
    "tabs",
    "activeTab",
"*://github.com/*?tab=repositories",
    "*://github.com/*"
  ],
  "background": {
    "scripts": ["background.bundle.js"]
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "content_scripts": [
    {
        "matches": ["*://github.com/*"],
        "js": ["content.bundle.js"]
    }
  ]
}

Works perfectly for a website running http.

[vaibhavhrt]

After following this SO answer https://stackoverflow.com/a/48790088/9321755 I made the SSL Certificate Error to stop, but still hot reload doesn't works, it's not updating the code changes to my content.js to the extension. Also now chrome thinks certificate of github is invalid too and github is unsafe website.

[yoavz]

For anyone else coming across this recently, I've gotten this to work by:

1) Creating a self-signed SSL certificate for localhost. This can be it's own rabbit hole depending on your development system -- I used https://stackoverflow.com/questions/8169999/how-can-i-create-a-self-signed-cert-for-localhost/48790088#48790088 as a starting point.

2) Configuring WebpackDevServer to use the HTTPS certificate generated in (1):

var server =
  new WebpackDevServer(compiler, {
    hot: true,
    contentBase: path.join(__dirname, "../build"),
    sockPort: env.PORT,
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    ...
    https: {
      key: fs.readFileSync("<key file>"),
      cert: fs.readFileSync("<crt file>")
    },
  });

Might submit a PR sometime soon if I get some time to flesh this out into an environment setup.