JSPM

extension-create

0.3.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 576
  • Score
    100M100P100Q92637F
  • License MIT

Cross-browser web extension development made easy

Package Exports

  • extension-create

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (extension-create) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This project is under active development and subject to change.

extension-create workflow npm wip

Logo

Create modern cross-browser extensions with no build configuration.

extension-create helps you develop extensions with built-in support for esnext, module imports/exports, auto-reload, unit testing, and more. Read about the project vision and personal motivations here.

Creating an Extension

npx extension-create my-extension-hello
cd my-extension-hello
npm start

A new browser instance (for now, Chrome) will open up with your extension ready for development.

You are done. Time to hack on your extension!

Getting Started Immediately

Kickstart any sample from chrome-extesions-sample

Say you like the extension sample set_icon_path from chrome-extesions-sample. Its URL on GitHub is https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/api/browserAction/set_icon_path.

npx extension-create start https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/api/browserAction/set_icon_path

Will not only download the extension but also kickstart a Chrome instance in a fresh profile with your sample extension loaded. Try it yourself!

Note: It also works with any other GitHub URL, as long as it points to a directory with an available manifest file.

Next steps

Project roadmap TBD. These are the major areas I plan to cover (sorted)

  • create - Everything needed to create a new extension. Supports templates (alpha)
  • develop - Everything needed to develop a new extension. (under development)
    • start - Runs the extension on a browser with support for hot-reload, JS modules, and custom browser configs. (alpha)
      • --browser - Sets the browser to open. Defaults to default broser
        • chrome - Develop your extension running a standalone Chrome instance
        • firefox - Develop your extension running a standalone Firefox instance
        • edge (Chromium) - Develop your extension running a standalone Edge (Chromium) instance
        • safari - Develop your extension running a standalone Safari instance
        • brave - Develop your extension running a standalone Brave instance
        • multiple TBD - Develop your extension running multiple browser instances
      • Other browsers TBD
    • build - Prepares the code with production defaults for the publish step.
    • test - Unit test extensions using Jest
    • lint - Lints the extension with defaults optimized for cross-browser extesions
    • eject - Detaches the current extension project as a standalone project. (similar to create-react-app eject option)
  • publish - Everything needed to publish or update a new extension to all popular extension stores. (TBD)

License

MIT (c) Cezar Augusto.