chrome-extension-boilerplate icon indicating copy to clipboard operation
chrome-extension-boilerplate copied to clipboard

How to add options.html page?

Open marlonguimaraes opened this issue 4 years ago • 1 comments

There is a popup page (built by popup.tsx), what if I want to add an "Options" page?

marlonguimaraes avatar Jun 03 '20 00:06 marlonguimaraes

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.

As Google's docs put it:

{
  "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 to options.js.
  • If you want a separate stylesheet for options, create it under src/styles/, then link it to the options.html and make sure the options.tsx file imports it:

import '../styles/options.css';

For more on this read Webpack's docs on Configuration.

ordehi avatar Sep 25 '21 23:09 ordehi