Webpack and programmatically injected content scripts
Your content scripts are effectively "entry points" in webpack-terms.
Each top-level content script should be defined as a webpack entry.Use webpack to build these content scripts. Each entry will pull in all of its dependencies (like React) into one big blob.
You then make a 2nd webpack build that builds your extension. This extension will use the raw loader and import your webpack-compiled content scripts and then it will have them all as strings local variables:
import scriptA from 'content/build/a';import scriptB from 'content/build/b';And now you can inject the scripts into your tabs as needed:
chrome.tabs.executeScript(null, scriptA);
This should work, the chrome docs say execute script excepts string code or string file.
import ContentScript from './content-script-file';chrome.tabs.executeScript(null, ContentScript);