search

tshaddix / webext-redux

A set of utilities for building Redux applications in Web Extensions.
MIT License
1.22k stars 180 forks source link

Support for webpack-dev-server for faster content script ui development? #249

Closed MwirabuaTimothy closed 4 years ago

MwirabuaTimothy commented 4 years ago

My current development process (using this toolkit) involves the following

  1. Keep running "webpack --mode development --watch"
  2. Make a change on the codebase
  3. Wait for webpack to rebuild the new output
  4. Go to chrome://extensions/ page
  5. Pressing the refresh button on the extension
  6. Refreshing a live webpage to see the content script ui.

This is quite tiring and slow so...

  1. Has anyone been able to use webpack-dev-server to run the content-script on a browser tab of its own? I have tried but I get errors related to extension APIs being not being accessible..
  2. Any plans to support this in the future? I see it being very useful.
MwirabuaTimothy commented 4 years ago

I realize that extension scripts usually have global variables that must invoke inside a chrome extension like chrome.storage etc but im hoping we can figure out a workaround. Perhaps proxy some of these global calls to the installed extension?

Ive put together this minimal starter kit for quick testing of this idea https://github.com/MwirabuaTim/react-chrome-extension

MwirabuaTimothy commented 4 years ago

I just separated the UI from the content script on this kit too. You can now see the error thrown by the webext-redux proxy store https://github.com/MwirabuaTim/react-chrome-extension

Uncaught TypeError: Cannot read property 'addListener' of undefined at Store.js:108

this.safetyMessage = this.browserAPI.runtime.onMessage.addListener(this.safetyHandler);

MwirabuaTimothy commented 4 years ago

I just realized that once you install the extension, all the necessary pages are already visible on:

chrome-extension://YOUR-EXTENSION-ID/content.html chrome-extension://YOUR-EXTENSION-ID/popup.html chrome-extension://YOUR-EXTENSION-ID/options.html

And once you have my webpack-dev-server running, with writeToDisk set to true, you can refresh any of these links to see the updates.