我正在开发一个chrome扩展,它可以提取当前选项卡的所有元标记。我使用ReactJs作为主要的开发环境,我已将我的chrome相关代码放在其componentWillMount()
方法中。
componentWillMount() {
const code =
"let metas = document.getElementsByTagName('meta');" +
"let newMetas = []" +
"for (let meta of metas) {" +
" newMetas.push({name: meta.name, content: meta.content});" +
"}" +
"newMetas;";
chrome.tabs.executeScript(null, {
code: code
}, function (results) {
console.log(results); // <=== Here I get 'null' value
if (!results) {
return;
}
})}
这是我的manifest.json
文件
{
"manifest_version": 2,
"name": "Northwind",
"description": "Just a simple all with all northwind employees",
"version": "1.0",
"browser_action": {
"default_icon": "./img/ic-logo.png",
"default_popup": "./index.html"
},
"permissions": [
"http://www.amazon.com/",
"tabs"
],
"web_accessible_resources": ["script.js"],
"content_scripts": [{
"matches": ["http://www.amazon.com/*"],
"js": ["app.js"]
}
]
}
app.js
是由react生成的构建文件。
我一直在阅读和搜索这个,但没有得到任何有关它为什么不起作用的线索。
另一个问题是,当我在我的脚本中放置console.log('done')
时,它也没有显示出来,所以我猜配置也存在一些问题。
非常感谢你的帮助。
答案 0 :(得分:2)
当您使用chrome.tabs.executeScript
时,您必须在清单的 permissions 字段中指定主机。
它被称为programmatic injection:
要将代码插入页面,您的扩展程序必须具有该页面的跨域权限。它还必须能够使用 chrome.tabs 模块。您可以使用清单文件的权限字段获得这两种权限。