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