谷歌插件采坑集

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会HTML，JavaScript，CSS就可以动手开发浏览器插件了。

开发谷歌浏览器插件，就相当于在谷歌浏览器的基础之上进行活动，站在巨人的肩膀上，操作很多东西都方便了一些。有了插件，我们可以定制js爬虫、屏蔽网页广告，网页实时查词，修改http请求头，等等，能做的东西很多

插件包构成

关于谷歌插件无非四个主要文件，manifest.json、popup.html、background.js，contentscripts.js。
manifest.json：任何插件都必须要有这个文件，用来描述插件的元数据，插件的配置信息。相当于插件清单。
popup.html：即弹出层页面，是点击插件图片后弹出的静态页面，相当于客户端，它的特点是每次点击图标重新弹窗，都会使popup.html重新渲染。
background.html：背景页，在浏览器前台看不到的页面，可以以后台进程的方式进行运行，也可以以事件的方式运行。需要打开扩展程序的开发者模式才能看到。相当于后台进程，它的特点是打开插件后就会一直运行，关闭浏览器也不会关闭进程，除非电脑关机或在任务管理里关闭进程。
contentscripts.js：页面注入脚本，通过contentScript指定加载的程序。在这里监听当前浏览器当前打开的页面，然后做一些与用户交互的东西。它的特点是在你启动插件后，打开的页面都会注入一段脚本，在此脚本中可以获取当前页面的信息，注意在启动插件前打开的页面不会被注入。
三个文件之间可以通过消息进行数据传递。

在此先给出一段manifest.json示例：

{
    "manifest_version": 2,
    "name": "plugin-demo",
    "description": "写上你的插件描述",
    "version": "1.0.0",
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "favicon.png"
    },
    "icons": {
        "16": "favicon.png",
        "128": "favicon.png"
    },
    "content_scripts": [ 
        {
            "js": [ "js/contentscript.js"],
            "run_at": "document_end"
        } 
    ],
    "permissions": ["*://*/*","tabs"],
    "background": {
        "page": "background.html"
    }
}

数据传递

popup.js和background.js之间的传递：

popup.js发消息给background.js:

chrome.runtime.sendMessage({type:'hello'},(res)=>{
	console.log('收到了background.js的回应');
});

background.js接收popup.js的消息：

chrome.extension.onMessage.addListener(function(request,sender,callback){
   	if(request.type=='hello'){
   		console.log('收到了来自popup.js的消息');
   		callback('收到了')
   	}
})

background.js发消息给popup.js：

chrome.runtime.sendMessage({type:'hello'},function(response) {
	console.log('收到了popup.js的回应');
});

popup.js监听来自background.js的消息：

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse){
    console.log('收到了来自background.js的消息');
    sendResponse('收到了')
  }
)

popup.js和contentscripts.js之间的传递：

popup.js发消息给contentscripts.js:

chrome.tabs.getSelected(null,(tab)=>{
	//在此可以根据tab对象获取网页连接、名称、id等信息
	chrome.tabs.sendMessage(tab.id, { type:  "getWindows"  },  function  (res) {
		console.log('收到contentscript回应的消息了');
	});
})

contentscripts.js监听来自popup.js的消息：

chrome.extension.onMessage.addListener(
　　function(request, sender, sendResponse) {
	        if(request.type == 'getWindows'){
	        	//把当前窗口的BOM对象给popup使用
	            sendResponse(window);   
	        }
　　}
);

当然使用此功能的前提是要给予插件能访问标签页的权限，可以在manifest.json中添加需要的权限配置，例如：

"permissions": ["tabs"],

发布及更新

1.注册chrome网上应用店开发者账号

2.注册开发者身份成功后，我们就可以将CRX文件打包提交了。在开发者信息中心，选择添加新项。首次发布项目之前，您必须支付 US$5.00的一次性开发者注册费。谷歌收取此费用的目的是对开发者帐户进行验证，并为用户提供更好的保护，以防他们受到欺骗性活动的侵害。支付注册费后，您最多可以发布 20 项内容。谷歌使用 Google 电子钱包来处理US$5.00付款。如果您之前未使用过 Google 电子钱包，我们会要求您提供结算信息。
上传chrome扩展程序

这里需要注意上传的文件格式需要时zip格式，而不是crx格式。
3.编辑chrome插件信息。
我们在访问谷歌应用商店的插件chrome扩展程序上有一些文字的介绍信息，我们开发人员在上传成功后，需要在开发者信息中心中编辑插件的基本信息。

安利

在这里推荐一个对前端开发者友好的插件：vue-cli-plugin-chrome-ext
使用方法是在你用cli创建出来的项目里执行：

vue add chrome-ext

vue-cli-plugin-chrome-ext 创建不是 SPA 应用，chrome 插件有很多界面，所以是每一个界面分别编译。
比如，src/popup 是一个界面，src/options 也是一个界面。
这样，原先很多文件都没用了，我们可以把它们删掉，分别是 src/main.ts、src/App.vue

热重载开发

使用 npm run build-watch 可以使用热重载的方式进行开发。
运行后会生成一个 dist 文件夹，每次你更改代码都会重新编译和加载一次。

将 dist 导入到 chrome 插件中

进入 chrome://extensions/，选择和加载 dist 文件夹进来。
这样就可以开始调试你的谷歌程序。
注意：如果是修改background.js代码需要重新加载谷歌拓展程序生效。