Add an Options Page to Chrome Extension
Learn how to add an options page to your Chrome Extension
Friday, February 24, 2023
This is a continuation of the previous article about creating a Chrome Extension using Svelte and Tailwind. This article will focus on adding an Options page to the extension.
What is a Chrome Extension?
A Chrome extension is a software program that extends the functionality of Google Chrome. It modifies the browser's behavior and adds new features.
What is a Google Extension Options Page?
The Options Page is a page that allows users to configure the extension. It is a page that is opened when the user right-clicks on the extension icon in the toolbar; then, clicks the
By default, the
Options option is not available. We will add it in the next section.
Clone the repo from the previous blog
The easiest way is to use degit.
Install the dependencies.
Create the content of the options page
It is important to match the absolute file path with the one in the manifest file.
Create the options script
Create the Options Svelte component
NOTE: I'm using Svelte here because it was a focus of the previous blog. Do not focus too much on the content of this component because an Options page could contain anything.
This example contains a simple form that allows the user to update the count from the input field to the local storage.
Update the manifest file
The manifest file contains the necessary information for the browser to load the extension. For more information, check out the Chrome Extension Manifest
Simply add the
options_ui property to the manifest file.
Build and load the extension
npm run devor
npm run build
- Open the chrome extension page by typing
chrome://extensionsin the address bar
- Enable the developer mode
- Click on the
- Select the
- Open the extension menu; then, click the loaded extension
Open the options in a new tab
By default, the options page is opened in a popup. We can change this behavior by adding the
Now the options page will be opened in a new tab.
Check the source code here
- ✅ Sync plugin contents without reloading
- [ ] Add a content script
- [ ] Add a background script
- [ ] Add a dev tools page
- [ ] Deploying the extension