3
25
2014
0

火狐开发者工具、Object.watch 以及地址栏图标

本文来自依云's Blog,转载请注明。

之前通过 userChrome.js 脚本把火狐的地址栏图标弄回来了,但是一直有这么个问题:打开一个会自动跳转的标签页,比如 t.co 或者登陆状态下的 Google 搜索结果时,首先会显示跳转前的网站的图标(这没问题),然后开始载入新页面了(这问题也不大),然后新页面是使用 HTTPS 的(比如 MDN),于是就会看到地址栏图标后边已经变成绿色、显示出了站点信息(如「Mozilla Foundation (US)」),但是图标仍旧是跳转前的图标

经过探索,我发现火狐在载入新页面时并不会及时更改网站的图标(即该 tab 对象的.image属性;大概是因为默认情况下,即标签页里那个图标,它会被「载入中」的图标取代),但是其它信息都会及时更改,这才造成了不一致。既然这段时间取不到网站的图标,那么用默认图标好了。但问题是,怎么知道地址栏的 URL 已经改变了呢?

我试过在urlbar上监听change事件。Firebug 在调试chrome://browser/content/browser.xul页面时说会有这么个事件,但是真正在 chrome 里运行时却发现没有这样的事件被触发。

还想到了通过 Object.watch 方法要监听tab.linkedBrowser.currentURI属性的更改,但是好像也没有被调用。也许那个 nsIURI 对象一直在那里,只是它的值在变而已。

期间还试过 addProgressListener。大概是用法不对,无果。

后来结合了以上两个方案,决定监听urlbar.value的更改。这下终于好用了。有点小坑的是,因为一直在尝试各种方案,没仔细看文档,结果没注意注册到.watch方法中的函数要返回实际要设置的属性值,把火狐地址栏搞坏掉了……

在调试过程中,浏览器控制台(取代了以前的「错误控制台」,快捷键还是Ctrl-Shift-J)比「代码片断速记器」好用(它实际上是火狐自带调试工具中的「Web 控制台」运行在 chrome 上的版本):

火狐的「浏览器控制台」

  • chrome 脚本中的console.log等日志会记录在浏览器控制台,并且可以按关键字过滤(比如我今天一直在用的userChrome
  • 浏览器控制台支持 Tab 补全
  • 代码片断速记器每次打开之后需要手动切换「在浏览器环境中执行」
  • 代码片断速记器中不支持选择即复制、中键点击即粘贴功能,不支持 GTK 自定义的编辑快捷键
  • 浏览器控制台中直接记录对象的话,点击之后会出现和代码片断速记器Ctrl-i快捷键一样的「对象查看器」

不过浏览器控制台不支持将日志中的对象直接在脚本中使用(Firebug 支持)。

哦还有,MozRepl 在开启 chrome 调试的时候,是连接到最后一个有焦点的火狐窗口的(而不一定是chrome://browser/content/browser.xul这个)。期间搞错了一次,发现里边竟然连gBrowser变量都没有 -_-|||

最后,辛辛苦苦接着出来的新版代码(其实没改多少):

if(location == "chrome://browser/content/browser.xul"){

  var eTLDService = Components.classes["@mozilla.org/network/effective-tld-service;1"]
                    .getService(Components.interfaces.nsIEffectiveTLDService);

  function updateIcon(event){
    var tab = event.target;
    if(tab != gBrowser.selectedTab){
      return;
    }
    var icon = tab.image || 'chrome://mozapps/skin/places/defaultFavicon.png';
    var identity = document.getElementById('identity-box');
    if('chromeUI'.indexOf(identity.className) != -1){
      // already has a pretty icon as list-style-image
      icon = '';
    }
    console.log('updateIcon', icon, tab.linkedBrowser.currentURI.spec, event);
    document.getElementById('page-proxy-favicon').src = icon;
    if('verifiedDomain'.indexOf(identity.className) != -1){
      var identityLabel = document.getElementById('identity-icon-labels');
      identityLabel.collapsed = false;

      var domain;
      try{
        domain = eTLDService.getBaseDomain(tab.linkedBrowser.currentURI);
      }catch(ex){ // NS_ERROR_HOST_IS_IP_ADDRESS
        domain = tab.linkedBrowser.currentURI.host;
      }

      document.getElementById('identity-icon-label').value = domain;
    }
  }

  var container = gBrowser.tabContainer;
  // includes TabSelect (.selected is modified)
  container.addEventListener("TabAttrModified", updateIcon, false);
  document.getElementById('urlbar').watch('value', function(prop, oldval, newval){
    console.log('urlbar value changed to ' + newval);
    document.getElementById('page-proxy-favicon').src = 'chrome://mozapps/skin/places/defaultFavicon.png';
    return newval;
  }, false);

  })();
}
Category: 火狐 | Tags: 火狐 userChrome | Read Count: 4730

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

部分静态文件存储由又拍云存储提供。 | Theme: Aeros 2.0 by TheBuckmaker.com