I am using inject technology to be able to access window object from my content scripts as per this example: https://gist.github.com/devjin0617/3e8d72d94c1b9e69690717a219644c7a
Everything was working fine until I added npm seedrandom to my inject file. Now when I build my project, inject file is modified in such a way that it no longer is working as it should. Tried various webpack settings, but with no luck. Should this be working by default using such a prebuild environment?
"dependencies": {
"seedrandom": "^3.0.5"
},
"devDependencies": {
"@types/chrome": "0.0.158",
"@types/jquery": "^3.5.14",
"@types/seedrandom": "^3.0.4",
"copy-webpack-plugin": "^9.0.1",
"glob": "^7.1.6",
"prettier": "^2.2.1",
"rimraf": "^3.0.2 ",
"ts-loader": "^8.0.0",
"typescript": "^4.4.3 ",
"webpack": "^5.0.0",
"webpack-cli": "^4.0.0",
"webpack-merge": "^5.0.0"
}
module.exports = {
entry: {
popup: path.join(srcDir, 'popup/popup.ts'),
options: path.join(srcDir, 'options/options.ts'),
background: path.join(srcDir, 'background/background.ts'),
content: path.join(srcDir, 'content/content.ts'),
inject: path.join(srcDir, 'inject/inject.ts'),
// vendor_inject: ['seedrandom'],
},
output: {
path: path.join(__dirname, "../dist/js"),
filename: "[name].js",
},
optimization: {
splitChunks: {
// name: "vendor",
// chunks(chunk) {
// return chunk.name !== 'background';
// },
cacheGroups: {
vendor: {
name: 'vendor',
chunks(chunk) {
return chunk.name !== 'background';
},
},
vendor_inject: {
test: /[\\/]node_modules[\\/](seedrandom)[\\/]/,
name: 'vendor_inject',
chunks: 'all'
}
}
},
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
plugins: [
new CopyPlugin({
patterns: [{ from: ".", to: "../", context: "public" }],
options: {},
}),
],
};