chrome 插件 页面请求转发_入门chrome插件开发教程和经验总结，一篇就搞掂！
前言
关于chrome extension的开发经验总结或说明文档等资料很多，很多人在写，然而，我也是一员。但是，也许这篇文章，可能给你一些不一样的感受。
这里介绍的是80%你要开发扩展会碰到的问题
前面部分大多数是一些基础介绍，和别人的资料大同小异，但是用的是通俗的语言或者我自己理解来描述的，不是拷贝官方的描述，不然的话，你干脆看官方文档就好啦，干嘛还来我这里折腾对吧，也许这些通俗的描述，更方便你理解(当然不排除也会有官方的话语)
后面部分多为一些我在项目中总结的方法，这部分就是在别人的资料可能看不到的地方了，当然，这些方法也许不通用，因为毕竟是基于我项目里的，但是尽量总结一套方法出来。
废话不多说，咱们开始吧…
目录
WHAT
谷歌扩展(chrome extension)，在认识之前，首先要明确一个观念，这种扩展程序，实际上不是一个exe、app之类的程序，下载了本地打开运行安装，本质上，它就是一个网页，写的用的都是前端的语言，高档点说是一个程序，通俗来讲， 就是运行在浏览器上的一个网站，网页。
我这种说法也许不对，不准确，不专业。但是起码，能把小白开发扩展的心态，调整好点，实际上是一个不难的东西，就是在写页面而已。要知道，心态不好，后面就坚持不下去了。
最基本组成
这里讲的是开发一个扩展(插件)最常用最基本的所需的东西，并不像官方说的那种分类。
manifest.json
background script
content script
popup
严格上来讲主要是background script 、 content script 和 popup，毕竟他们都是贯穿在manifest里的，把manifest写出来，只是为了凸显一下它的重要性
(一)manifest.json
一个插件，必须都含有这个一个文件——manifest.json，位于根目录。顾名思义，这是一个扩展的组成清单，在这个清单里能大约看到该插件的一个“规则”。
罗列和简单介绍一下一些常用的配置项，说之前，先看一个大致的文件，首先感官感受一下先
{
// 必须
"manifest_version": 2,
"name": "插件名称a",
"version": "1.1.2",
// 推荐
"default_locale": "en",
"description": "插件的描述",
"icons": {
"16": "img/icon.png",// 扩展程序页面上的图标
"32": "img/icon.png",// Windows计算机通常需要此大小。提供此选项可防止尺寸失真缩小48x48选项。
"48": "img/icon.png",// 显示在扩展程序管理页面上
"128": "img/icon.png"// 在安装和Chrome Webstore中显示
},
// 可选
"background": {
"page": "background/background.html",
"scripts": ["background.js"],
// 推荐
"persistent": false
},
"browser_action": {
"default_icon": "img/icon.png",
// 特定于工具栏的图标，至少建议使用16x16和32x32尺寸，应为方形，
// 不然会变形
"default_title": "悬浮在工具栏插件图标上时的tooltip内容",
"default_popup": "hello.html"// 不允许内联JavaScript。
},
"content_scripts": [ {
"js": [ "inject.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_start"
} ],
"permissions": [
"contextMenus",
"tabs",
"http://*/*",
"https://*/*"
],
"web_accessible_resources": [ "dist/*", "dist/**/*" ]
}
上面有我写的一些注释，用于帮助大家更好的去理解。
那接下来开始说一下其中的配置项
icons
extension程序的图标，可以有一个或多个。
48x48的图标用在extensions的管理界面(chrome://extensions)；
128x128 的图标用在安装extension程序的时候；
16x16 的图标当作 extension 的页面图标，也可以显示在信息栏上。
图标一般为PNG格式, 因为最好的透明度的支持，不过WebKit支持任何格式，包括BMP，GIF，ICO等
注意: 以上写的图标不是固定的。随浏览器的环境的改变而变。如：安装时弹出的对话框变小。
browser_action与page_action
这两个配置项都是用来处理扩展在浏览器工具栏上的表现行为。
前者扩展可以适用于任何页面。后者扩展只能作用于某一页面，当打开该页面时触发该Google Chrome扩展，关闭页面则Google Chrome扩展也随之消失。
通俗的举个例子，一些扩展任何页面可用，就都会显示在工具栏上为可用状态，一些扩展只适用于某些页面，如大家很熟悉的vue tools调试器，在检测到页面用的是vue时，就会在工具栏显示出来并可用(非灰色)
default_popup
在用户点击扩展程序图标时，都可以设置弹出一个popup页面。而这个页面中自然是可以有运行的js脚本的(比如就叫popup.js)。它会在每次点击插件图标——popup页面弹出时，重新载入。
这个小小的设置，也就是上面我把它分为在基本组成里的popup了
permissions
在background里使用一些chrome api，需要授权才能使用，例如要使用chrome.tabs.xxx的api，就要在permissions引入“tabs”
web_acce