使用ReactJS开发Chrome扩展程序时，如何快速测试更改？

Question

I'm trying to use npm run to test my chrome extension, however I get expected errors saying 'chrome' is undefined.

I use their API to store user data using chrome.storage.sync , runtime checks chrome.runtime.lastError , and tab info like chrome.tabs.query(...) .

Right now the issue is I need to 1) npm run build , 2) upload / refresh the extension in the Extensions tab, and then finally take a look if the changes applied, or if there is any issues.

I have found an npm package that allows me to use storage called chrome-storage ( https://www.npmjs.com/package/chrome-storage ), but I'm assuming there is a better way to do this? I just want to make changes in my IDE and have it auto update the browser window so I see changes (which I usually get from reactjs).

Answer 1

I just want to make changes in my IDE and have it auto update the browser window so I see changes (which I usually get from reactjs).

It seems you want a boilerplate with the "hot reload" feature supported. Check those out for example: react-chrome-extension-boilerplate , crossbuilder . But from my experience you mostly still need to reload the current page in the browser to see changes (depends on what kind of changes).