[Developer Experience] Enable hot-reloading in development #33
Conversation
| @@ -32,7 +32,10 @@ | |||
| "128": "icons/icon128.png" | |||
| }, | |||
| "web_accessible_resources": ["icons/*.png"], | |||
| "options_page": "src/options/options.html", | |||
| "content_security_policy": "script-src 'self' https://cdn.jsdelivr.net 'unsafe-eval'; object-src 'self'", | |||
| "options_ui": { | |||
There was a problem hiding this comment.
The options_ui page is functionally equivalent to options_page, but the latter isn’t recognized by Parcel.
| "page": "options/options.html", | ||
| "open_in_tab": true | ||
| }, | ||
| "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", |
There was a problem hiding this comment.
We do not need https://cdn.jsdelivr.net in the CSP anymore thanks to #30
phacks
force-pushed
the
dx/setup-hot-reloading
branch
from
95b984a
to
bc6d363
Compare
phacks
force-pushed
the
dx/setup-hot-reloading
branch
from
bc6d363
to
3e2a40c
Compare
| @@ -7,8 +7,8 @@ | |||
| "license": "MIT", | |||
| "private": true, | |||
| "scripts": { | |||
| "start": "mkdir -p extension && cp manifest.json extension/ && parcel src/github/background.js icons/* src/constants.js src/**/*.html src/**/*.css --dist-dir extension", | |||
| "build": "mkdir -p extension && cp manifest.json extension/ && parcel build src/github/background.js icons/* src/constants.js src/**/*.html src/**/*.css --dist-dir extension", | |||
| "start": "parcel watch src/manifest.json --config @parcel/config-webextension --host localhost --no-cache", | |||
There was a problem hiding this comment.
Removing --dist-dir is a bit of an awkward change, is there any reason you removed it? I've re-added it locally and everything still seems to work from /extension
There was a problem hiding this comment.
Good question—I was wondering why it was specified in the first place, rather than using the default folder. I couldn’t remember (maybe it was necessary in Parcel v1? or I copied that from someplace?), so I thought it’d be slightly better to leave as much default settings as possible. In this specific example, if I’m new to this codebase a dist/ folder would look familiar (it’s where built files are stored in most JS projects), but an extension/ folder can be one of many things.
What do you think?
There was a problem hiding this comment.
👍🏻 Sounds good. It's better to make it closer to default now, whilst there's minimal dev interruption (ie, two people :P). If we do more work on this it would become more of a pain to switch out
Description
This PR enables hot-reloading in development, meaning one does not need to click the “Update” button in
chrome://extensionsafter a code change to see the changes in action.It uses the fabulous Web Extensions feature of Parcel 2.
How to test
yarnto install the@parcel/config-webextensiondependencyrm -rf dist extension .parcel-cacheyarn start, and install the extension locally. Important: the folder to load is nowdist, notextension. Make sure that everything works as usual.options.htmlwhile on the extension options page. The change should be visible right away, or after a page refresh.yarn buildto build the artefactdist) and make sure that everthing works as usual.