首页 > 代码库 > chrome浏览器插件开发经验(一)

chrome浏览器插件开发经验(一)

最近在进行chrome浏览器插件的开发,一些小的经验总结随笔。

1、首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/overview.html

2、从chrome18开始往后,chrome浏览器插件开发的 manifest.json 文件中的 "manifest_version": 2 属性就必须被显式(固定)的声明了。

3、chrome插件开发,很大程度上需要chrome.* API 的支持,附上chrome历史版本的API更新记录:http://lmk123.duapp.com/chrome/extensions/whats_new.html

4、如果需要下载不同的chrome版本进行安装测试,推荐一个下载网址:http://www.mykurong.com/chrome/

5、为chrome网页添加右键选项:

  首先,需要在 manifest.json 文件中添加权限支持:

  "permissions": [

  ...

  "contextMenus",

  ...

  ]

  

chrome.contextMenus.create({
"title" : "菜单项文字",
"type" : "normal", //菜单项类型 "checkbox", "radio","separator"
"contexts" : ["frame"], //菜单项影响的页面元素 "anchor","image"
"documentUrlPatterns":["http://*.163.com/*"],//iframe的src匹配
"targetUrlPatterns" : ["http://*.163.com/*"],//href的匹配
"onclick" : changeSCHandler() //单击时的处理函数
});

6、插件通信:

  6.1 background.js 和 content_script.js 通信推荐使用 chrome.extension.sendRequest()、chrome.extension.onRequest.addListener(function(request, sender, sendRequest){}); 的形式。

  6.2 其他页面调用 background.js 里的函数和变量时推荐在其他页面使用 var backgroundObj = chrome.extension.getBackgroundPage(); if(backgroundObj){ backgroundObj.func(param); }的形式。

  6.3 如果插件运行中会有多个tab页同时打开和加载,则需要注意通信过程中使用 tab.id 参数,因为每个加载插件的tab页都会保留自己的一个 content_script.js 运行,所以和 content_script.js 通信时需要指定是向哪个tab页进行通信;获取当前打开的 tab 页的 id 可以使用 chrome.tabs.getSelected(function(tab){current_tab_id = tab.id;}); 的形式。

7、关于 xmlhttprequest

  在chrome插件中可能会用到ajax请求,以及跨域请求的出现,推荐使用 xmlhttprequest,会比较稳定。但使用 xmlhttprequest 会有一个不完善的地方,就是在 chrome 中,xmlhttprequest 请求的HTTP requestHeaders 头不包含 Referer 数据,如果需要这个字段就必须对 chrome 的 xmlhttprequest 请求进行监听和修改,具体如下:

  

首先,需要在 manifest.json 文件中添加权限支持:

  "permissions": [

  ...

  "webRequest", "webRequestBlocking",  //用于获取 xmlhttprequest 以及对 xmlhttprequest 进行 block 操作

  ...

  ]

然后使用如下方式:

var wR=chrome.webRequest||chrome.experimental.webRequest; //兼容17之前版本的chrome,若需要使用chrome.experimental,需要在 about:flags 中“启用“实验用。。API”
if(wR){
    wR.onBeforeSendHeaders.addListener(
        function(details) {
            if (details.type === ‘xmlhttprequest‘) {
                var exists = false;
                for (var i = 0; i < details.requestHeaders.length; ++i) {
                    if (details.requestHeaders[i].name === ‘Referer‘) {
                        exists = true;
                        
                        break;
                    }
                }
                if (!exists) {//不存在 Referer 就添加
                    details.requestHeaders.push({ name: ‘Referer‘, value: ‘http://www.yourname.com‘});
                }
                return { requestHeaders: details.requestHeaders };
            }
},
        {urls: ["https://*.google.com/*","http://*.google.com/*"]},//匹配访问的目标url
        ["blocking", "requestHeaders"]
    );
}

8、题外:如何在页面中插入包含透明图片的顶层div

var topDiv = document.createElement(‘div‘);
        topDiv.style.width=document.documentElement.scrollWidth+"px";
        topDiv.style.height=document.documentElement.scrollHeight+"px";
        topDiv.style.position="absolute";
        topDiv.style.left=0;
        topDiv.style.top=0;
        topDiv.style.zIndex = 999;
        var title = document.createElement(‘a‘);
        var img = document.createElement(‘img‘);
        img.src = "http://.../.../transparent.gif";
        img.setAttribute("width","100%");
        img.setAttribute("height","100%");
        title.appendChild(img);
        topDiv.appendChild(title);
        document.getElementsByTagName(‘body‘)[0].insertBefore(topDiv,document.getElementsByTagName(‘body‘)[0].childNodes[0]);

在document中创建和body同样宽度、高度的div,然后在其中添加透明图片,最后将div的zIndex设为最大,并添加到 body 的子节点序列中即可。

chrome浏览器插件开发经验(一)