chrome-extension-boilerplate
chrome-extension-boilerplate copied to clipboard
How to add options.html page?
There is a popup
page (built by popup.tsx
), what if I want to add an "Options" page?
This is an old question but, in case anyone on the web starts using this and has the same question, here's what to do.
You need to add a file named options.html
to the dist/
folder, then declare that as the options_page
in the manifest.json
file on the same folder.
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Then, you also need to add an options.tsx
file to the src/ui/
folder, then edit the webpack.config.js
so that the entry object includes this file:
entry: {
content: './src/app/content.ts',
background: './src/app/background.ts',
popup: './src/ui/popup.tsx',
options: './src/ui/options.tsx',
},
Some observations:
- You'll want to make sure your
options.html
file links tooptions.js
. - If you want a separate stylesheet for options, create it under
src/styles/
, then link it to theoptions.html
and make sure theoptions.tsx
file imports it:
import '../styles/options.css';
For more on this read Webpack's docs on Configuration.