chrome 插件通信DEOM
时间:2022-07-24
本文章向大家介绍chrome 插件通信DEOM,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
基础概念
- manifest.json 插件配置
- content_script 注入脚本,可读取页面中的dom,以及window对象方法
- backgound 插件脚本,
页面与插件之间的同行管道:
页面 -> content_script : dom
content_script -> background : chrome.runtime
插件内的通信方法
- chrome.runtime.sendMessage 发送数据
- chrome.runtime.onMessage.addListener 接收数据
DEMO
1. 页面端
// 页面内配置通信dom
<div id='plugin-pip'/>
// 页面通信插件
const PIP_DOM_ID = 'plugin-pip'
const SEND_KEY = 'SEND_MSG_FROM_APP'
const LISTENER_KEY = 'LISTENER_PLUGIN_MSG'
const DATA_SAVE_KEY = 'DATA-MSG'
export class PluginPip{
static instance = null
constructor(){
if(PluginPip.instance){
return PluginPip.instance
}
this.pip = document.querySelector(`#${this.conf.PIP_DOM_ID}`)
this.listener = new Set()
this.init()
PluginPip.instance = this
}
init(){
this.pip.addEventListener(this.conf.LISTENER_KEY, (e) =>{
console.log(e)
let data = {}
try {
data = JSON.parse(this.pip.getAttribute(this.conf.DATA_SAVE_KEY))
} catch (error) {
console.error("插件接收数据格式化失败: ", error)
}
this.listener.forEach(callback => callback(data))
})
}
send(type, data={}){
const msg = {type, data}
let msgStr = ''
console.table('send: ', msg)
try {
msgStr = JSON.stringify(data)
} catch (error) {
console.error("插件发送数据格式化失败: ", error)
return error
}
sessionStorage.setItem(this.conf.DATA_SAVE_KEY, msgStr)
const evt = document.createEvent("HTMLEvents");
evt.initEvent(this.conf.SEND_KEY, false, false);
this.pip.dispatchEvent(evt)
}
// 获取配置
get conf(){
return PluginPip.conf()
}
// 获取配置静态方法
static conf(){
return {
PIP_DOM_ID,
SEND_KEY,
LISTENER_KEY,
DATA_SAVE_KEY
}
}
}
// 初始化插件
const pip = new PluginPip()
// 添加接收
pip.listener.add((data) =>{
console.log('from plugin: ', data)
})
// 发送数据
pip.send("msg", {id: 'xx', name:'xx'})
2. content_script
// 获取通信管道
const pip = document.querySelector('#plugin-pip')
// 配置接收
pip.addEventListener("SEND_MSG_FROM_APP", (s) =>{
const msg = window.sessionStorage.getItem('DATA-MSG')
console.log("from app: ", msg)
// 转发到backgfound
chrome.runtime.sendMessage(msg, () =>{})
})
3. backgound
// 接收 content_script 消息
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse){
console.log(JSON.parse(msg))
})
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法