Google Chrome扩展程序包括Jquery和另一个自定义javascript文件

Question

我是制作Chrome扩展程序的新手。 所以我不知道从哪里开始。 试图寻找答案，但他们不回答我的。

因此，基本上，每当用户单击我的扩展程序图标时，我都需要同时执行JQuery和我自己的自定义javascript文件（customfile.js）。 该定制文件将使用JQuery文件中的JQuery函数来调用ajax api。

这是我的manifest.json。

{
  "manifest_version": 2,

 "name": "Example",
  "description": "Example",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["jquery-3.2.1.min.js","customfile.js"],
    "persistent": false
  },
     "content_scripts": [ {
    "js": [ "jquery-3.2.1.min.js", "customfile.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

由于某些原因，一些开发人员忽略了“背景”，而另一些则忽略了“ content_scripts”。 哪个正确，还是我都需要？

另外，我已经阅读了有关程序注入的信息。 我的代码是否正确，只在需要时才运行两个文件？ 我的customfile.js或jquery.js放在哪里？

chrome.tabs.executeScript(null, { file: "jquery-3.2.1.min.js" }, function() {
chrome.tabs.executeScript(null, { file: "customfile.js" });
});

Answer 1

如果要在网页中插入代码，则需要设置content_scripts属性或使用chrome.tabs.executeScript 。 似乎您并不需要它，只需要一个后台脚本即可。

为了响应图标单击，请将此侦听器添加到您的背景脚本之一：

chrome.browserAction.onClicked.addListener(function(){
      ....
});

在这里您可以找到清单的文档。 它说明清单文件中的每个属性的作用。