Archive for Firefox
Posted in Firefox @ 2011.09.09 (周五) 11:27 上午 by 一兮
Firefox 的Add-on SDK (jetpack)从1.0rc2版本开始后，对content script的机制有个重要的改动，现在不能在content script中直接来操作页面的dom 和监听DOM事件
但诡异的是，这个改动它并没有写到它的开发文档里面。虽然可能的原因是使用到这个用处的人并不多或者jetpack本就不提倡这样使用。
因为在Read Later Fast / Quick Note / Awesome Screenshot for firefox 都使用到了这些东西，从而导致使用新的SDK build后的一些功能失效。
最初以为是BUG，去mozilla的bug系统搜时发现果然有这么一个说法：
https://bugzilla.mozilla.org/show_bug.cgi?id=660780
后来看到release note中确实提到了关于content script的改动：
We’ve changed the way content scripts interact with web pages, in order to improve security.
Previously, content scripts that accessed DOM objects in the page would frequently access the same objects as those being accessed by the page. This gives rise to two problems:
- many changes to the page would be visible to the page, making it obvious to the page that an add-on was modifying it.
- a malicious page might redefine functions and properties of them so they don’t do what the add-on expects. For example, if a content script calls
document.getElementById() to retrieve a DOM element, then a malicious page could redefine its behavior to return something unexpected.
To deal with these problems, DOM objects like the global window object are now implemented in a way that ensures that content scripts that access those objects will get the native implementations of their properties and methods.
Content scripts that modify those DOM objects will modify a proxy object instead of the real object.
大致是说，为了安全性考虑云云，在content script与DOM交互的时候用到一个中间的代理。
但这个代理是什么却没有明确的说道，你需要去参考那个bug页面阅读后才明白是怎么回事。
简单点说，就是content script使用的页面的window对象不再是当前的window对象，而使用了一个代理的的 unsafeWindow 对象
如果这个变动导致你在content script中使用的document 或者jquery函数失效的话，你可以在content script中加上这么一句：
1
| var document=unsafeWindow.document,$=unsafeWindow.$; |
Tags:add-on sdk firefox jetpack 插件 插件开发 511 views With
Posted in Chrome, Firefox, javascript @ 2011.07.27 (周三) 3:21 下午 by 一兮
最近一个插件的功能需求，需要在第三方的ajax载入回来的内容中通过contentscript来插入一些我们的内容。
在什么时候去插，这是个很麻烦的问题。
因为要使插入这个动作生效，那在执行插入时，被插入的DOM部分一定是已经load完成的。之前试过第一次插入时，通过setTimeout来循环判断DOM是否已经在页面上，然后在进行插入。这个办法解决的第一次时候能够正常插入，但是在页面不刷新的情况下，又一次ajax载入的内容就不会生效了。
想到了去捕捉ajax完成后的触发某一事件，但好像并没有哪一种方法能够实现，倒是让我发现了 DOMNodeInserted 事件。
DOMNodeInserted 从字面理解比较简单，就是每次页面有DOM插入时都会触发。
运用这个事件，提到的需求就变的简单了，我只要在每次触发这个事件获取到的event.target，判断其DOM内容是否有我将要插入部分的结构特征然后来进行插入就行了。
与这个事件成对的还有一个 DOMNodeRemoved 事件。
有兴趣的话，可以在W3C中查找相关资料。当然这个时间IE是不支持的，在IE下要实现开头提到的需求，估计还是得要用setTimeout来循环监听。
Tags:DOMNodeInserted 技巧 672 views With
Posted in Firefox @ 2011.06.21 (周二) 3:36 下午 by 一兮
因为quick note for firefox在外面的版本不兼容firefox5，是因为使用1.04b版本的add-on SDK build的，而使用1.05b版本就可以与firefox5兼容，但由于1.05b版本中有个jetpack确定的插件reload机制的BUG，所以暂时没有采用。
而最近收到邮件说jetpack 1.0 准备正式发布，去网站上下载回来后，测试发现个很大的问题，原先的pageMod不能向resouce://打头的页面插入contentscript，而这个的结果便是导致我们目前的所有awesome screenshot ,quick note,read later fast 的firefox版本功能完全失效。
目前还不知道是因为安全原因jetpack这样做还是因为BUG的原因
Tags:jetpack 652 views With
Posted in Firefox @ 2011.05.23 (周一) 9:32 下午 by 一兮
从firefox4发布之前开始使用jetpack来开发firefox add-on到现在已经有几个月的时间，在最初移植chrome的Quick Note和Read Later Fast时，在传统的XUL方式和新的jetpack开发之间选择了jetpack，原因有下几点：
1，传统的XUL开发add-on的方式打开资源页面是为chrome://的前缀，而这个前缀不能使用indexdDB来储存数据。
2，新的jetpack方式比较易上手。
3，以为使用jetpack这个mozilla比较推荐的SDK开发出的ADD-on会在firefox4发布时的那个评选10个优秀插件会有更高的权重。
随着另一个同事负责的一个新的firefox add-on的项目开发，那位同事对firefox的插件的开发经验很丰富，diigo历来的firefox toolbar就是他开发的，这个新项目和Read Later Fast和Quick Note的需求很近，单页面，本地储存数据。
他没有使用jetpack来开发，依然使用传统的XUL的创建方法，通过一些方法自己创建了一个resouce://的页面来使用本地储存indexdDB技术。
想想我们之前可能是因为firefox4要发布，时间压力很大，所以没研究透就使用jetpack来开发。随着后续开发的需求越来越多，才发现jetpack很难完成我们需要的需求。
比如说就那个简单的定义button，用传统的XUL的方式就是那么几个XUL标签，但在jetpack中实现起来需要写很长的一段代码来实现（这个方法我在前面的博文提到过）。
就像现在Firefox版本的Quick Note中，作为jetpack的lib库下编写的JS中，一共有530行左右代码，其中大概有150行的功能是实现ajax请求中转和contentscript与add-on proccess通信，其余的近400行代码都是在定义UI上，主要就是右上角的button和sidebar。而这个UI 如果用XUL的方式来做的话，大概就是近10行左右的xul标签就能实现。而且因为一些必须要的需求，不得不去写重复的代码，因为XPCOM中调用的方法无法直接使用我main.js中的方法。
因为大部分都是使用jetpack来调用XPCOM部分来操作，且通过动态插入document的方法来自定义化UI，会产生什么样的副作用或者BUG，现在还未知，虽然已经解决了很多已知的问题，比如disable插件，自定义添加的UI不消失等问题。
现在回想起来，当初应该更深入的了解firefox add-on的开发机制，而应该选用传统的XUL的方式来开发。
而对于jetpack，真的看不出有什么能让开发者都去使用的特点。仅仅是上手容易？但限制太高。
但现在已经使用了jetpack的方式来开发，只能一条路走到黑。
不过这折腾的写法，也算是走在最前沿了。
Tags:Add-on firefox jetpack 727 views With
Posted in Firefox, javascript @ 2011.04.23 (周六) 2:17 下午 by 一兮
监听输入区域的改变，这里推荐一个jquery的插件：
http://www.zurb.com/playground/jquery-text-change-custom-event
这个可以监听到内容输入区域内容的实时变化，但是有个小小的不足，就是不能监听到firefox下 设置了contenteditable=”true” 的DIV区域的拖拽文字变化。
后来针对firefox下的这种情况写了个简单的处理函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="content" contenteditable="true" style="width:500px;height:30px;background:#c1c1c1;"></div>
<script>
var text="";
function binchange(){
var t= $('#content').html();
if(t!=text){
console.log('change',text+' to '+t);
text = t;
}
setTimeout('binchange()',3000)
}
binchange();
</script> |
可以控制settimeout部分的时间参数来控制探测的时间。
Tags:HTML5 jQuery 482 views With
