望ましいページのためだけにCSSを適用するには？

Question

私はブラウザでGoogleのレイアウトを変更する拡張機能を書いています。 ブラウザがgoogle.comを表示しているときに、外部のCSSファイルを使用するスクリプト。そして、新しいタグを開く前にうまくいきます--ssssはクリアされます。どのようにして私のCSSをGoogle検索ページにのみ一致させることができますか？

window.addEventListener("load", function() { myExtension.init(); }, false); 

var myExtension = { 
    init: function() { 
    var appcontent = document.getElementById("appcontent"); // browser 
    if(appcontent) 
     appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true); 
    var messagepane = document.getElementById("messagepane"); // mail 
    if(messagepane) 
     messagepane.addEventListener("load", function(event) { myExtension.onPageLoad(event); }, true); 

    }, 

    onPageLoad: function(aEvent) { 
    var patt_g=new RegExp('google.com','g'); 
    Firebug.Console.log('Hide my ass started'); 
    this.doc = aEvent.originalTarget; // doc is document that triggered "onload" event 

    CSSProvider.init(); 
    if(patt_g.test(this.doc.location.href)) { 
     Firebug.Console.log('Hide my ass -> in'); 
     CSSProvider.loadCSS(); 
    } else { 
     Firebug.Console.log('Hide my ass -> out'); 
     CSSProvider.unloadCSS(); 
    } 

    // add event listener for page unload 
    aEvent.originalTarget.defaultView.addEventListener("unload", function(event){ myExtension.onPageUnload(event); }, true); 
    }, 

    onPageUnload: function(aEvent) { 
    Firebug.Console.log('Hide my ass deleted'); 
    if(patt_g.test(this.doc.location.href)) { 
     Firebug.Console.log('Hide my ass -> out'); 
     CSSProvider.unloadCSS(); 
    } 
    } 

}; 


var CSSProvider = { 
    init: function(){ 
     this.sss = Components.classes["@mozilla.org/content/style-sheet-service;1"] 
        .getService(Components.interfaces.nsIStyleSheetService); 
     this.ios = Components.classes["@mozilla.org/network/io-service;1"] 
         .getService(Components.interfaces.nsIIOService); 
     this.uri = this.ios.newURI("chrome://hms/content/style.css", null, null); 
     this.isRegistered = this.sss.sheetRegistered(this.uri, this.sss.USER_SHEET) 
    }, 
    loadCSS: function(){ 
     if(!this.isRegistered){ 
      this.sss.loadAndRegisterSheet(this.uri, this.sss.USER_SHEET); 
     } 
    }, 
    unloadCSS: function(){ 
     if(this.isRegistered){ 
      this.sss.unregisterSheet(this.uri, this.sss.USER_SHEET); 
     } 
    } 
}; 

Answer 1

は、CSSファイル]タブが開かれるたびにロード/アンロードしない - ユーザースタイルシートは常に、それはすべてのタブから削除されますアンロード、既存のすべてのタブに適用されます追加します。単純にスタイルシートあなたの拡張機能の負荷を追加し、@-moz-documentセクションにスタイルシートでのCSSルールを置く：

@-moz-document domain(google.com) 
{ 
    ... 
} 

ドキュメント：そのような特定のDOM要素や機能などの検索ページの特性、用https://developer.mozilla.org/en/CSS/@-moz-document