chrome插件开发总结

最近老板安排了一个开发浏览器插件的项目，总结一下用到的东西。

一、框架

同事搭的一个vue版框架

https://github.com/kiccer/vue-crx-template

整体目录结构

二、各页面通讯

1.content与background

1.1content发送

/*content向background发消息id: 消息唯一idcommand: (必填)命令parameter: 携带的参数
*/
export const contentToBackground = (id, command, parameter = {}) => {const sendData = {from: 'plugin',id,command,parameter}chrome.runtime.sendMessage(sendData, function (response) {log(command + ', response', response)})
}

这里是我封装了一下，：主要用到的就是chrome.runtime.sendMessage方法

1.2background接收

// 监听来自content的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {// log(' 接收消息：', request)if (request.from === 'plugin') {if (request.command === 'eventA') {eventA(request.parameter)} else if (request.command === 'eventB') {eventB(request.parameter)}}
})

1.3background发送

// 给content发送消息
// id: 消息唯一id
// command: 请求的命令
// status: 消息状态
// data: 数据
function sendMessageToContent (id, command, status = true, data) {const postData = {from: 'plugin',id: id,command: command,status: status,data: data}log('postData', postData)chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {chrome.tabs.sendMessage(tabs[0].id, postData, function (response) {log('response: ', response)})})
}

1.4content接收

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {log('接收 request： ', request)if (request.from && request.from === 'plugin') {switch (request.command) {case 'eventA':that.eventA()breakcase 'eventB':that.eventB()break}}})

2.content与iframe

需求需要用到与iframe通讯

为了方便调用，写成了promise形式
将resolve放在promiseMap对象中，等消息返回后再通过id来获取相应的resolve

2.1iframe发送

// command 命令
// parameter 参数
const request = (command, parameter) => {return new Promise((resolve, reject) => {const request = {id: util.getUid(),type: 'request',from: 'plugin',command: command,parameter: parameter}promiseMap[request.id] = {resolve,reject}log('发送 request：', request)window.parent.postMessage(request, '*')})
}

2.2content接收

window.addEventListener('message', function (e) {const res = e.dataif (res.from === 'plugin') {log('接收 res', res)switch (res.command) {case 'eventA':that.eventA(res.id, res.command)breakcase 'eventB':that.eventB(res.id, res.command)break}}}, false)

2.3content 发送

// id: 消息唯一id
// command: 请求的命令
// status: 消息状态
// data: 数据
sendMessageToIframe (id, command, status = true, data) {if (this.$refs.iframe) {const postData = {from: 'plugin',id: id,command: command,status: status,data: data}log('发送 message postData', postData)this.$refs.iframe.contentWindow.postMessage(postData, '*')}
},

2.4iframe接收

window.addEventListener('message', function (e) {if (e.data.from === 'plugin') {const res = e.datalog('接收 postMessage res: ', res)const promise = promiseMap[res.id]if (promise) {if (res.status) {promise.resolve(res.data)} else {promise.reject(res.data)}}if (res.type === 'request') {delete promiseMap[res.id]}}
}, false)

3.content与popup

和content与background通讯方式相同

三、部分Api

官方API文档点这里

1.切换至某窗口

chrome.tabs.highlight

chrome.tabs.highlight({ tabs: tabIndex }, (res) => {log('切换到指定标签页 res: ', res)
})

一般与下面这个查询窗口信息api（chrome.tabs.query）放在一起用

2.查询某窗口信息

chrome.tabs.query
封装成了查看某窗口是否打开的方法
需要一个uri，比如 https://www.baidu.com/

export const checkTab = (targetUrl) => {return new Promise((resolve, reject) => {chrome.tabs.query({}, tabs => {log('当前浏览器打开的页面列表： ', tabs)let isExist = falselet tabIndex = ''let highlighted = falsefor (let i = 0; i < tabs.length; i++) {const tab = tabs[i]if (tab.url && tab.url.indexOf(targetUrl) !== -1) {isExist = truetabIndex = tab.indexhighlighted = tab.highlighted}}if (isExist) {// chrome.tabs.highlight({ tabs: tabIndex }, (res) => {//     log('highlight res: ', res)// })resolve({ isExist, tabIndex, highlighted })} else {resolve({ isExist })}})})
}

3.存储

存

chrome.storage.local.set({ userInfo: data }, function () {log('存储成功')
})

取
第一个参数是一个列表，可以是多个一起提取，变量名会以key的形式在result中

chrome.storage.local.get(['userInfo'], function (result) {log('result: ', result)
})

chrome.storage.sync 方法与以上用法一样，而且可以与用户信息同步

暂时写到这里…

chrome插件开发总结相关推荐

chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
chrome插件开发记录（1）——解决问题“清单文件缺失或不可读”
chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" 参考文章: (1)chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" (2) ...
Chrome 插件开发-右键菜单开发实战演示，浏览器页面右键菜单选项设置，插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图浏览器页面右键 ...
Chrome插件开发之一: 搭建基本结构
Chrome插件开发之一: http://gdfans.net/?p=14 搭建基本结构作者:cmdbuf 发布时间:2010年05月28日发表评论 (6) 4阅读评论欢迎喜爱Chrome的谷友 ...
Chrome 插件开发与本地程序交互流程
Chrome 插件开发与本地程序交互流程一. 将本地程序写入注册表可以采用bat的方式写入注册表 REG ADD "HKCU\Software\Google\Chrome\NativeM ...
Chrome插件开发-右键菜单开启页面编辑
开发一个执行js脚本改变页面DOM的Chrome插件,manifest_version版本为3. Chrome插件基本知识 Chrome插件通常由以下几部分组成: manifest.json 该文件为 ...
Chrome插件开发--后台监控网页并自动刷新，点击页面元素
2015年6.17号,在线旅游网站蚂蜂窝出现了抢粽子活动:页面会出现一些粽子,点击粽子,即抢到.很明显,这是一个重复性的劳动,可以代码自动刷新页面,点击页面上的粽子. 本方案中选择了开发一款Chrom ...
浙大教务网登录验证码自动填充--chrome插件开发
浙大教务网登录验证码自动填充--chrome插件开发一.前言二.验证码图像识别三.chrome插件开发四.插件使用和结果展示五.未来展望六.提示一.前言女朋友说"教务网每次登 ...
十分钟带你入门Chrome插件开发
一.简述我们所说的chrome插件一般都是指chrome扩展程序(Chrome Extension).chrome插件是一个用Web技术开发.用来增强浏览器功能的软件,它其实就是一个由HTML.CS ...