vue-cli-plugin-browser-extension
vue-cli-plugin-browser-extension copied to clipboard
adambullmer
browser.extension null
Describe the bug
var browser = injectionContext.browser; // browser=null
var extension = browser.extension, // fuck null
To Reproduce
- 配置vue.config.js
{
"pluginOptions": {
"browserExtension": {
"componentOptions": {
"contentScripts": {
"components": {
background: true,
contentScripts: true,
},
"entries": {
content: "src/content.js",
inject: "src/inject.js"
}
}
}
}
}
}
- content.js中注入脚本inject.js
let content = chrome.extension.getURL("js/inject.js")
console.log(`[cc-inspector]注入脚本:${content}`);
let script = document.createElement('script')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', content)
script.onload = function () {
// 注入脚本执行完后移除掉
this.parentNode.removeChild(this);
}
document.body.appendChild(script)
- npm run build-watch package.json
"scripts":{
"build-watch": "vue-cli-service build --watch"
}
- 加载后，出现null问题，似乎是引用的其他插件导致的
代码好像来自：
/* tslint:disable */
/* -------------------------------------------------- */
/* Start of Webpack Hot Extension Middleware */
/* ================================================== */
/* This will be converted into a lodash templ., any */
/* external argument must be provided using it */
/* -------------------------------------------------- */
Expected behavior 这个问题影响了我的开发体验，导致content无法注入的脚本无法正常工作
其实我的需求仅仅是生成一份inject.js，然后在conten.js中注入这个脚本 似乎我的用法有点问题，为了生成单独的inject.js，我不应该将将它配置在containScript.entrys，这种做法就会导致上述问题
但是我发现似乎没有其他更好的解决办法，插件似乎本身也没有考虑到脚本注入这方面的需求
希望能给出个解决办法，谢谢
我暂时注释掉vue-cli-plugin-browser-extension代码中的
webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }])
反正是使用，暂时规避了问题
可以这样写是吗