plasmo是一个很棒的开发浏览器插件的框架,可以使用react和vue等语言开发,也是目前github上star数量最多的开发浏览器插件的框架。
github仓库地址:GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework
官网地址:Supercharge your browser extension development – Plasmo
我这里开发的时候,遇到一个问题,就是需要在内容脚本里面使用MAIN模式,因为我要使用原生网页里面的富文本编辑组建,使用这个组件的编辑函数,像里面插入内容。不是MAIN模式的content脚本是无法使用这个dom组件的编辑函数的:
const contnetDiv: any = document.querySelector('.CodeMirror')
// 普通的内容脚本无法获取到setValue这个函数
contnetDiv.CodeMirror.setValue(content)
问题描述
但是使用了MAIN模式的内容脚本,就会完全注入到网页的JS运行环境中,这个时候,就无法使用插件的Storage来存储和获取插件里面的数据了,只能获取到网页的localStorage里面的数据。
但是我通过插件获取到了一个文本内容,存储在插件的storage里面,然后想通过MAIN的内容脚本将这些内容插入到富文本编辑器里面,这个时候就出现问题了:MAIN的内容脚本拿不到插件的storage里面的数据啊!尴尬了
解决办法
第一个方式:在background脚本里面动态插入这个内容脚本
通过查找官网,也没有说明该怎么操作,但是在github上发现一种方式,就是使用动态插件内容脚本的方式,将这个js脚本文件插入进入,好像是可以使用storage里面的数据,有待验证。
第二个方式:编写一个中间件内容脚本,在这个中间件内容脚本里面获取到插件的数据,然后将数据通过document.body.appendChild方法插入到网页的DOM里面,然后在MAIN的内容脚本里面通过监听DOM变化,就可以拿到中间件插入的数据了
输入插入DOM的代码:
// 将文章追加到html中,间接给sender发文章数据
console.log('articles one is :', one, articles)
const titleDiv = document.createElement('div')
titleDiv.id = 'titleDiv'
titleDiv.style.display = 'none'
titleDiv.innerText = one.title
document.body.appendChild(titleDiv)
const contentDiv = document.createElement('div')
contentDiv.id = 'contentDiv'
contentDiv.style.display = 'none'
contentDiv.innerText = one.content
document.body.appendChild(contentDiv)
在MAIN的内容脚本里面监听DOM变化:
监听DOM变化的代码:
// 监听dom变化
const listenDom = () => {
//选择一个需要观察的节点
var targetNode = document.body
// 设置observer的配置选项
var configMutation = { attributes: true, childList: true, subtree: true }
// 当节点发生变化时的需要执行的函数
var callback = function (mutationsList, observer) {
// 监听到文章内容后,就不再监听页面变化了
if (editModul === null) {
for (var mutation of mutationsList) {
// 检测并获取titleDiv和contentDiv
const titleDiv = document.getElementById('titleDiv')
const contentDiv = document.getElementById('contentDiv')
if (
mutation.type == 'childList' &&
editModul === null &&
titleDiv &&
contentDiv
) {
console.log('sender listen 元素节点变化')
title = titleDiv.innerText
sendArt = contentDiv.innerText
// 找到所有的图片链接
findImg(sendArt)
// 给编辑器赋值
juejin(title, sendArt)
} else {
// console.log('sender listen 样式属性变化')
}
}
}
}
// 创建一个observer示例与回调函数相关联
var observer = new MutationObserver(callback)
//使用配置文件对目标节点进行观测
observer.observe(targetNode, configMutation)
}