firefox - ページの CSS が変更されていません。何が機能していませんか?

Question

Mozilla Addon Builder https://builder.addons.mozilla.orgを使用して Firefox アドオンを構築しています。

私は本当に基本的なことから始めています。google.com を red に変更することほど簡単なことはないと思います。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;
}

また、次の URL を使用してみましたが、いずれも機能しませんでした。

• 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
• データ/style.css
• ../データ/style.css

また、data および pagemod 変数から sdk/ を削除しようとしましたが、それも機能しませんでした。

なぜ機能しないのですか?どうすれば修正できますか?

Answer 1

一致パターンには が 1 つだけ含まれます*。

このパターン"*.google.com"は、リスト内のすべての Google URL に一致します。一致パターンは正規表現にすることもできます。と他のhttp://google.ieすべてのものを一致させることができますgoogle.*

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