官方
https://developer.chrome.com/extensions/devguide
https://developer.chrome.com/extensions/api_index
谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会HTML，JavaScript，CSS就可以动手开发浏览器插件了。
开发谷歌浏览器插件，就相当于在谷歌浏览器的基础之上进行活动，站在巨人的肩膀上，操作很多东西都方便了一些。有了插件，我们可以定制js爬虫、屏蔽网页广告，网页实时查词，修改http请求头，等等，能做的东西很多。
基础概念与入门案例
废话少说，先看一下插件版的hello world，了解插件的大体结构，麻雀虽小，五脏俱全。
- 创建manifest.json。任何插件都必须要有这个文件，用来描述插件的元数据，插件的配置信息。
{
"name": "Hello Extensions",
"description" : "Hello world Extension",
"version": "1.0",
"manifest_version": 2,
}
定义当前插件的名字，描述版本号等信息。
注意： version在打包完插件的时候，根据version判断插件是否需要更新。
-
给插件加一个浏览器右上角的图标。
image
{
"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>
image.png
- 新增快捷键，通过键盘快速打开，修改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 permissions 此插件用到的浏览器的权限。常用的权限如下。在Chrome 插件API概览页面点进去，会看到此api需要的权限。
image
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
],
5、contentScripts，运行在浏览器网页的上下文页面，使用标准的DOM模型，contentScripts标签在控制台可以看到。
image
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
],
6、 background后台页面，在浏览器前台看不到的页面，可以以后台进程的方式进行运行，也可以以事件的方式运行。需要打开扩展程序的开发者模式才能看到。
image
"background": {
"scripts": [
"scripts/background.js"
]
},
更详细的manifest.json文件配置信息请参考官方manifest.json文件格式
7、 常用到的开发方式说明
image.png
一般我们会在浏览器的前台页面，也就是直接打开控制台就可以看到的扩展程序，通过contentScript指定加载的程序。在这里监听当前浏览器当前打开的页面，然后做一些与用户交互的东西。
在前台的交互，以消息的形式传递到background指定的脚本。
contentScript执行的程序一般可以跨域，浏览器的安全限制，而background指定的脚本可以跨域运行，获取所有浏览器cookie信息等等。
交互案例，详细的操作看一下项目的脚手架中。
chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
chrome.runtime.onMessage.addListener(function callback)
- 在前后台可以通信之后，很多功能可以依赖第三方的库，当前我们参考的脚手架，可以直接使用npm安装第三方库。可以多花点心思研究插件的具体结构。
使用脚手架工具
https://gitee.com/XinGithub/generator-chrome-extension
npm install --global yo gulp-cli bower
# Install the generator:
npm install -g generator-chrome-extension
# Make a new directory, and `cd` get into it:
mkdir my-new-chrome-extension && cd $_
# Generate a new project
yo chrome-extension
//不要使用sass
//Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-64_binding.node":
# Transform updated source written by ES2015 (default option)
gulp babel
# or Using watch to update source continuously
gulp watch //修改文件后会自动更新到插件
# Make a production version extension
gulp build
//cannot find module 'eslint-scope'
npm i eslint-scope --save
. 安装浏览器扩展
进入扩展程序
image
加载项目目录下的app的文件夹。
image
开发时gulp watch 即可同步
项目结构
修改app下的文件，导入插件也是该文件夹，script脚本修改script.bable下的，babel命令会copy到scripts下
image.png
网友评论