Javascript 如何将css应用于所需页面?

Javascript 如何将css应用于所需页面?,javascript,firefox,firefox-addon,xpi,Javascript,Firefox,Firefox Addon,Xpi,我正在编写扩展,它将改变谷歌在我的浏览器中的布局。 当浏览器显示google.com时,我的脚本使用外部css文件。在我打开一个新标签之前,它工作得很好——css被清除了。我怎样才能只为谷歌搜索页面匹配css window.addEventListener("load", function() { myExtension.init(); }, false); var myExtension = { init: function() { var appcontent = docume

我正在编写扩展,它将改变谷歌在我的浏览器中的布局。 当浏览器显示google.com时,我的脚本使用外部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);
        }
    }
};

不要每次打开选项卡时都加载/卸载CSS文件-添加用户样式表将始终将其应用于所有现有选项卡,卸载它将从所有选项卡中删除它。只需在加载扩展时添加样式表,并将样式表中的CSS规则放入
@-moz文档
部分:

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

文档:

测试搜索页面的特征,例如特定的DOM元素或函数(
函数rwt
),patt_g.Test(this.doc.location.href)返回true。如果为false-从所有页面中删除css规则。这是一个主要的问题