search

webcompat / webcompat-reporter-extensions

Browser extensions to help report site compatibilty issues.
26 stars 21 forks source link

Create npm script to package crx addons #88

Closed miketaylr closed 6 years ago

miketaylr commented 6 years ago

Looks like https://github.com/oncletom/crx might be a good way to do it.

It should be possible to do something like npm run package:chrome and have that generate a new webcompat-reporter-chrome.crx in the bin folder!

miketaylr commented 6 years ago

(there might be better ways to do this, so some research before submitting a PR is probably a good idea)

ncarbon commented 6 years ago

I would like to work on this

ncarbon commented 6 years ago

Hi Mike, I'd like to know if I am heading the right direction and am understanding the issue.

Using crx package, I tried creating a script using the crx documentation in their github repo. In the script, first I have it load the chrome extension files in 'dist/chrome' directory, then pack it using the crx.pack(), then write the crx file in the bin folder. '/bin/webcompat-reporter-chrome.crx'. I added "package:chrome": "node script.js to the package.json and do npm run package:chrome to run the script that's supposed to pack the chrome extension. Although it doesn't seem to be doing what it's supposed to, I'd like to know if I'm atleast in the right direction. Thanks.

miketaylr commented 6 years ago

Heya @ncarbon, yep, this sounds like the right approach generally.

I see there's a commandline API/tool, so you might see if you can get the crx built just from using that tool manually. Any errors there might help you along with the module API approach: https://github.com/oncletom/crx#cli-api

(and if it works via the commandline, maybe the simplest way forward is to just "package:chrome": "crx -blah blah -o foo.crx" in package json?)

Happy to help debug any error messages you run into.

miketaylr commented 6 years ago

(also, I know there's the whole signing/PEM bit that complicates things, so go ahead and make a new cert and use that for packaging if you need to, we'll figure out the best way to integrate the project one once we have some working code, perhaps in a follow up bug)

ncarbon commented 6 years ago

Ahh I'm new to npm scripts, didn't really know you could just use the commands you'd normally use in terminal in package.json. I did just that and it seems to be working. 🙌

ncarbon commented 6 years ago

Also, is the crx cli api something you'd only use in the package json? I tried using it on terminal but it tells me crx is not a command. It works perfectly fine in the package json though. Do I need to install something before it can be used on terminal?

miketaylr commented 6 years ago

Do I need to install something before it can be used on terminal?

Nope! By default if a package has a binary it will be in ./node_modules/.bin/ (I think?). Newer versions of npm ship with a tool called npx (see https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).

So you can just do npx crx, and that's functionally equivalent to ./node_modules/.bin/crx.

edit: to be more clear, you can do npx crx from the commandline. By default, scripts run from npm scripts modify your PATH so it all works magically in the background.