Create-ExtensionChrome-Extension-Starter start a project for a Chrome Browser Extension including a framework and build system. It facilitates fast setup, rapid development, and creation of optimized assets for deployment - ideal for developing complex extensions. This project also offers file watching and automatic reloading to narrow development cycles. It utilized many familiar tools for web development (Webpack, Babel, Typescript etc) to create unpacked assets for local development as well as a zip file for deployment to the web store.
UsageCreate extension resources automatically via npx
npx create-extension [new directory name]
DevelopmentOnce the extension resources are created, the following scripts are available to build the code.
- build the project (prod mode):
npm run build
- build the project (dev mode):
npm run build-dev
- build the project in dev mode, watch for changes and automatically rebuild and reload the extension.
npm run watch
- Typical first steps include
- src: The location of src files composing the extension
- src/background/service_worker.[tj]s is the main file for the service worker
- additional files to concatenate with with service worker in dev mode should be placed in src/background/dev_mode_only
- currently two files are concatenated in dev mode
- chromereload.[tj]s which reloads the extension while running watch
- keep_active.[tj]s which keeps the service worker active so that it can be reloaded
- injected: files that get injected into web pages via content scripts
- additional files added in this directory will be included automatically
- Each script should be defined in it's own folder containing an index.[tj]s file. For example the all_pages content script is defined in src/injected/all_pages/index.[tj]s.
- popup: files that build the popup.
- New scripts with the same structure will be included automatically.
- options: files that build the options page.
- util: Utils for use throughout the extension
- messaging: Simplilfied messaging utils which provide type safety and simplify Message Passing
- Reminder: The action.onClicked event will not be dispatched if the extension action has specified a popup to show on click on the current tab.
- To extend the message system with newm, arbitrary types of messages
- copy the contents of src/messaging/request_systems/simple_request and create the following
- <b>types.ts</b>: defines the types passed between request and response
- <b>handle_async_in_service_worker.ts</b>: defines how the service worker response to a particular type of message
- <b>handle_async_in_tab</b>: defines how the the tab response to a particular type of message
- <b>index.ts</b>: combines the previous modules into a message system that facilitates straightforward message passing. The new message system must be registered in order to be included, which can be accomplished easily via the createAndRegisterRequestSystem method
- import the file containing the message system in /src/messaging/request_systems/index.ts so that it will be included in the build.
- Create messages with src/messaging/request_systems/[Request]:createRequest
- Send messages in the tab with src/messaging/request_systems/[Request]:sendRequestToTab.
- Send messages in the service worker with src/messaging/request_systems/[Request]:sendRequestToServiceWorker.
- Available with typescript template only
- At build time the following modules will be replaces with noop modules to avoid bloating the built artifacts with ununsed code
- in the injected scripts request_systems/\*/handle_async_in_service_worker.ts -> request_systems/noops/handle_async_in_service_worker.ts
- in the service worker request_systems/\*/handle_async_in_tab.ts -> request_systems/noops/handle_async_in_tab.ts
- build: The utilities for building the extension from the source files.
- build/webpack/get.webpack.config.script can be used to build scripts, for example it is used for building the content scripts
- build/webpack/get.webpack.config.page can be used to build pages, for example it is used for building the popup page.
- these should be used as a starting points for new config factories