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浏览器插件开发经验(一)的更多相关文章
- chrome浏览器插件启动本地应用程序
chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30| 分类: 浏览器插件|举报|字号 订阅 下载LOFTER我的照片书 | chrome的插件开发这里就 ...
- Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件
Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...
- chrome浏览器插件window resizer调试webapp页面大小
chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备
- 用Javascript编写Chrome浏览器插件
原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...
- 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取
web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...
- 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决!
百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...
- 强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...
- chrome浏览器插件的开启快捷键
用鼠标去打开chrome浏览器右上角的插件,总是感觉太麻烦,例如你想用有道词典的插件查一个单词的意思,用鼠标把有道插件打开,然后再回到键盘上敲单词,真的好麻烦.现在只要设置一下插件的快捷键就OK了. ...
- 15款Chrome浏览器插件让设计师告别拖延症
秋高气爽,分享一大波有效帮助设计师提高工作效率的Chrome浏览器扩展程序! 高效是另一种王道 无论是在工作中,还是在生活中,有些词我们说来就满满正能量,而另外一些话提起就很沮丧,后者如拖延症,前者如 ...
随机推荐
- 树莓派更改vnc分辨率
参考链接:https://raspberrypi.stackexchange.com/questions/56421/how-to-increase-resolution-on-latest-rasp ...
- uboot&kernel&system
- linux的进程1:rootfs与linuxrc
在内核启动的最后阶段启动了三个进程 进程0:进程0其实就是刚才讲过的idle进程,叫空闲进程,也就是死循环.进程1:kernel_init函数就是进程1,这个进程被称为init进程.进程2:kthre ...
- Tensorflow在CIFAR-10构建CNN
使用Tensorflow在CIFAR-10二进制数据集上构建CNN 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 Tensorflow机器学习实战指南 利用Tensorflow读取 ...
- 重构改善既有代码设计--重构手法16:Introduce Foreign Method (引入外加函数)&& 重构手法17:Introduce Local Extension (引入本地扩展)
重构手法16:Introduce Foreign Method (引入外加函数)你需要为提供服务的类增加一个函数,但你无法修改这个类.在客户类中建立一个函数,并以第一参数形式传入一个服务类实例. 动机 ...
- wampserver 虚拟主机
转载:http://blog.csdn.net/knight_quan/article/details/51830683 1.背景: 在进行网站开发的时候,通常需要以http://localhost或 ...
- 洛谷 Sorting a Three-Valued Sequence 三值的排序
Description 排序是一种很频繁的计算任务.现在考虑最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌序的时候. 在这个任务中可能的值只有三种1,2和3.我们用交换的 ...
- 2017ACM暑期多校联合训练 - Team 3 1005 RXD and dividing
题目链接 Problem Description RXD has a tree T, with the size of n. Each edge has a cost. Define f(S) as ...
- 快速幂取模_C++
一.题目背景 已知底数a,指数b,取模值mo 求ans = ab % mo 二.朴素算法(已知可跳过) ans = 1,循环从 i 到 b ,每次将 ans = ans * a % mo 时间复杂度O ...
- python初步学习-生成式、生成器、迭代器、装饰器
生成式 列表生成式 字典生成式 集合生成式 嵌套列表生成式 列表生成式 列表生成式是python受欢迎的语法之一,通过一句简洁的语法就可以对一组元素进行过滤,还可以对得到的元素进行转换处理.语法格式为 ...