不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
Fehelper升级manifestVersion到2.0 进入全屏
line

manifest_version 2.0刚出来的时候就准备对Fehelper做一次升级,不过由于项目忙等各种原因,一直没抽出时间来。

不过,现在是不升级都不行了,要不然被chrome官方强行下架,就相当于是白做了!

这是官方的schedule:

http://developer.chrome.com/extensions/manifestVersion.html

Manifest version 1 support schedule

August 2012

  • The Web Store will block creation of new manifest version 1 items.

  • The Web Store will allow updates to existing manifest version 1 items.

March 2013

  • The Web Store will block updates to manifest version 1 items on March 4th, 2013.

April 2013

  • Chrome 27 Beta will stop packaging manifest version 1 items (or loading them for development).

  • The Web Store will remove manifest version 1 items from the wall, search results, and category pages.

  • Notice emails will be sent to all developers with manifest version 1 items still in the store reminding them that these items will be unpublished and providing update instructions.

July 2013

  • The Web Store will unpublish all manifest version 1 items.

  • Final notice emails will be sent to developers with manifest version 1 items still in the Web Store.

  • Chrome will continue to load and run installed manifest version 1 items.

September 2013

  • Chrome will stop loading or running manifest version 1 items.

这个日程安排的挺吓人啊!

manifestVersion 1 和 manifestVersion 2还是有非常多地方不一样的地方,manifest.json文件的修改倒是简单,主要是js代码的修改,会比较费神。


1、inline-script不再支持,html代码就是纯html,inline-script都得改成script:src

2、原来的js代码中有eval,有new Function,有setTimeout;以前加的Google Analytics也不能正常加载,怎么办,改manifest.json文件中的CSP:

"content_security_policy": "script-src 'self' https://ssl.google-analytics.com 'unsafe-eval'; object-src 'self'"

3、所有的sendRequest都得改成sendMessage,onRequest都得改成onMessage,要不然没法搞定消息机制

4、sendMessage方法中的callback没有执行,怎么回事?

是的,得保证onMessage这样写:

*.onMessage.addListener(function(req,params,callback){
     // TODO
     callback({});
     // 保证消息通道一直open,否则resp执行就会失败!
     return true;
});

5、代码中有多处通过chrome.extension.getURL('fe-48.png'),但是发现图片都没有显示出来,怎么回事?

是的,又是安全问题,又得修改manifest.json,加上web_accessible_resources即可:

"web_accessible_resources": [
    "static/img/grid.png",
    "static/img/fe-18.png",
    "static/img/fe-48.png",
    "static/img/fe-128.png",
    "static/css/fe-helper.css",
    "static/vendor/jquery-ui-1.8/css/jquery-ui-1.8.16.custom.hot_datauri.css"
]

6、页面上非得跨站获取数据,比如请求 http://example.com/a.js ,怎么办?

通过script不能加载这样的js,CSP不允许,而且CSP中也只允许配置chrome-extensions:// 或者 https:// 这样的策略,其他的不行!

不过,好在background中可以跨站加载内容,所以可以通过消息机制,content-scripts向background发送Message,background中通过ajax load跨站内容,将数据回传给content-scripts,同时在content-scripts中eval(responseData),以此解决问题。


下面这个方法是我在FeHelper的background中用来异步加载数据用的,也许对有需要的人来说有用,share一下吧:

/**
 * 通过这个方法来读取服务器端的CSS文件内容,要这样做,前提是在manifest.json中配置permissions为:http://
 * @param {String} link 需要读取的css文件
 * @param {Function} callback 回调方法,格式为:function(respData){}
 * @config {Object} respData 输出到客户端的内容,格式为{success:BooleanValue,content:StringValue}
 * @return {Undefined} 无返回值 
 */
var _readFileContent = function(link,callback){
    //创建XMLHttpRequest对象,用原生的AJAX方式读取内容
    var xhr = new XMLHttpRequest();
    //处理细节
    xhr.onreadystatechange = function() {
        //后端已经处理完成,并已将请求response回来了
        if (xhr.readyState === 4) { 
            //输出到客户端的内容,格式为{success:BooleanValue,content:StringValue}
            var respData;
            //判断status是否为OK
            if (xhr.status === 200 && xhr.responseText) {
                //OK时回送给客户端的内容
                respData = {
                    success : true, //成功
                    type : FILE.LINK,   //<link>标签
                    path : link,    //文件路径
                    content : xhr.responseText  //文件内容
                };
            } else {    //失败
                respData = {
                    success : false,    //失败
                    type : FILE.LINK,   //<link>标签
                    path : link,    //文件路径
                    content : "FcpHelper can't load such file." //失败信息
                };
            }
            //触发回调,并将结果回送
            callback(respData);
        }
    };
    //打开读通道
    xhr.open('GET', link, true);
    //设置HTTP-HEADER
    xhr.setRequestHeader("Content-Type","text/plain;charset=UTF-8");
    xhr.setRequestHeader("Access-Control-Allow-Origin","*");
    //开始进行数据读取
    xhr.send();
};

FeHelper最新版本:2.0 ,扩展地址

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line