无法在chrome-extension中从executeScript发送数据

时间:2018-02-13 09:31:56

标签: javascript reactjs google-chrome google-chrome-extension

我正在开发一个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')时,它也没有显示出来,所以我猜配置也存在一些问题。

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:2)

当您使用chrome.tabs.executeScript时,您必须在清单的 permissions 字段中指定主机。
它被称为programmatic injection

  

要将代码插入页面,您的扩展程序必须具有该页面的跨域权限。它还必须能够使用 chrome.tabs 模块。您可以使用清单文件的权限字段获得这两种权限。