Set up a local security certificate
If you’re using a Development URL to develop an extension, the URL needs to use HTTPS. But if you just enable HTTPS in webpack-dev-server, you need to bypass a security warning every time you start the local server, since you don’t actually have a local security certificate.
Bypassing the warning is simple enough, but it can be confusing when you forget to bypass the warning and then can’t figure out why your extension isn’t working.
You can avoid this problem altogether by setting up a local, self-signed security certificate.

Prerequisites

Step 1: Install mkcert

mkcert is “a simple tool for making locally trusted development certificates.”
To install mkcert, run the following command:
1
# macOS
2
brew install mkcert
3
4
# Windows
5
choco install mkcert
Copied!
To learn more about mkcert, see github.com/FiloSottile/mkcert.

(Optional) Step 2: Install nss

If you’re using Firefox as your web browser, you also need to install nss:
Network Security Services (NSS) is a set of libraries designed to support cross-platform development of security-enabled client and server applications.
To install nss, run the following command:
1
brew install nss
Copied!
To learn more about nss, see github.com/nss-dev/nss.

Step 3: Generate the certificate

To generate the certificate, run the following command in the extension’s directory:
1
mkcert localhost
Copied!
This command generates the following files:
  • localhost-key.pem
  • localhost.pem
  • rootCA-key.pem
  • rootCA.pem
You should see the following output in the terminal:
1
Created a new local CA
2
Note: the local CA is not installed in the system trust store.
3
Run "mkcert -install" for certificates to be trusted automatically
4
5
Created a new certificate valid for the following names
6
- "localhost"
7
8
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem"
9
10
It will expire on 28 September 2023
Copied!
Then, to trust the certificate, run the following command:
1
mkcert -install
Copied!
You should see the following output in the terminal:
1
The local CA is now installed in the system trust store!
Copied!

Step 4: Configure webpack-dev-server

Once the certificate exists, webpack-dev-server needs to know where it lives. You can do this in the webpack.config.js file or via the command line.

webpack.config.js

Add the following https property to the devServer object in the webpack configuration:
1
https: {
2
key: "localhost-key.pem",
3
cert: "localhost.pem"
4
},
Copied!

Command line

Add the following flags to the webpack serve command:
  • --https
  • --key
  • —-cert
This is an example of a complete command:
1
webpack serve --config ./webpack.config.js --mode development --https --key localhost-key.pem --cert localhost.pem
Copied!

Step 5: Start the server

To confirm that the security certificate is set up correctly, start the local server:
1
yarn start
Copied!
Then navigate to https://localhost:8000.
If the page loads without a security warning, the certificate is set up correctly. You can also confirm that it’s working by clicking the lock icon in the address bar.
Based on these changes, you can use https://localhost:8000 for an extension’s Development URL without having to bypass the security warning.
Last modified 1mo ago