谷歌(Chrome)浏览器插件开发教程

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会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

Hello Extensions

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，实际中，我们需要的功能远不止这么简单。需要更强大的功能，