I'm currently developing a Chrome Extension with React/Redux and utilizing Webpack. As part of the optimization process, I have started migrating resources to a separate file using the WebPack DLLReference plugin.
After generating the dll/dll.vendor.js file, I encountered an issue where it was successfully loaded in the popup window but not in the injected content.
Despite adding it to the manifest:
"web_accessible_resources": [
"dll/dll.vendor.js"
],
The file is accessible through the path: chrome-extension:///dll/dll.vendor.js, but unfortunately, it's not being recognized in the injected content as seen in Developer Tools -> Sources, leading to missing object errors.
Everything functioned properly before implementing the DLLReferencePlugin.
You can find my DLL webpack config file here: https://pastebin.com/z9RjRUqm
And my Content webpack config file here: https://pastebin.com/0Niw2Fqm
If you check the error image here, it highlights the line causing issues:
module.exports = vendor;
Interestingly, this problem only occurs in the content environment, whereas the popup works fine with the same code snippet. It seems that the extension toolbar injection into the page might be the root cause.
This leads me to suspect that the code relying on dll.vendor is executed prior to the actual injection on the page. I am actively exploring ways to prevent this from occurring. Any insights or suggestions on debugging this issue?
UPDATE
Upon further investigation, I discovered that the discrepancy arises because the code dependent on dll.vendor executes before the page's injection takes place. I am seeking solutions to mitigate this timing conflict.