Question

所以我正在创建我的第一个Chrome扩展程序（试用）

我觉得我很接近......但我真的不知道该怎么去谷歌才能得到我需要的答案。如果这是一个愚蠢的问题，我很抱歉。

基本上我要做的就是点击扩展名 - 附加HTML＆amp; CSS到body并运行jQuery函数。但从它的外观来看，我需要在清单中调用jQuery？我认为我已经完成了它仍然无法正常工作。

我的代码：

的manifest.json

{
  "name": "Title",
  "description": "Description",
  "version": "1.0",
  "browser_action": {
      "default_title": "Hover Title",
      "default_icon": "icon.png"
  },
 "content_scripts": [ {
    "js": [ "jquery-1.7.2.min.js", "background.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }],
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {

    (function ($) {
        $('body').append("Hello");
        alert("Hello");
        console.log("Hello");
    }(jQuery));

});

任何洞察我出错的地方都会非常有帮助！

谢谢！

Answer 1

Chrome extension architecture is simple，但这并不意味着可以在不学习的情况下编写代码。

有两种注入内容脚本的方法：

无条件地在所有指定的网址上，在这种情况下，清单中使用了"content_script"密钥，内容脚本通过runtime.sendMessage与后台网页进行通信。
仅当某些事件发生时，例如用户点击我们的工具栏图标，在这种情况下，我们只需要access the active tab的权限。

因此，在给定的情况下，我们会在之后附加图标点击处理程序和inject the code：

<强>的manifest.json ：

{
    "name": "Title",
    "description": "Description",
    "version": "1.0",
    "browser_action": {
        "default_title": "Icon Title",
        "default_icon": "icon.png"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["activeTab"],
    "manifest_version": 2
}

background.js （这是event page因为我们在清单中没有使用"persistent": true，所以请注意[全局]变量将在几秒钟不活动后丢失;相反，您应该使用chrome.storage API或HTML5 localStorage / sessionStorage /等等）：
```
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({file: "jquery-1.7.2.min.js"}, function(result) {
        chrome.tabs.executeScript({file: "content.js"}, function(result) {
        });
    });
});
```
content.js （代码runs in a sandbox因此无需使用IIFE隐藏全局变量
```
$('body').append("Hello");
alert("Hello");
console.log("Hello");
```

Chrome扩展程序 - 附加HTML＆amp;在扩展单击上运行jQuery函数

1 个答案: