使用 tabs.create 创建一个选项卡，然后注入内容脚本，代码属性有效，但文件属性不起作用？

Question

我试图注入一个内容脚本文件到一个新创建的选项卡，我有麻烦让它工作。我在弹出的控制台输出中不断得到chrome.tabs.executeScript(...) is undefined错误。我不确定这个细节是否有帮助，但我在这个项目中使用Vue。首先，我将分享代码。

这是我的清单:

{
"manifest_version": 2,
"name": "Example",
"description": "Performs common searches based on input",
"default_locale": "en",
"permissions": [
"<all_urls>",
"tabs"
],
"background": {
"scripts": [
"js/background.js"
]
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "Example",
}
}

下面是位于弹出式Vue组件的"方法"属性:

search: function() {
const urls = Object.values(this.$store.state.urls);
urls.forEach((item, index) => {
chrome.tabs.create({ url: item }, (tab) => {
// Works!
chrome.tabs.executeScript(tab.id, { code: "console.log('Injected JS')" });
// Doesn't work..
chrome.tabs.executeScript(tab.id, { file: "/content-script.js" });
// Doesn't work..
chrome.runtime.sendMessage({ message: "Popup", tabId: tab.id })
});
});
}

内容脚本:

(function() {
console.log("Injected JS from file!");
})();

最后，background.js:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if(request.message === "Popup") {
console.log("Got message from popupJS in background.");
console.log("Tab id: " + request.tabId);
chrome.tabs.executeScript(request.tabId, { file: "/content-script.js" });
}
});

在主代码中，我尝试了3种不同的方法:

1. executeScript withcode选择。
2. exectureScript与文件选择。不工作的话
后台脚本中的
3. executeScript。也没起作用。我希望这也能修复chrome.tabs.executeScript(...) is undefined错误，但在标签id打印输出后，我又得到了这个错误。

我想也许这可能是一个路径问题与content-script.js，我看了看Chrome文档，但没有太多的信息关于路径。Mozilla文档有更多的工作要做:

要跨浏览器工作，您可以将路径指定为相对URL，从扩展的根目录开始，如"/path/To/script.js"。

我将脚本放在项目的根目录中，所以它位于extension-project/content-script.js，我也试过在路径字符串中包括项目文件夹，以防开始的正斜杠没有指定根，没有成功。

关于我在这里做错了什么，有什么想法吗?

Answer 1

实际上，您需要在manifest中正确地编写权限。Json格式如下:

"permissions": [
"scripting"
]