javascript - 基于 "matches"在 content_scripts 中运行不同的脚本

Question

我刚刚开始使用 JavaScript，正在尝试修改 MDN 教程中的脚本，Your First WebExtension

我正在尝试在网页周围绘制红色或蓝色框，具体取决于它是 http://还是 https://。但是，只会运行一个脚本。

manifest.json 是这样的:

{

  "manifest_version": 2,
  "name": "HTTPS Detect",
  "version": "1.0",

  "description": "Draws a blue border around HTTPS protected websites. Non-HTTPS sites are given a red border, indicating they do not provide encryption.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
	
      "matches": ["https://*/*"],
      "js": ["httpsdetect.js"],
      "matches": ["http://*/*"],
      "js": ["nohttps.js"]
      
	}
	  
	]
  
 }

httpsDetect.js如下:

document.body.style.border = "5px solid blue";

nohttps.js 是:

document.body.style.border = "5px solid red";

Answer 1

content_scripts key 是一个对象数组(每个对象都包含一个强制 matches 键)，而不仅仅是具有相同键的多个副本的单个对象。按照您的方式，同一个对象中有两个 matches 和两个 js 键。这将被解释为文件中稍后覆盖先前 key 的 key 。

对于每个匹配，它应该是数组中的不同对象。您的 manifest.json 可能如下所示:

manifest.json:

{

  "manifest_version": 2,
  "name": "HTTPS Detect",
  "version": "1.0",

  "description": "Draws a blue border around HTTPS protected websites. Non-HTTPS sites are given a red border, indicating they do not provide encryption.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["httpsdetect.js"]
    },
    {
      "matches": ["http://*/*"],
      "js": ["nohttps.js"]
    }
   ]
 }

或者，假设您只加载一个文件，您可以将同一个 JavaScript 文件加载到 http 和 https 页面中，并根据与 http 或 https 匹配的 URL。如果某些代码在两个脚本之间共享，那么这样做可能会更有效(或者您可以将共享代码放在加载到两个脚本中的文件中，同时将包含非共享代码的单独文件加载到每个脚本中) )。在这种情况下，您可以使用单个 match pattern匹配 matches 数组中的两个或多个匹配模式。