Functional fake WebExtensions environment for development.
Developing UI page in Chrome Extensions or WebExtensions could be daunting:
- Live reloading is tricky, let alone hot module replacement.
- Framework dev-tools are unable to work because of the cross-extension policy.
We could just run source code in a normal webpage with a fake
window.browser global variable. This can be done via sinon-chrome which stubs all the schema generated apis.
Simply stubing is not enough though, this project patches some of the apis to make it function properly.
Message communications between the developing page and background page needs a bit more work. This project offers a workaround by running the background patch with the background source code in an iframe.
background.js module in
dist. You can also use
lib/background/index.js directly with webpack.
Depending on your build system, load
core before everything else, then load
background with your background source code in a iframe, then load everything left.
If using webpack-dev-server, make sure
inline is disabled to make it work with iframe.
You can also add your own patch before loading your source code. PRs are welcome if you find any bug or incompletion.
browser.runtion.sendMessage._senderis a sinon stub which is function that accepts the message object and returns the
senderobject for event listener. You can use
callsFakeor any stub method to change the result.