Add an Options Page to Chrome Extension

Learn how to add an options page to your Chrome Extension

Friday, February 24, 2023

options

Introduction

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 Options menu.

An image of a blog post

By default, the Options option is not available. We will add it in the next section.


Project setup

Clone the repo from the previous blog

The easiest way is to use degit.

1npx degit codegino/svelte-tailwind-chrome-plugin#01-intro my-target-folder

Install the dependencies.

12cd my-target-foldernpm install

Create the content of the options page

src/options/index.html
1234567891011<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Popup</title>  </head>  <body>    <div id="app"></div>    <script type="module" src="./index.ts"></script>  </body></html>

It is important to match the absolute file path with the one in the manifest file.

Create the options script

src/options/index.ts
12345678910import '../app.css';import Options from '../components/Options.svelte';
const target = document.getElementById('app');
async function render() {  new Options({target});}
document.addEventListener('DOMContentLoaded', render);

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.

src/components/Options.svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script lang="ts">  import { onMount } from "svelte";
  let count = 0;  let message: string = null;
  onMount(() => {    chrome.storage.sync.get("count", (data) => {      count = data.count;    });  });
  const handleSave = () => {    chrome.storage.sync.set({ count }).then(() => {      message = "Updated!";
      setTimeout(() => {        message = null;      }, 2000);    });  };</script>

<div class="flex flex-col py-[3%] px-[2%] bg-blue-50 h-screen">  <h2 class="mb-5">Options Page</h2>  {#if message}    <span class="font-bold text-blue-800">{message}</span>  {/if}
  <form on:submit|preventDefault={handleSave} class="flex flex-col gap-4">    <div class="flex items-center gap-2 w-full">      <label for="count" class="text-lg font-bold text-gray-700">        New Count:      </label>      <input        type="number"        id="count"        name="count"        class="border border-gray-300 rounded-md p-2 flex-1"        bind:value={count}      />    </div>    <i>Add other configurations here!</i>
    <button      class="w-full bg-blue-500 text-white text-base font-bold py-2 px-4 rounded"      type="submit"    >      Save    </button>  </form></div>

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.

manifest.json
123456789+10+11+1213{  "name": "Svelte Tailwind Chrome Extension",  "description": "Sample Extension using Svelte and Tailwind",  "version": "1.0",  "manifest_version": 3,  "action": {    "default_popup": "src/popup/index.html"  },  "options_ui": {    "page": "src/options/options.html",  },  "permissions": ["storage"]}

Build and load the extension

  1. Run npm run dev or npm run build
  2. Open the chrome extension page by typing chrome://extensions in the address bar
  3. Enable the developer mode
  4. Click on the Load unpacked button
  5. Select the dist folder
  6. Open the extension menu; then, click the loaded extension
An image of a blog post

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 open_in_tab property.

manifest.json
12345+678{  // ...  "options_ui": {    "page": "src/options/options.html",    "open_in_tab": true  },  // ...}

Now the options page will be opened in a new tab.

An image of a blog post

Repository

Check the source code here


What's next