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 的子节点序列中即可。

时间: 03-04

chrome浏览器插件开发经验(一)的相关文章

使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

本文标签: WebScraper Chrome浏览器插件 网页数据的爬取 使用Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬虫中的登陆.验证码.异步加载等复杂问题. Web Scraper插件 Web Scraper 官网中的简介: Web Scraper Extension (Free!)Using our extension you can create a plan (sitemap) how a web site

chrome浏览器插件启动本地应用程序

chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30|  分类: 浏览器插件|举报|字号 订阅 下载LOFTER我的照片书  | chrome的插件开发这里就不多讲了,本篇文章只讲如何调用谷歌浏览器的api启动本地的程序并与之通信 要启动本地的应用插件需要包括两部分的内容: 1)安装到浏览器的插件部分 2)放置在本地的json文件 第一部分就跟普通的谷歌浏览器插件是一样的,包括两个必须的文件: 1)background.js(名字不一定为background......

2016-4-12 FQ记录(chrome浏览器插件FQ试用)

chrome浏览器FQ简单记录 由于最近踏入了WEB开发的旅程,所以昨天想找一个免费的vpnFQ查阅wiki资料和使用Google搜索.蓝灯在MAC还可以用,但是windows就不是那么给力.但是Lantern的贴吧依然给力,昨天不经意间又发现了新的FQ方法.就是使用她已经配置好的chrome进行FQ,虽然chrome的版本才是36,最新的已经50+.但是我问过lz,她说升级可以保存插件,当然我还未升级,你们升级了可以告诉我下哈. 废话不多说,上地址 http://tieba.baidu.com

chrome浏览器插件推荐——Vimium 篇

Vimium 是chrome底下的一个插件,所有chrome浏览器或者是基于chrome内核的浏览器(比如我用的Vivaldi)都可以使用这个插件.它提供了大量快捷键来方便键盘党浏览网页.目前在Chrome网上商店已经有3000+的好评了,基本都是五星好评! 其中 f 快捷键可以标识页面中所有可以点击的元素简直属于黑科技范畴. 当然,一次性记忆大量快捷键是不科学的.值得一提的是,Vimium的大量快捷键和Vim重合,本人没有用过vim(只知道insert那种).大大方便了使用者类比记忆快捷键.

15款Chrome浏览器插件让设计师告别拖延症

秋高气爽,分享一大波有效帮助设计师提高工作效率的Chrome浏览器扩展程序! 高效是另一种王道 无论是在工作中,还是在生活中,有些词我们说来就满满正能量,而另外一些话提起就很沮丧,后者如拖延症,前者如事半功倍,在节奏快.时间少的现实面前,高效办公往往意味着更多的可能.当我们打开电脑,通过浏览器来协助我们的工作时,那么显然花在浏览器上的时间越短,越有利于工作. 正是因此,阿随君就分享12枚常用的Chrome浏览器的扩展程序,集中精力,告别拖延症,走上高效办公之路. 爱用chrome浏览器的小伙伴求

chrome浏览器插件 Octotree 让你浏览GitHub的时候像IDE 一样提供项目目录

GitHub 作为代码托管平台,竟然没有提供项目目录,方便用户在线快速浏览项目结构.所以,在线分析项目源码就会变得很繁琐,必须一层一层点击,然后再一次一次地向上返回.要知道,本来 GitHub 网站在中国区的访问就已经很慢了.最无奈的做法就是,下载到本地,再使用 vs 等编辑器打开. Octotree 作为 Chrome 浏览器的一款插件,刚好解决这个使用痛点.他能够像 IDE 一样提供项目目录,快捷导航,方便浏览.同时支持 GitHub 和 GitLab 两个常用的代码托管网站.更贴心的是,你

nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录

最近任务不忙,有时间了看一下Chrome插件相关的东西,于是想用nodejs + webpack写一个能直出插件的小工具. 1.nodejs + babel6 + webpack4 在写之前,是有把它写成依赖包之类的工具的,但是现在处于编码调试阶段,各个部分还没有进行封装,只是实现了相关的功能,后续会实现预计的构想. 1.nodejs部分 nodejs部分主要实现了对manifest.json文件的解析和输出功能,对接webpack功能.这里使用了nodemon来代替webpack自身的watc

Postman接口调试神器-Chrome浏览器插件

首先大家可以去这个地址下载 Postman_v4.1.3 这个版本,我用的就是这个版本 http://chromecj.com/web-development/2014-09/60/download.html 下载完以后以后加压大概就是这个模样,其中.crx是我们要执行的文件,红色框里的叫私有秘钥文件 此时不能直接拖拽到谷歌浏览器的扩展程序界面,如果你直接把.crx文件拖拽到扩展程序的界面会有如下错误提示,说只能通过谷歌浏览器的 网上应用商店添加该程序,为什么会出现该情况呢? 是因为自 Chro

[其他]chrome浏览器插件导出与导入

下载了某些插件,重装电脑怎么不备份,重装之后怎么再次使用,一文搞定! 导出crx格式备份文件 1.选择 自定义格式及控制 > 更多工具 > 扩展程序: 2.勾选"开发者模式",界面显示出打包扩展程序按钮(注意下方详细信息下面的ID,这里就是插件存放本地的目录名): 3.a.选择打包扩展程序 > 弹出对话框,选择"扩展程序根目录" ,这里注意,需要选择到插件的版本号这个目录为止,然后确认: b.私有密钥文件(可选)---这个是你有就可以选择,要是没有