Create a Chrome Extension using TypeScript and auto-reloading code via Vite.
This repo is a good starting point for developers looking to build a simple extension with vanilla html, css and typescript.
It uses https://crxjs.dev/ to provide Vite HMR, allowing you to develop your extension like you would a website, with the content changing as you save your files.
It uses Convex as the backend: realtime database, serverless functions, and more.
-
On www.google.com/search, it adds a sidebar to show you previous pages you've visited with the title / description matching your search terms. Search results will update in realtime as you visit & index other sites.
-
On every other page, it adds the title, url, and description to a database "pages" table of the database, if allowed.
-
It checks allowed status by looking in a "rules" table. If a page is on an origin without a rule, it adds buttons to always or never index that page. By default, it doesn't index it.
-
If you reject an origin, it will clear the database of data from that origin.
-
If you have many tabs open from a single origin, clicking a button on one to allow / disallow indexing an origin will update all pages automatically.
-
There is an options page to clear your page history.
-
You can click the extension icon to see a popup of recent pages, which also update in realtime, thanks to Convex.
npm i
npm run dev
This will run vite
and npx convex dev
, which syncs your functions in the
convex folder to your Convex development backend.
On your first run, you'll be prompted to make a new Convex backend.
Navigate to chrome://extensions.
Drag your dist
folder onto the page, and confirm the installation.
Note: If you make changes to your manifest, you need to re-install by removing the extension and dragging the folder in again. For most changes to html, css, and TypeScript, however, you shouldn't need to re-install it.
Add this to your manifest.json to run content.ts on every page except Google search:
"content_scripts": [
...[optional] other content scripts
{
"matches": ["https://*/*"],
"exclude_matches": ["https://www.google.com/search*"],
"js": ["src/content.ts"]
}
]
Open a popup window when the user clicks on your extension with by adding this to your manifest.json:
"action": { "default_popup": "index.html" },
Give you extension options by adding this line:
"options_ui": { "page": "options.html" },
Add this to your manifest.json to replace one of the default pages:
"chrome_url_overrides" : {
"bookmarks" | "history" | "newtab" : "index.html"
},
You can put your extension page in a side panel instead of a popup by adding this to your manifest.json
"permissions": ["sidePanel"],
"side_panel": { "default_path": "index.html" },
For more info on how to programatically open these and more, refer to the docs.
To add a service worker, add:
"background": {
"service_worker": "src/background.ts",
"type": "module"
},