如何將css應用於理想的頁面？

我正在編寫將改變我的瀏覽器谷歌佈局的擴展。當瀏覽器顯示google.com時，我的腳本使用外部css文件。並且它在我打開新標籤之前工作正常--css被清除。我怎樣才能匹配我的CSS只用於谷歌搜索頁面？如何將css應用於理想的頁面？

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); 
     } 
    } 
};

來源

2012-01-05 Castro

測試搜索頁面的特性，如特定的DOM元素或功能（例如'function rwt'）。 – 2012-01-05 16:14:44

patt_g.test（this.doc.location.href）返回true。如果false - 從所有頁面中刪除css規則。這是一個主要的籌碼 – Castro 2012-01-05 16:26:08

不要加載/每打開一個標籤時卸載CSS文件 - 添加用戶樣式表會一直把它應用到所有現有的標籤，卸載它會從所有選項卡中刪除。只需添加在您的分機加載樣式，並把樣式表中的CSS規則爲@-moz-document部分：

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

文檔：https://developer.mozilla.org/en/CSS/@-moz-document

來源

2012-01-05 20:11:19

謝謝弗拉基米爾 – Castro 2012-01-06 14:39:36

如何將css應用於理想的頁面？

回答

相關問題