Question

我正在研究如何使用Mozilla网站上的simple example创建浏览器扩展，该扩展会在从“ mozilla.org”或其任何子域加载的所有页面上添加红色边框。如何为数百个不同的URL设置不同的样式？

我尝试向manifest.json文件添加新样式，并且该样式有效（请参见content_scripts部分）：

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a solid red border to all webpages matching mozilla.org.",
  "icons": {
    "48": "icons/border-48.png"
  },

  "applications": {
    "gecko": {
      "id": "borderify@mozilla.org",
      "strict_min_version": "45.0"
    }
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*", "*://*.google.com/*"],
      "js": ["borderify.js"]
    },
    {
      "matches": ["*://*.opera.com/*", "*://*.stackoverflow.com/*"],
      "js": ["borderify_green.js"]
    }
  ]

}

这里的文件borderify.js和borderify_green.js包含样式规则：

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

和

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

分别。

但是，如果我需要为数百个URL设置不同的样式？我想我不能为此目的使用manifest.json文件，而需要在单独的文件中设置这些样式。

如何以适当的方式为数百个URL设置这些样式？

Answer 1

在您的manifest.json中，查看content_scripts部分，尤其是其中的两个对象。

这些对象的matches属性告诉您的扩展程序应执行哪些URL。

要在每个页面上执行特定代码：

因此，要在每个站点上执行代码（仅作为示例），请将"*://*.mozilla.org/*", "*://*.google.com/*"]更改为["*://*"]。

*充当“任意”。对于您的扩展，*://*.mozilla.org/*的意思是：“在任何目录的mozilla.org的任何子域上的任何协议上执行代码。”

*://*的意思是“在任何域的任何协议上执行代码。

要在不同的URL上执行不同的代码：

在这种情况下，恐怕您需要手动将每个特定的情况添加到清单中：

{
   "matches": ["*://*.mozilla.org/*"],
   "js": ["borderify.js"]
},
{
   "matches": ["*://*.opera.com/*"],
   "js": ["borderify_green.js"]
},
{ 
   "matches": ["*://*.somedomain.com/*"],
   "js": ["some_file.js"]
}

或者，您可以在每个页面上执行一些代码，以检查您所在的页面并加载该页面的相关.js文件。

如何在浏览器扩展程序中为数百个不同的URL设置不同的样式？

1 个答案: