npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-extension

v1.0.9

Published

Create a browser extension.

Downloads

45

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 'browser_extension" 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/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