Chrome Extension with Vanilla (Non-React) TypeScript & Vite HMR
https://github.com/ianmacartney/ts-chrome-extension-search-history
This repo is a good starting point for developers looking to build a simple
extension with vanilla html, css and typescript.
GitHub
GitHub - ianmacartney/ts-chrome-extension-search-history: Create a ...
Create a realtime reactive Chrome Extension using TypeScript with Vite auto-reloading, powered by a Convex backend. - GitHub - ianmacartney/ts-chrome-extension-search-history: Create a realtime rea...
2 Replies
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.
Features
- 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.
Chrome for Developers
Chrome Extensions: Give users options - Chrome for Developers
How to let users customize your extension.
The bundling approach had some rough edges - not sure how you're supposed to use the
chrome.scripting API with bundled files - they aren't self-contained enough I think. I almost got there with importing something like assets/content-script-loader.content.ts.js.js but even that choked on trying to import files. Maybe I needed to add those scripts to the manifest somewhere..
My goal was to make a version of this that uses React and the ConvexReactClient, and make a few Templates with useful building blocks