Chrome扩展程序,内容脚本位于扩展程序图标

时间:2013-11-11 05:01:31

标签: javascript google-chrome-extension

我想把一些东西付诸实践,但我对googles“孤立的世界”感到困惑。我搜索了很多但我无法找到满足我需求的答案。 工作流程:用户点击扩展图标 - > javascript将在DOM树上搜索div“xpto并获取其内容 - >使用此内容在新标签中进行Google搜索。

的manifest.json

{
  "manifest_version": 2,
  "name": "searchongoog",
  "description": "test",
  "version": "1.0",
  "permissions": [ "tabs",
    "https://*/*","http://*/*","activeTab"
  ],    
  "content_scripts": [
    {
      "matches": ["https://*/*","http://*/*"],
      "js": ["background.js"],
      "run_at": "document_end"
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

有了这个我可以得到信息,但每次我打开一个页面它会自动完成它。我不想要那个,我希望它只在点击扩展图标时才能执行background.js。我试图在popup.html中调用background.js,但它无权访问DOM以提取要搜索的信息。

任何帮助都会很棒。

PS:我这是一个完全的菜鸟,所以如果我做错了就不要激怒我。

非常感谢

1 个答案:

答案 0 :(得分:5)

您可以尝试“编程注入”而不是“匹配模​​式注入”。

编程注入非常有用,尤其是当您不希望将代码注入到与模式匹配的每个页面时,例如:当用户单击浏览器操作按钮时,应注入代码。

我写了一个简单的例子来演示如何实现“programmatic inject”:

首先,您需要添加一个背景页面来注册“浏览器操作”点击事件监听器。

<强>的manifest.json

{
  "manifest_version": 2,
  "name": "searchongoog",
  "description": "test",
  "version": "1.0",
  "permissions": [ "tabs",
    "https://*/*","http://*/*","activeTab"
  ],
  "background":{
    "persistent":false,
    "page":"background.html"
  },
  "browser_action": {
    "default_icon": "icon.png"
  }
}

注册浏览器操作点击监听器(injector.js是您搜索DOM的脚本,并获取新标签谷歌搜索的内容)。

注意:请确保浏览器操作没有弹出窗口。如果弹出窗口,则不会触发此事件。

<强> background.html

<script>
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null,{file:"injector.js"});
});
</script>

<强> injector.js

alert("Programmatic injection!");

DEMO快照:

enter image description here

希望这对你有所帮助。