browser.extension null - Githubissues

tidys commented 3 years ago

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"
}


4. 加载后，出现null问题，似乎是引用的其他插件导致的
![image](https://user-images.githubusercontent.com/7894208/113509076-2e4ebb00-9586-11eb-9afc-7f4b29b1a15a.png)

代码好像来自：

/* 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无法注入的脚本无法正常工作

tidys commented 3 years ago

其实我的需求仅仅是生成一份inject.js，然后在conten.js中注入这个脚本似乎我的用法有点问题，为了生成单独的inject.js，我不应该将将它配置在containScript.entrys，这种做法就会导致上述问题

但是我发现似乎没有其他更好的解决办法，插件似乎本身也没有考虑到脚本注入这方面的需求

希望能给出个解决办法，谢谢

lemonly14 commented 2 years ago

老哥我遇到了同样的问题

tidys commented 2 years ago

我暂时注释掉vue-cli-plugin-browser-extension代码中的

webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }])

反正是使用，暂时规避了问题

lemonly14 commented 2 years ago

这样的注释作用是什么？
可以这样写是吗

tidys commented 2 years ago

是手动修改这个插件的代码

lemonly14 commented 2 years ago

老哥可以加微信详聊吗有些问题想请教一下谢谢老哥

tidys commented 2 years ago

微信号： xu__yanfeng

adambullmer / vue-cli-plugin-browser-extension

browser.extension null #120