Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add options.html page? #5

Open
marlonguimaraes opened this issue Jun 3, 2020 · 1 comment
Open

How to add options.html page? #5

marlonguimaraes opened this issue Jun 3, 2020 · 1 comment

Comments

@marlonguimaraes
Copy link

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

@ordehi
Copy link

ordehi commented Sep 25, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants