For your next side project, make a browser extension

• nutab

  3 10 0.0 Svelte

Svelte / Sveltekit also works great and is a bit more lightweight / performant while being easier / faster to develop with.

I have an implementation on GitHub for my personal hybrid bookmark-manager / hackernews-reader newtab extension[0]. Its still a wip but i use the website version[1] daily as it doesn’t need to be installed and can still be set as my newtab page (warning as I’ve never opened it on mobile).

[0] https://github.com/fractalhq/nutab

• firefox-easy-container-shortcuts

  1 90 0.0 JavaScript

  Easy, opinionated, keyboard shortcuts for Firefox 57+ containers.

Browser extensions are useful. I've made some simple ones and published a few:

https://addons.mozilla.org/en-US/firefox/user/14310707/

But it's also worth considering where the browser gives priority. For example, while browser extensions can add custom keyboard shortcuts, they can't override the keybindings a website uses. Want to use the keyboard shortcut Ctrl-Shift-1 for a browser extension while a Google Docs page is focused? Nope, sorry, can't be done.

https://github.com/gsomoza/firefox-easy-container-shortcuts/...

It's pretty clear that while a browser extension can access browser APIs that a web app can't, the extension is still a second-class citizen in other respects.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• plasmo

  11 8,304 8.8 TypeScript

  🧩 The Browser Extension Framework

  

Shameless plug, but we built the Plasmo Framework to make that (and a lot more) super easy: https://github.com/plasmohq/plasmo

• pixiebrix-extension

  3 81 9.9 TypeScript

  PixieBrix browser extension

  

If you don't want to actually write the code and deal with the browser webstores, you can also use an "extension builder" tool like https://www.pixiebrix.com/ to call APIs, move data around, and build simple UIs.

• example-chrome-extension

  13 52 7.2 JavaScript

  Example Chrome Extension - open source examples for Chrome extension APIs

  

I was enthusiastic enough about extensions that I decided to publish a book about building them: https://www.buildingbrowserextensions.com/

Browser extensions are severely underrated as a platform because they aren't sexy. For all that mobile devices have given us, so much of our work continues to be done using a desktop browser. Enhancements such as augmenting websites with widgets, supplying contextual information, and automating repetitive tasks using the authenticated session - when applied appropriately - can save someone hours every day.

• googleimagesrestored

  12 360 0.0 JavaScript

  Discontinued This extension attempts to make Google Images look and feel like it did before they changed everything on August 6th, 2019.

i very much care about supporting firefox users. for example, i maintain a separate, mozilla-signed, manifest v2 version of an XPI of an extension i made [0] just so firefox users can keep using it. i do so even though this compromises my own ideals about not wanting to use 2FA out of principle.

[0] https://github.com/fanfare/googleimagesrestored/releases

• rosegarden

  2 3 0.0 JavaScript

  Discontinued Rosegarden gives you the promises for writing cross platform webextensions on Chrome and other browsers missing the promise based API.

I have made this even easier with Rosegarden, so that you can just use a promisified browser object in both Firefox and Chrome!

The library is tiny, under 5 kb.

https://github.com/peterhil/rosegarden

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• spellbook

  3 29 8.3 JavaScript

  Spellbook is a WebExtension to easily add new bookmarks to correct categories (by peterhil)

• Notion-Boost-browser-extension

  21 489 6.4 JavaScript

  Chrome & Firefox extension for Notion to add 20+ features like sticky outline, small text & full width by default, hide comments & help button, bolder text etc. Download here: https://gourav.io/notion-boost

https://github.com/GorvGoyl/Notion-Boost-browser-extension/

ChatGPT Writer - 20+ users

• webextensions

  36 559 8.1 Bikeshed

  Charter and administrivia for the WebExtensions Community Group (WECG)

  

Somewhat tangentially, I've been pushing for a popup/overlay API that allows to specify the position and size, and doesn't require any origin permissions.

https://github.com/w3c/webextensions/issues/307

• twitter-profile-search

  1 3 1.8 JavaScript

  Bringing profile search button to Twitter web!

Well, shameless plug, but I made something similar: https://github.com/rounakdatta/twitter-profile-search :)

• tante-jacky

  1 1 0.0 JavaScript

  Bridge for German banking websites to work with your USB chipTAN reader

• control-panel-for-twitter

  38 1,700 9.1 JavaScript

  Browser extension which gives you more control over your Twitter timeline and adds missing features and UI improvements - available for desktop and mobile browsers

I love the section on "Earning the pixels", as this is something I also put a lot of time into in extensions, from the target site itself to the options page in my extensions having per-browser CSS to make sure it fits in with the browser's own options UI (and in light and dark mode).

With Twitter, earning the pixels in the site UI is even more fraught as it's a React Native for Web app, so you really don't want to touch the app's own DOM directly, as it will most likely get wiped out on the next render.

e.g. The latest version of Tweak New Twitter [0] keeps you on the "Following" timeline, gets rids of the new "For you" tab and adds a new "Retweets" tab - to highlight the Retweets tab as active when the user clicks it, I had to add a styling hook class to and use that to manually style the Retweet tab as active and override styles for existing tabs to make them display as inactive. Another layer of fun: at any point the user can change the Default/Dim/Lights out theme and the highlight colour using the Display dialogue, so I needed to figure out how to detect these changes, figure out what was now being used and re-apply them to custom UI on the fly.

[0] https://github.com/insin/tweak-new-twitter#tweak-new-twitter

Suggest a related project