浏览器插件的开发学习
今天闲来无事,想到公司在开发浏览器插件的问题上比较纠结,所以我整理了下,以便以后用到可以快速上手
谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了。
开发谷歌浏览器插件,就相当于在谷歌浏览器的基础之上进行活动,站在巨人的肩膀上,操作很多东西都方便了一些。有了插件,我们可以定制js爬虫、屏蔽网页广告,网页实时查词,修改http请求头,等等,能做的东西很多。
基础概念与入门案例
废话少说,先看一下插件版的hello world,了解插件的大体结构,麻雀虽小,五脏俱全。
- 创建manifest.json。任何插件都必须要有这个文件,用来描述插件的元数据,插件的配置信息。
{"name": "Hello Extensions","description" : "Hello world Extension","version": "1.0","manifest_version": 2,}
定义当前插件的名字,描述版本号等信息。
注意: version在打包完插件的时候,根据version
判断插件是否需要更新。
给插件加一个浏览器右上角的图标。
浏览器插件图标
{"name": "Hello Extensions","description" : "Hello world Extension","version": "1.0","manifest_version": 2,
#新增内容如下"browser_action": {"default_popup": "hello.html","default_icon": "hello_extensions.png"}}
hello.html
<html><body><h1>Hello Extensions</h1></body>
</html>
hello_extension.png图标
hello_extension图标
- 新增快捷键,通过键盘快速打开,修改manifest.json
{"name": "Hello Extensions","description" : "Hello world Extension","version": "1.0","manifest_version": 2,"browser_action": {"default_popup": "hello.html","default_icon": "hello_extensions.png"},#新增内容如下"commands": {"_execute_browser_action": {"suggested_key": {"default": "Ctrl+Shift+F","mac": "MacCtrl+Shift+F"},"description": "Opens hello.html"}}}
安装浏览器扩展
4.1 进入扩展程序image.png
4.2 加载含有manifest.json的文件夹,开发模式下使用。
加载插件
4.3 当你觉得开发完成的时候可以打包扩展程序,上面图片有。
注意:第一次打包的时候,会生成一个pem个人密钥文件,以后再次打包的时候就需要密钥文件了。
打包截图
看一下效果
hello world插件效果
插件进阶
上面只是简单的介绍了开发插件的hello world,实际中,我们需要的功能远不止这么简单。需要更强大的功能,更多的库支持才能够胜任。下面介绍如何做出功能更完善的插件。我们从一个开源的插件脚手架做案例。
- 脚手架的地址
A template for building cross browser extensions for Chrome, Opera & Firefox.
https://github.com/EmailThis/extension-boilerplate
- 克隆到本地搭建开发环境
git clone git@github.com:EmailThis/extension-boilerplate.git
cd extension-boilerplate
npm install
- 开发与打包
开发的话:
npm run chrome-watch
npm run opera-watch
npm run firefox-watch
打包:
npm run build
搭建好基本的开发环境,先研究此项目中所包含的内容,根据自己的需要往脚手架中填充东西。我先介绍几个常用的manifest.json配置。
4.1 icons 定义浏览器扩展页面的图标。icon 对应图标位置
"icons": {"16": "icons/icon-16.png","128": "icons/icon-128.png"},
4.2 permissions 此插件用到的浏览器的权限。常用的权限如下。在Chrome 插件API概览页面点进去,会看到此api需要的权限。
存储权限
"permissions": ["tabs","storage","http://*/*","https://*/*"],
4.3 contentScripts,运行在浏览器网页的上下文页面,使用标准的DOM模型,contentScripts标签在控制台可以看到。
content Scripts位置
"content_scripts": [{"matches": ["http://*/*","https://*/*"],"js": ["scripts/contentscript.js"],"run_at": "document_end","all_frames": false}],
4.4 background后台页面,在浏览器前台看不到的页面,可以以后台进程的方式进行运行,也可以以事件的方式运行。需要打开扩展程序的开发者模式才能看到。
background 页面
"background": {"scripts": ["scripts/background.js"]},
更详细的manifest.json文件配置信息请参考官方manifest.json文件格式
常用到的开发方式说明
插件架构
5.1 一般我们会在浏览器的前台页面,也就是直接打开控制台就可以看到的扩展程序,通过contentScript指定加载的程序。在这里监听当前浏览器当前打开的页面,然后做一些与用户交互的东西。
5.2 在前台的交互,以消息的形式传递到background指定的脚本。
contentScript执行的程序一般可以跨域,浏览器的安全限制,而background指定的脚本可以跨域运行,获取所有浏览器cookie信息等等。
交互案例,详细的操作看一下项目的脚手架中。
chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
chrome.runtime.onMessage.addListener(function callback)
一篇有关前后台通信的文章
- 在前后台可以通信之后,很多功能可以依赖第三方的库,当前我们参考的脚手架,可以直接使用npm安装第三方库。可以多花点心思研究插件的具体结构。
总结
浏览器插件开发,不管是在实用性上,还是趣味性上都是值得学习与了解的。本文试图阐述chrome插件开发的过程与原理,但篇幅有限,不可能面面俱到,不足之处,敬请谅解。
欢迎一起讨论与留言。
参考
- manifest.json
- Chrome 扩展开发——编写一个自己的浏览器插件
- chrome javascript API
浏览器插件的开发学习相关推荐
- .net 插件式开发学习总结
.NET简谈插件系统开发模式 今天跟大家分享一下我们在日常开发中并不常用的开发模式"插件系统模式",什么叫插件从大一点的概念讲就是我们开发的软件是由很小的模块组成,每一块都能成功的 ...
- 谷歌游览器插件html5,谷歌放弃Gears浏览器插件 重点开发HTML5
据国外媒体报道,谷歌Gears项目经理伊安-费特(Ian Fette)周五通过博客宣布,谷歌将放弃对Gears项目的支持. Gears是一款浏览器插件,可以允许用户离线访问Gmail等网页应用.谷歌早 ...
- Chrome浏览器插件(扩展)开发全攻略
写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...
- Unity 工具之 内嵌网页/浏览器插件使用和学习笔记
1.Embedded Browser 插件(文件夹名ZFBrowserUnity) 优点:设置简单,功能强大:输入url地址,拉取网页信息,可设置页面尺寸,可显示透明背景的网页,可与显示的页面进行互动 ...
- 谷歌游览器插件html5,谷歌丢弃浏览器插件,全面开发html5
北京时间2月21日消息 据国外媒体报道,谷歌Gears项目经理伊安·费特[Ian Fette]日前通过博客宣布,谷歌将放弃对Gears项目的支持,以便重点开发HTML5. 费特周五在Gears API ...
- 超详细带你入门开发一个超实用的浏览器插件
相信大家平时在电脑上逛掘金.知乎网站时,肯定有看到过下面超级烦人的跳转拦截确认页面 虽然这种拦截的初衷是好的,但是我相信大家平时肯定不会因为有了这个拦截提醒页面,就会对即将打开的网站安全性提高自己的警 ...
- iOS--React Native浏览器插件
一:介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持 ...
- chrome插件开--开发心得
一 需求 由于很喜欢看漫画,很多学习版的漫画(大家懂的)分布在各个平台.来回切换太费劲了,就想着用一个后台记录所有追的连载漫画. 记录后台+站点不必多说.提供添加漫画链接功能即可.但每次都要找到对应漫 ...
- chrome浏览器插件开发经验(一)
chrome浏览器插件开发经验(一) http://open.chrome.360.cn/extension_dev/messaging.html 最近在进行chrome浏览器插件的开发,一些小的经验 ...
最新文章
- Linux free命令详解(转)
- 手机端登陆github产生ssl handshake aborted error如何解决?
- 车道线检测综述及新工作汇总
- 皮一皮:这年头,没看过火影还没法做医生了...
- 软件工程师的职业生涯
- 创建二级索引_Mysql创建索引
- python基本符合_python 3-3(2019-11-06 ) Python基础 (三)
- python新奇检测_3种Python检测URL状态
- Yep for Mac:专为Mac用户所设计的文档管理工具
- 【人机对话】对话的囧境?
- 高中英语老师教师资格证考试成功通过前辈备考经验谈
- python字符个数_python统计字符个数
- 计算机Web书籍推荐
- Tracup——提升工作效率的利剑
- Python数据类型(一)数字类型
- Visual Studio 2015 Bowser Link的功能不停的向服务端发送请求
- 【常用芯片】ULN2003工作原理及中文资料(实例:STM32驱动28BYJ48步进电机)
- xshell常用命令和快捷键----(备忘、随时更新)
- JS中字符串的创建、操作及其方法
- Android辅助H5做一个Web版的相册功能