create-extension

Create a browser extension.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
create-extension
101.0.62 months ago4 years agoMinified + gzip package size for create-extension in KB

Readme

Create-Extension
Social Preview Chrome-Extension-Starter start a project for a Chrome Browser Extension including a framework and build system. Maintenance GitHub license Open Issues 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.

Author

Albert Patterson

Usage

Create extension resources automatically via npx npx create-extension [new directory name]
  • options
- -j or --javascript=true to use javascript instead of typescript - -i or --install=true to automatically install - -y or --yes=true to accept defaults (create in a 'browserextension" directory with typscript and automatically install)

Examples

Development

Once 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
- Note that the extension should be loaded AFTER running this command for automatic reloading to work correctly.
  • Typical first steps include
- Update the package.json and src/manifest.json with the details for your project and configuration for your extension. - update the files under src to build your application Once the code is built, the unpacked extension will be available in dist/unpacked and one can directly Load an unpacked extension
into the browser. Load an unpacked extension If built in production mode, a zip file will be created to up load to the Web Store.

Directories

  • src: The location of src files composing the extension
- manifest.json: the Manifest file - background: files that run in the background and compose the service worker
- 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
- additional files added in this directory will be included automatically
- injected: files that get injected into web pages via content scripts
- 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.
- New scripts with the same structure will be included automatically.
- popup: files that build the popup.
- 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.
- 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
- To extend the message system with newm, arbitrary types of messages
- copy the contents of src/messaging/message_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>message_system.ts</b>: combines the previous modules into a message system that facilitates straightforward message passing. This file likely will not require modification.
- Add the new message system in /src/messaging/message_systems/message_systems.ts
- Create messages with src/messaging/message_systems/[Request]:createRequest
- Send messages in the tab with src/messaging/message_systems/[Request]:sendInTab.
- Send messages in the service worker with src/messaging/message_systems/[Request]:sendInServiceWorker.
- Add the new message system to the list of registered message systems in src/messaging/message_systems.ts
- 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 message_systems/\*/handle_async_in_service_worker.ts -> message_systems/noops/handle_async_in_service_worker.ts
- in the service worker message_systems/\*/handle_async_in_tab.ts -> message_systems/noops/handle_async_in_tab.ts
  • build: The utilities for building the extension from the source files.
- Adding new features will likely require some update to the build process or the webpack config
- 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

License

This project is licensed under the MIT License - see the LICENSE.md file for details