开发Firefox扩展实战—

www.l99.com

要维护16套主题的样式，并且保证浏览器兼容，实在是个枯燥乏味又无聊的事。每次改完样式，就要更换主题一个一个去检查。

比如当前页面为默认主题的首页，一系列的点击顺序是：更换主题->选择主题->下一页(50%的机会点击)->确认安装，15套主题更换完需要的点击次数为15*3 + 15/2 = 52。

如果提供选择主题的工具条，更换模板仅需要点击15次。正好也刚刚看完火狐扩展开发的官方文档，小小实践一下。在官方提供的helloWorld基础上改造。

1. 所需文件

helloWorld的扩展是加入到工具菜单中，点击选项弹出新窗口chrome://helloworld/content/hello.xul。这里不需要弹出新窗口，而且还要考虑窗口之间发送数据。故不用hello.xul和hello.js这两个文件。其实，最想做的是像web developer那样显示在状态条中，还要继续看相关的文档。所以干脆做得简单点，直接把内容写入当前页面。如图所示：

2.修改overlay.js

找到方法onMenuItemCommand，这是点击工具条中切换模板时调用的方法。

①获取当前页面信息，为了方便我引入了jquery，可是$("#")却取不到元素。放弃之。直接用document.getElementById("")仍然取不到元素。打印出来为null，打印window.location.href为chrome://helloworld/content/overlay.xul。难道还是浏览器本身的chrome，并不是当前页面。在这卡了很久。

继续查官方文档，使用content.document.title可以获得当前页面的title，可是仍然无法使用content.document.getElementById。放弃。

继续查官方文档，使用以下几句：

var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
var recentWindow = wm.getMostRecentWindow("navigator:browser");
var t = recentWindow ? recentWindow.content.document.location : null;

终于获得了正确的url，但不幸的是getElementById仍然为null。如此这般创建的节点var newWrapper = document.createElement("div");竟然也是HTMLObject XULElement，而不是DIVElement。幸好getElementsByTagName这个还能用。

② 把选择主题的HTML片段插入到body中，通过字符串拼接完成，recentWindow.content.document.body.innerHTML=“”。

③为每个button绑定事件。

本想使用hello.js写事件，再通过动态加载入当前页面，如下：

var jsWrapper = document.createElement("script");
jsWrapper.setAttribute('type','text/javascript');
jsWrapper.setAttribute('src','hello.js');
//jsWrapper.innerHTML = 'alert(55)';
alert(jsWrapper.innerHTML);

取不到hello.js,就如同两个隔离的环境，chrome中的hello.js无法加载到当前页面。通过innerHTML也不行。好吧，直接绑定事件吧。

       var wrapper = recentWindow.content.document.body.childNodes[0];var btnCollection =  wrapper.childNodes;for(var i = 0 ;i < btnCollection.length; i++){btnCollection[i].onclick = (function(i){return function(){$.get("http://www.l99.com/EditTemplet_install.action",{templetId:i+1},function(data){//window.reload();这种方法不能实现recentWindow.content.document.location.reload();setTimeout(function(){addOn();},2000);});}})(i)}

④更换主题的url为http://www.l99.com/EditTemplet_install.action?templetId=?通过ajax调用，成功后刷新当前页面。可是选择主题的HTML片段也没有了，只好延迟2s再插入一次。这个地方确实很不方便，页面刷新和跳转扩展就没了。不像google chrome，有个机制可以设置应用于哪些页面。

先这样吧，以后再改进。

开发Firefox扩展实战——切换主题相关推荐

Firefox扩展开发 Hello World！
今天尝试开发一个Firefox的扩展.虽然比较简单,网上也有很多教程,但是感觉一些教程写的比较麻烦,在初步的开发过程中并没有用到那些东西,于是自己把开发过程记录下来.我是根据Mozilla官方教程开发 ...
Firefox 扩展开发 install.rdf和chrome.manifest
现在我们以一个hello world扩展为例来说明Firefox 扩展的基本运行方式.先下载 Hello World extension,解压缩,下面假定路径是c:\helloworld. 设置fir ...
firefox扩展开发(二)：用XUL创建窗口控件
firefox扩展开发(二):用XUL创建窗口控件 2008-06-11 16:57 1.创建一个简单的窗口 <?xml version="1.0"?> <?xm ...
firefox扩展开发(四) ：更多的窗口控件
firefox扩展开发(四) : 更多的窗口控件 2008-06-11 17:00 标签盒子标签盒子是啥?大家都见过,就是分页标签: 对应的代码: <?xml version="1. ...
firefox扩展开发(八) ：控件激活
firefox扩展开发(八) :控件激活 2008-06-11 17:01 当我们用鼠标点击一个控件,或者用TAB键移动到一个控件上时,我们说这个控件被激活了(focus),离开这个控件时,我们说这 ...
提高firefox扩展开发效率
本文介绍一些技巧和开发扩展中使用的工具,主要参考:https://developer.mozilla.org/En/Firefox_addons_developer_guide的第五章(Chapter ...
直播短视频系统开发，动态切换主题色
直播短视频系统开发,动态切换主题色相关的代码: 点击按钮变量存储切换状态: override fun onClick(v: View?) {when (v?.id) {R.id.btn_theme1 ...
Android开发关于避免切换主题时免闪屏的几种方式
Android开发关于避免切换主题时闪屏的几种方式在activity中调用setTheme来切换夜间模式的方法可能大家有看过相关的文章了,但是调用setTheme设置的主题后界面并没有变化,这时需 ...
【系】微信小程序云开发实战坚果商城-云开发之商品信息和主题商品数据实现
第 3-8 课:云开发之商品信息和主题商品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES ...

开发Firefox扩展实战——切换主题

开发Firefox扩展实战——切换主题相关推荐

最新文章

热门文章