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 的子节点序列中即可。
转载于:https://www.cnblogs.com/developer-ios/p/6502461.html
chrome浏览器插件开发经验(一)相关推荐
- Chrome浏览器插件Tab Groups Extension使用方法
谷歌浏览器最近新增加了标签分组功能,新的插件名称叫做Tab Groups Extension.Tab Groups Extension的主要功能是将网页标签分组进一步优化,使得用户能够自由地定义标签分 ...
- 10 款值得珍藏的 Chrome 浏览器插件
作者 | 沉默王二 责编 | 郭芮 Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间 ...
- 解除360个人图书馆文档禁止复制限制Chrome浏览器插件
360个人图书馆的禁止复制着实烦人,在百度的搜索排名又高经常会搜索出其内容,不得已之下写个Chrome浏览器插件解决这个问题,下载地址: https://download.csdn.net/downl ...
- Chrome浏览器插件Postman用法简介-Http请求模拟工具
在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件 ...
- 2021年10款优质Chrome浏览器插件推荐
Chrome插件像一个个小帮手,帮我们提升效率,完成一些有价值的事情.其实有很多这样的优质实用插件,很多人并不知道它们的存在,下面就特意为大家整理10款非常有用的插件. 1.哔哩哔哩助手:B站扩展程序 ...
- 使用chrome浏览器插件postman模拟post、get请求
使用chrome浏览器插件postman模拟post.get请求 postman为chrome浏览器的一个插件,用来模拟post请求,get请求等.可以在chrome浏览器里安装插件(前提是你得访问了 ...
- 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取
web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...
- Chrome浏览器插件导出与导入
一.Chrome浏览器插件导入 (一)将Edge浏览器插件导入Chrome 1.首先找到Edge浏览器插件安装路径: C:\Users\用户名\AppData\Local\Microsoft\Edge ...
- 如何查看chrome浏览器插件位置
文章目录 一.文章参考 二.问题描述 三.解决办法 一.文章参考 如何查看chrome浏览器插件位置 二.问题描述 最近在学习Vue3的语法知识,其中需要安装chrome开发调试插件,由于网络的原因, ...
最新文章
- Boost:构造一个流对象,任何发送到此流将标准输出
- SQLServer之创建显式事务
- 005. how is RFC to backend determined - maintenance view IWFNDV_MGDEAM
- 计算机中心防雷电安全措施,防雷电有哪些安全措施
- 中国宜坚持发展自主操作系统
- pthread_cleanup_push()/pthread_cleanup_pop()
- 从0开始做Windows Phone 7开发
- 详述一次大量删除导致MySQL慢查的过程
- 华侨大学计算机应用技术章亮,华侨大学学生综合素质测评成绩汇总表
- 数据分析用r还是python_想要从事数据分析,选择python还是R语言呢?
- 《MYSQL必知必会》—3~9.使用MySQL、检索数据列、排序检索数据列、过滤数据(WHERE子句、组合WHERE子句、通配符、正则表达式)
- 使用Automake,Autoconf生成Makefile
- PhoneGap + Dreamweaver 5.5 无法在模拟器中打开的问题
- python第三方库:使用Jieba对抓取的数据进行中文分词
- 前端使用cesium加载地球
- 【锂电】锂电工艺大全
- ElasticSearch快速入门
- 关于mac苹果电脑装win10系统发热严重的解决方法
- 我国羽绒制品在欧洲遭遇部分消费者抵制
- UDS 14229 -1 刷写34,36,37服务,标准加Trace讲解,没理由搞不明白