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

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 键是一个对象数组（每个对象都包含一个必需的 matches 键），而不仅仅是具有相同键的多个副本的单个对象。按照您的方式，您在同一个对象中有两个 matches 和两个 js 键。这被解释为文件中稍后覆盖先前密钥的密钥。

对于每个 matches 它应该是数组中的不同对象。您的 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 页面，并根据URL 匹配 http 或 https。如果某些代码在两个脚本之间共享，那么这样做可能会更有效率（或者您可以将共享代码放在一个文件中，该文件被加载到两个脚本中，同时将一个单独的文件与非共享代码加载到每个脚本中） ).在这种情况下，您可以使用匹配两者的单个 match pattern 或 matches 数组中的多个匹配模式。

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

run different scripts in content_scripts based on "matches"

javascript

firefox-addon

firefox-addon-webextensions