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

@extension-create/cli

v1.4.0

Published

Create cross-browser extensions with no build configuration.

Downloads

83

Readme

npx extension npm fossa workflow downloads PR's welcome

Plug-and-play, zero-config, cross-browser extension development tool.

Create cross-browser extensions with no build configuration.

extension is a plug-and-play, zero-config, cross-browser extension development tool with built-in support for TypeScript, WebAssembly, React, and modern JavaScript.

Create A New Extension

npx extension create my-extension
cd my-extension
npm run dev

A new browser instance will open up with your extension ready for development.

You are done. Time to hack on your extension!

https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a-72c489672586

Get Started Immediately

Kickstart Any Sample from Chrome Extension Samples

Dive right into development by starting with a sample from the Chrome Extension Samples repository. It's a great way to get acquainted with best practices and save time:

  1. Open your terminal.
  2. Navigate to the directory where you want your project.
  3. Run the command:
    npx extension dev <sample-name>
    Replace <sample-name> with the name of the sample you wish to use from Chrome Extension Samples.

See the example below where we request the sample page-redder from Google Chrome Extension Samples.

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge

https://github.com/cezaraugusto/extension/assets/4672033/ee221a94-6ec7-4e04-8553-8812288927f1

Use Microsoft Edge to kickstart any sample from chrome-extesions-sample

extension supports a variety of browsers, including Microsoft Edge. To start an Edge-compatible extension, simply:

  1. Open your terminal.
  2. Navigate to your desired project directory.
  3. Execute:
    npx extension dev  <sample-name> --browser=edge
    Tailor your command by replacing <sample-name> with the specific sample you're interested in.

See the example below where we request the sample magic8ball from from Google Chrome Extension Samples using Edge as the runtime browser.

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge

https://github.com/cezaraugusto/extension/assets/4672033/2db2a1f6-3110-4380-9a49-dc9d034146aa

Run Mozilla Add-Ons Using Edge

Bridge the gap between Firefox and Edge by running Mozilla Add-Ons using Edge:

  1. Navigate to your project directory.
  2. Use the command:
    npx extension dev <addon-name> --browser=edge --polyfill=true 
    This will fetch a Mozilla Add-On and adapt it for Edge.

See the example below where we request the sample Apply CSS from MDN WebExtensions Examples using Edge as the runtime browser.

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

https://github.com/cezaraugusto/extension/assets/4672033/130cb430-1567-419c-8c90-23fddcf20f00

I have An Extension

https://github.com/cezaraugusto/extension/assets/4672033/48694a23-b7f1-4098-9c5d-eff49983739c

If you have an existing extension which is using a package manager, you can install the extension package and manually create the scripts used to run your extension. See the demo above or follow these instructions to get it done:

Step 1 - Install extension as a devDependency

npm install extension --save-dev

Step 2 - Link your npm scripts with the executable extension commands

{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "start": "extension start"
  },
  "devDependencies": {
    // ...other deps,s
    "extension": "latest"
  }
}

Done. You are all set!

  • To develop the extension, run npm run dev.
  • To visualize the extension in production mode, run npm run start.
  • To build the extension in production mode, run npm run build.

Using a specific browser for development

Desktop Browsers

☑️ = Likely works but no browser runner support yet.

| Brave Browser | Google Chrome | Microsoft Edge | Mozilla Firefox | Opera Browser | | Vivaldi Browser | |-|-|-|-|-|-|-|

If you want to target a specific browser, just pass the --browser flag to the dev/start command (based on the list available above), like npx extension dev path/to/extension --browser=edge.

Hint Pass --browser="all" to load all available browsers at once.

extension dev --browser=all

License

MIT (c) Cezar Augusto.