create-extension

Create-Extension

Chrome-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.

Author

Albert Patterson

• Linkedin
• Github
• npm
• Youtube
• Medium

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 'browser_extension" directory with typscript and automatically install)

Examples

• Simple Screenshotter
• Actions
• Youtube Recommendations Scraper

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.

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/request_systems/simple_request and create the following
        • types.ts: defines the types passed between request and response
        • handle_async_in_service_worker.ts: defines how the service worker response to a particular type of message
        • handle_async_in_tab: defines how the the tab response to a particular type of message
        • index.ts: 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.

  • 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