The issue with create-react-app is it creates a random hash, so technically, this article sets you up for failure by excluding that. The good news is you can easily read ./build/asset-manifest.json and JSON.parse() the file to extract the CSS and JS, then re-inject the filenames back into ./build/manifest.json. You would do this as a build step. Typically, this would be done using something like Gulp. You can do it a number of ways, but the steps should always be: 1) Build prod bundle 2) Get hashes from asset-manifest.json 3) Update bundle filenames in manifest.json. After that, you can unpack the extension and it will use the correct CRA bundles. Like I said, this article does not include mention of this, so anyone that attempts to rely on manifest.json content_scripts will encounter issue.
Moving on, the true meat of the problem is that to load your extension into Chrome, you need to unpack the ./build folder into the Chrome Extensions area. This is where the problem stems from that Fred describes. You cannot type yarn start or npm start with Create-React-App and then see your code changes by simple reloading the extension in Chrome. This is because you unpacked the ./build folder and unless you are typing yarn build every time you save a file, you are not refreshing your ./build folder.
The solution now, is to consider the problem in terms of state. You have a development state and a production state. If you unpack the ./build folder into Chrome, that is your production state. If you were to unpack the ./public folder into Chrome, you could achieve your development state. If you were to try that, you will fail because there is no CSS and JS bundle generated yet!
The solutions I’ve seen involve not using Create-React-App and creating your own development bundle and production bundle. If you spend a bit of time Googling “React App Chrome Extension”, you will find GitHub repositories in which people have solved this issue. Rather than explain them poorly from memory, you should just research that.
I can tell you now that it is possible. I’ve seen it. Frded’s question is, “can you create this development state (ie: dev build) with CRA?”. My answer is, I don’t know but you could probably monkey patch another instance of Webpack in somehow and make it listen for changes and create a build that you can reference from ./public/manifest.json, but you’d probably want to keep that file clean and instead create one like ./public/manifest.dev.json.
You could also do something similar after ejecting from CRA, and you wouldn’t have to add another instance of Webpack into the mix, but either way, you have to find a way to generate a dev bundle onFileSave. If there is a better way to do it using Webpack, you will find evidence while you search those repositories I mentioned above.
-Adam
