It seems that bundling the CSS content_script along with the JS file is not enough for reloading the CSS files. A strategy can be appending these styles as dynamic imports into the .js files and targeting the CSS chunk names to where the manifest.json expects.

Using npx extension-create --template chrome/analytics would resolve to https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/tutorials/analytics which we then download a copy. In this case, the project name can be optional as we can fallback to the sample name.

Add visual tools to show users how to develop HTML interfaces and add some other functionality to get users up-to-speed into development.

There are a few undocumented bugs/workarounds to make global extension reload that need to be listed and patched. This is for the future.

Currently, extension-create is too heavy to run via npx which is useful only for demonstration purposes. It's best to let users npm install -g extension-create and add an update notification for when it needs update.

1. Fix types reference. In extension.d.ts the path to the default types should be absolute.
2. Add update-check to handle package updates: https://www.npmjs.com/package/update-check.

I'm trying to create a extension with typescript react template

npx extension create my-extension --template=react-typescript

I'm getting an error related to edge

node:internal/modules/cjs/loader:1147
  throw err;
  ^

Error: Cannot find module 'webpack-run-edge-extension'
Require stack:
- /home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/@extension-create/develop/dist/module.js
- /home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/extension/dist/cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/@extension-create/develop/dist/module.js:10:10676)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/@extension-create/develop/dist/module.js',
    '/home/***/.npm/_npx/3b1fc9cdc75022aa/node_modules/extension/dist/cli.js'
  ]
}

Node.js v20.11.0

I'm on ubuntu, so dont have edge browser installed

Versions

node: 20.11.0
npm 10.2.4
ubuntu: 22.04.1 LTS

Would be nice to allow extension developers to access which is the current browser and whether we are in development/production mode.

• Support .env files based on current mode, namely .env.local, .env.production and .env.development.
• Support .env files based on browser vendor, namely .env.edge, .env.safari, etc.

https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari

xcrun safari-web-extension-converter

No matter what I do, I cannot seem to get the thing to launch. I am consistently rebuked by an error informing me that its preferred localhost address is already in use. I experience this same effect with or without the --port flag, including after a clean boot, with literally no other web processes in use (see attached imagery below).

As you can see from the stack trace, I'm not seeing anything that would be a whole lotta help (though I have no issues spinning up servers through any other means, including atop 8000).

Any ideas?

I'm running on Wayland (GNOME 45.2)/Ubuntu 23.10, on a 12-core Intel i7 10750H with 32GB of memory, and well over a half terabyte free. Active shell is Bash v.5.2.15, npm is at v10.5.0, and node is on v20.9.0 (lts/iron).

I am new in npx, can anyone help me with this.

I am getting this on execution of npx extension-create start

npm ERR! cb.apply is not a function npm ERR! A complete log of this run can be found in: npm ERR! /home/ashutosh/.npm/_logs/2021-07-29T22_36_15_037Z-debug.log Install for [ 'extension-create@latest' ] failed with code 1

node --verison: 16.4.2
npx --verison : 10.2.2

@extension-create/create and @extension-create/develop can benefit from some e2e tests. It should cover whatever we say we support in the documentation.

Installation fails on Windows because of the usage of UNIX-only executable "sh"

'sh' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] preinstall: `sh preinstall.sh`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\s-che\AppData\Roaming\npm-cache\_logs\2021-03-02T15_17_57_063Z-debug.log
Install for [ 'extension-create@latest' ] failed with code 1

For some reason it isn't.

It's outdated.

Ref: https://github.com/GoogleChrome/chrome-extensions-samples

Tests conducted

1. No deprecated functionality
2. Extension must load without errors
3. Changes on any file declared in manifest should trigger proper reload

Browser Extension Manual Tests

chrome-api-samples

chrome-archive

chrome-functional-samples

Include support for CSS, LESS, SASS, JSX, and all usual webpack loader options.

yarn extension-create test my-extension-hello should be equivalent to running jest in the project root.

Most likely to be solved by a custom/external plugin.

In alpha versions we used to have a "--browsers=all" flag that would open all browser runners at once. We should re-enable that.

If I try to use the Firefox-specific property theme_icons of browser_action in Chrome, I should receive a warning saying that it will have no effect in the current browser.

Auto option (correct flag TBD) should trigger both create and run commands, and kickoff a new browser instance immediately after the command.

Such as options_page.

Ref: https://github.com/mdn/webextensions-examples

Integrate with https://github.com/cezaraugusto/webpack-run-edge-extension.

If the user has a content_script and decides to reload the tab, we lose HMR and need to fully reload the extension. This is a bug but needs investigation but not top priority at the moment.

Hey! Love the project, amazing work!

I was wondering what the plans are for supporting UI that's injected into the current web page using shadow DOM or other isolation techniques. This is similar to Plasmo's Content Scripts UI.

My use case involves displaying a chatbot on specific websites and enhancing the experience.

Due to symlink bugs. See output:

npm ERR! code EEXIST
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/extension-create/cli.js
npm ERR! dest /usr/local/bin/extension-create
npm ERR! errno -17
npm ERR! EEXIST: file already exists, symlink '../lib/node_modules/extension-create/cli.js' -> '/usr/local/bin/extension-create'
npm ERR! File exists: /usr/local/bin/extension-create
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/cezar/.npm/_logs/2021-01-27T13_37_52_386Z-debug.log

STR:

• create an extension locally using yarn extension-create HELLO

There are some color patterns we should follow. For the CLI to have a unified style language, we should first populate each plugin's "messages" file with what we output to the terminal and go from there.

Hey, I found your project to be useful. I was wondering if there is a way to say template="tailwind" && template="content"

I just released webpack-run-edge-extension that can allow us to support Edge as well without polyfills. The work needed is to add a reasonable API and to allow developers to work on both Chrome and Edge at the same time.

Core packages combined are enourmous sizing +250mb.

@extension-create/create

@extension-create/develop

In the future we can remove "pacote" from @extension-create/create and use go-git-it like @extension-create/develop does. This can save us up to 10mb.