javascript - 在扩展图标上带有内容脚本的 Chrome 扩展

Question

我想投入一些工作，但我对谷歌的“孤立世界”感到非常困惑。我进行了很多搜索，但找不到满足我需求的答案。工作流程:用户点击扩展图标 -> javascript 将在 DOM 树上搜索 div“xpto 并获取其内容 -> 使用此内容在新选项卡中进行谷歌搜索。

list .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:我完全是个菜鸟，所以如果我做错了，请不要责备我。

谢谢

Answer 1

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

程序化注入(inject)非常有用，尤其是当您不想将代码注入(inject)到每个匹配模式的页面时，例如:应该在用户单击浏览器操作按钮时注入(inject)代码。

我写了一个简单的例子来演示如何实现“程序化注入(inject)”:

首先需要添加一个后台页面，注册“浏览器 Action ”点击事件监听。

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

注册浏览器 Action 点击监听器(injector.js 是你搜索 DOM 并获取新标签页 google 搜索内容的脚本)。

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

background.html

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

注入(inject)器.js

alert("Programmatic injection!");

演示快照:

希望对您有所帮助。