firefox - 页面 CSS 没有改变，什么不起作用？

Question

我正在通过 Mozilla Addon Builder https://builder.addons.mozilla.org构建一个 firefox 插件

我开始非常基础，我认为它不会比将 google.com 更改为红色更简单。我让 css 更改了 body、html 和 div 并添加了重要信息，因此我可以确定如果样式表显示，它会将背景更改为红色，并覆盖当前 css。

但是，当我激活它（通过安装插件的测试按钮）时，什么也没有发生。CSS 不会注入到页面中。

这是扩展的样子：

这是代码：

main.js

var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

 pageMod.PageMod({
  include: "*.google.com/*",
  contentStyleFile: data.url("data/style.css")
 });

样式.css

html, body, div {
    background: red !important;
}

我还尝试使用以下网址，但这些网址都不起作用：

• http://google.com/ *
• https://google.com/ *
• http://www.google.com/ *
• https://www.google.com/ *
• http://google.com/
• https://google.com/
• http://www.google.com/
• https://www.google.com/

我还尝试将以下位置更改为 style.css，这也没有任何区别：

• 样式.css
• 数据/样式.css
• ../data/style.css

我还尝试从 data 和 pagemod 变量中删除 sdk/，但这也不起作用。

为什么它不起作用，我该如何解决？

Answer 1

匹配模式只包含一个*.

该模式"*.google.com"与您列表中的所有 Google 网址匹配。匹配模式也可以是正则表达式。你可以匹配http://google.ie和所有其他google.*的

pageMod.PageMod({
  include: /.*\/(\/\w*\.)?google\.[A-Za-z]{2,3}\/.*/,
  contentStyleFile: data.url("style.css")
});