Explore modern chrome extension boilerplates / frameworks / etc

[0xdevalias]

It would be good to explore what the modern options for Chrome Extension boilerplates / frameworks / bundlers / supporting tooling are; ideally something that supports TypeScript, and probably that uses Vite or similar. Being able to automatically build/bundle/deploy updates from GitHub actions would be useful too.

Resources

A few non-exhaustive resources that may be worth looking into deeper.

Lists / Blogs / etc

• https://github.com/stars/0xdevalias/lists/web-browser-extensions

  • Web/Browser Extensions

• https://github.com/fregante/Awesome-WebExtensions

  • Awesome WebExtensions

• https://www.reddit.com/r/chrome_extensions/comments/15am8h2/which_framework_do_you_recommend_using_to_create/

  • Which framework do you recommend using to create Google Chrome extensions? for example frameworks like plasmo, or crxjs?

• https://medium.com/inato/building-my-first-browser-extension-should-i-use-a-framework-ddb57bbbc84b

  • Building my first browser extension: should I use a framework?

  • ⚠️ Spoiler ⚠️
    We decided to use a framework!

    We chose Plasmo because the other options available were not suitable for us:
    — CRXJS: Chrome specific, we had the ambition to deploy to other browsers in the future;
    — Bedframe: early access only.

• https://medium.com/@jonathanzihindula95/choosing-the-right-framework-for-your-chrome-extension-a-comprehensive-guide-d9290804fddb

  • Choosing the Right Framework for Your Chrome Extension: A Comprehensive Guide

  • In the ever-evolving landscape of web development, selecting the right framework for building Chrome extensions is a crucial decision. Each framework brings its own set of features and advantages to the table. In this article, we’ll explore three powerful tools, such as Parcel.js, Plasmo, and Vite, to help you make an informed choice for your next Chrome extension project.

Extension Frameworks

• https://www.plasmo.com/

  • Plasmo helps you build, test, and deploy powerful, cutting-edge products on top of the web browser.

  • https://github.com/PlasmoHQ/plasmo (~8.9k ⭐'s)

    • plasmo
      The Browser Extension Framework

• https://wxt.dev/

  • WXT
    Next-gen Web Extension Framework
    An open source tool that makes Chrome Extension development faster than ever before.

  • Supported Browsers
    WXT will build extensions for Chrome, Firefox, Edge, Safari, and any Chromium based browser.

    • https://wxt.dev/get-started/publishing.html

      • Safari
        🚧 Not supported yet

        WXT does not currently support automated publishing for Safari. Safari extensions require a native MacOS or iOS app wrapper, which WXT does not create yet. For now, if you want to publish to Safari, follow this guide:

        • Converting a web extension for Safari - "Convert your existing extension to a Safari web extension using Xcode’s command-line tool."

  • https://wxt.dev/get-started/compare.html

    • Compare
      Lets compare the features of WXT vs Plasmo (another framework) and CRXJS (a bundler plugin).

  • https://github.com/wxt-dev/wxt (~3.3k ⭐'s)

    • WXT
      Next-gen framework for developing web extensions.
      It's like Nuxt, but for Chrome Extensions

    • MV2 and MV3
      Build Manifest V2 or V3 extensions for any browser using the same codebase.

    • File Based Entrypoints
      Manifest is generated based on files in the project with inline configuration.

    • TypeScript
      Create large projects with confidence using TS by default.

    • Automated Publishing
      Automatically zip, upload, submit, and publish extensions.

    • Frontend Framework Agnostic
      Works with any front-end framework with a Vite plugin.

    • Bootstrap a New Project
      Get started quickly with several awesome project templates.

    • Bundle Analysis
      Tools for analyzing the final extension bundle and minimizing your extension's size.

    • WXT's simplifies the chrome extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.

• https://crxjs.dev/vite-plugin/

  • CRXJS Vite Plugin is a tool that helps you make Chrome Extensions using modern web development technology.

  • https://github.com/crxjs/chrome-extension-tools (~2.6k ⭐'s)

    • CRXJS
      Bundling Chrome Extensions can be pretty complex. It doesn't have to be.

• https://github.com/mozilla/web-ext (~2.6k ⭐'s)

  • Web-ext
    A command line tool to help build, run, and test web extensions

• https://www.bedframe.dev/

  • Make, Version & Publish cross-browser extensions continously with ease

  • https://github.com/nyaggah/bedframe (~500 ⭐'s)

    • BEDframe
      Your Browser Extension Development Framework

      Make, Version & Publish cross-browser extensions (continuously) with ease.

  • https://news.ycombinator.com/item?id=37394194

    • Show HN: Bedframe – open-source Browser Extension Development framework

Extension Store Submission

• https://github.com/fregante/chrome-webstore-upload-cli (~424 ⭐'s)

  • chrome-webstore-upload-cli
    Upload/Publish Chrome Web Store extensions from the CLI

  • A CLI wrapper around the 'Web Store Upload' module.

    • https://github.com/fregante/chrome-webstore-upload (~360 ⭐'s)

      • chrome-webstore-upload

      • A small node.js module to upload/publish extensions to the Chrome Web Store.

• https://github.com/PlasmoHQ/bpp (~152 ⭐'s)

  • Browser Platform Publisher
    A GitHub action from Plasmo to publish your browser extension to every web store/add-ons marketplace. This action and its dependencies are open-sourced under the MIT license.

  • The core modules are:

    • https://github.com/PlasmoHQ/bms (~26 ⭐'s)

      • Browser Market Submit
        A NodeJS library from Plasmo to submit browser extensions to multiple stores. It is made to be used in the Browser Platform Publisher action.

    • https://github.com/PlasmoHQ/chrome-webstore-api (~17 ⭐'s)

      • Chrome Webstore API for NodeJS
        A nodejs library from plasmo to submit browser extension to the Chrome Webstore.

    • https://github.com/PlasmoHQ/mozilla-addons-api (~17 ⭐'s)

      • Mozilla Webstore Upload
        A nodejs library from plasmo to publish browser add-ons to the Mozilla Firefox Add-ons Store.

    • https://github.com/PlasmoHQ/edge-addons-api (~16 ⭐'s)

      • Microsoft Edge Addons API for NodeJS
        A tiny but powerful module from plasmo to publish browser add-ons to the Microsoft Edge Web Store.

  • Unsupported stores:

    • Opera Add-ons: They do not have an automation API, and their cookie expires in 24 hours, making them unsuitable for CI/CD.

• https://github.com/avi12/web-ext-deploy (~47 ⭐'s)

  • WebExt Deploy
    The ultimate automation tool for deploying to multiple extension stores simultaneously!

  • Supported stores:

    • Chrome Web Store
    • Firefox Add-ons
    • Edge Add-ons
    • Opera Add-ons

    • Note that Opera is supported via Playwright browser automation, not an official publishing API.

Boilerplates

• https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite (~1.9k ⭐'s)

  • Chrome Extension Boilerplate with React + Vite + TypeScript

• https://github.com/guocaoyi/create-chrome-ext (~1.4k ⭐'s)

  • Create Chrome Extension (.crx)
    Scaffolding your chrome extension, multiple boilerplates supported!

• https://github.com/fregante/browser-extension-template (~765 ⭐'s)

  • browser-extension-template
    Cross-browser extension boilerplate - barebones template with Parcel 2, options handler and auto-publishing.

Bundlers (non browser extension specific)

• https://vitejs.dev/

  • Vite
    Next Generation Frontend Tooling

  • https://github.com/vitejs/vite (~66.2k ⭐'s)

    • Vite
      Next Generation Frontend Tooling

• https://parceljs.org/

  • The zero configuration build tool

  • Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

  • https://github.com/parcel-bundler/parcel (~43.3k ⭐'s)

    • Parcel
      The zero configuration build tool for the web.

• https://github.com/egoist/tsup (~8.5k ⭐'s)

  • tsup
    The simplest and fastest way to bundle your TypeScript libraries.
    Bundle your TypeScript library with no config, powered by esbuild.

Etc

• https://github.com/mozilla/webextension-polyfill (~2.6k ⭐'s)

  • WebExtension browser API Polyfill
    A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

  • https://github.com/Lusito/webextension-polyfill-ts (~388 ⭐'s)

    • TypeScript Types for the Web-Extension Polyfill

See Also

• Update to Chrome Extension Manifest v3 #13
• Options page #5
• Allow right-click context menu to be disabled #16

[0xdevalias]

Current thoughts are leaning towards looking into wxt more (see above)