Holodex Companion Extension.
yarn
yarn dev # watch ts files
#in another pane
yarn dev:chrome # launch chrome
Hot refresh doesn't exist, but the files are watched and re-built when changed. To see your changes
- in
src/popup
, close and re-open the popup - in
src/options
, reload the options page - in
src/content
, reload the extension inchrome://extensions
, then reload the page the content script is running in - in
src/background
, reload the extension inchrome://extensions
To open devtools for:
src/popup
, right-click the extension icon next to the address bar, and clickInspect popup
src/background
, go tochrome://extensions
, then go to the extension'sDetails
, then underInspect views
, clickbackground page
src/options
, go tochrome://extensions
, then go to the extension'sDetails
, then clickExtension options
, which will open a new tab where you can open devtools normallysrc/content
, open devtools on any page where the content script is running
yarn
yarn dev # watch ts files
# in another pane
yarn dev:firefox # launch firefox
Reloading works the same way as in Chrome, but devtools works a bit differently from Chrome. popup
, background
, and options
all output their content into the same inspection tool available through about:debugging#/runtime/this-firefox -> Inspect
.
Just like in Chrome, options
can also be inspected normally by opening devtools on the options page, and content scripts output their logs into the opened page's devtools console.
You can inspect the sources of popup
by opening the Debugger
tab in the inspection tool, and selecting the source file on the left side.
yarn dist
To build the published extension. The zip file will be put into the dist/
folder.