plasmo开发浏览器插件MAIN模式的content脚本和普通模式content脚本通讯方案

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)
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/475036.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

每秒批量插入10000条数据到MySQL中,资源消耗(带宽、IOPS)有多少?

文章目录 🔊博主介绍🥤本文内容起因代码资源情况改造 📢文章总结📥博主目标 🔊博主介绍 🌟我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、…

使用Cpolar异地组网,在vscode上ssh远程开发ubuntu主机

目录 开发环境 操作流程 参考资料 在机器人被搬到另一个屋之后,通过局域网进行ssh开发就变成了个困难的问题。因此尝试了异地组网来解决这个问题,看了一些资料后发现基于cpolar进行异地组网也不困难,这里记录一下步骤。 开发环境 硬件&…

onlyoffice创建excel文档

前提 安装好onlyoffice然后尝试api开发入门 编写代码 <html> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0"&…

在Linux环境底下 用C语言执行Python程序

在Linux环境底下 用C语言执行Python程序 文章目录 在Linux环境底下 用C语言执行Python程序1、环境安装&检测2、C语言调用Python语句2.1 直接调用python语句2.2 调用无参python函数2.3 调用有参python函数 1、环境安装&检测 通过C语言调用Python代码&#xff0c;需要先安…

贝尔曼方程【Bellman Equation】

强化学习笔记 主要基于b站西湖大学赵世钰老师的【强化学习的数学原理】课程&#xff0c;个人觉得赵老师的课件深入浅出&#xff0c;很适合入门. 第一章 强化学习基本概念 第二章 贝尔曼方程 文章目录 强化学习笔记一、状态值函数贝尔曼方程二、贝尔曼方程的向量形式三、动作值…

鸿蒙开发之导航栏tabs(类似Android tablayout)

当页面信息较多时&#xff0c;为了让用户能够聚焦于当前显示的内容&#xff0c;需要对页面内容进行分类&#xff0c;提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换&#xff0c;一方面提升查找信息的效率&#xff0c;另一方面精简用户单次获取到的信息量…

IDEA中使用git

从远程仓库拉取代码 更新代码 提交代码 推送代码到远程仓库 如果代码只是进行了commit&#xff0c;即只提交到了本地仓库而并未推送要进行推送点击push按钮即可&#xff1a; 分支操作 新建分支 切换分支、删除分支、其余分支操作 git面板介绍 reset操作、rebase操作、rev…

【LeetCode: 224. 基本计算器 + 模拟 + 栈】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

matlab 条件数的倒数

目录 一、概述1、算法概述2、主要函数3、参考文献二、条件设置错误的矩阵的敏感度三、求解单位矩阵的条件四、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 1、算法概述

正则表达式具体用法大全

# 正则表达式&#xff1a; ## 单字符匹配&#xff1a; python # 匹配某个字符串&#xff1a; # text "abc" # ret re.match(b,text) # print(ret.group()) # 点&#xff08;.&#xff09;&#xff1a;匹配任意的字符(除了\n)&#xff1a; # text "\nabc&quo…

前言:为什么C语言最适合编程入门?

前言&#xff1a;为什么C语言最适合编程入门&#xff1f; C语言被认为最适合编程入门的原因主要有以下几点&#xff1a; 基础且强大&#xff1a;C语言是一种基础且强大的编程语言。它提供了对底层硬件的直接访问&#xff0c;让初学者能够更好地理解计算机的工作原理&#xff0…

Unity 学习笔记 5.控制飞机飞行

目录 1.摄像机跟随的方法 2.鼠标按键响应 3.键盘按键响应 4.导入素材 5.让飞机向前飞 6.摄像机跟随飞机移动 7.鼠标控制飞机倾斜 8.键盘控制飞机飞行 下载源码 UnityPackage 1.摄像机跟随的方法 2.鼠标按键响应 3.键盘按键响应 4.导入素材 下载素材 步骤&#xff1a; 将…

python的幼儿园管理系统flask-django-php-nodejs

随着信息时代的来临&#xff0c;过去的传统管理方式缺点逐渐暴露&#xff0c;对过去的传统管理方式的缺点进行分析&#xff0c;采取计算机方式构建幼儿园管理系统。本文通过课题背景、课题目的及意义相关技术&#xff0c;提出了一种活动信息、课程信息、菜谱信息、通知公告、家…

监听键盘按下和弹起事件

<div class"center-container" id"ed-editor-container" tabindex"0"></div> tabindex"0" 让div可获得聚焦 // 编辑器区域键盘事件监听 this.edEditorContainer document.getElementById(ed-editor-container) this.edEd…

【100%成功】从0到1教你开通GPT4.0会员,一年立省1800,拒绝高价代开,免排队无需等待。

我们看下这个网址代开差不多要300&#xff0c;而我用Fomepay每个月才150左右&#xff0c;不需要年费月费&#xff0c;虽然有开卡费用10刀&#xff0c;但是也很划算&#xff0c;你自己算一下&#xff0c;一个月300一年就1千多 点击获取卡&#xff0c;0年费0月费 开卡步骤很简…

卫生间尺寸大揭秘,让你装修不再迷茫。福州中宅装饰,福州装修

卫生间的布局和尺寸因卫生间的大小和设计风格而异。以下是一些常见的布局和尺寸&#xff1a; 1. 洗漱区&#xff1a; 洗手台的宽度一般为600mm&#xff0c;高度为850~900mm。洗手台外边距离障碍物应预留600mm&#xff0c;可容纳人员站立或弯腰时的纵向尺寸。弯腰洗脸横向活动…

Linux/Perfection

Enumeration nmap 用 nmap 扫描了常见的端口&#xff0c;发现对外开放了 22,80&#xff0c;扫描一下详细信息&#xff0c;如下所示 ┌──(kali㉿kali)-[~/vegetable/HTB/Perfection] └─$ nmap -sC -sV -p 22,80 10.10.11.253 -oA nmap Starting Nmap 7.93 ( https://nmap…

Mysql总结(附思维导图)

Mysql Mysql索引 使用 创建主键索引 在对应字段后指定primary_key&#xff1a;id int primary key 创建唯一索引 在对应字段后指定unique_key&#xff1a;name varchar(20) unique 创建普通索引 在创建表的最后&#xff0c;指定某列或某几列&#xff1a;index(name) 创建全…

【JAVA笔记】IDEA配置本地Maven

文章目录 1 配置本地Maven1.1 Maven下载1.2 Maven安装与配置1.2.1 安装1.2.2 配置1.2.2.1 环境配置1.2.2.2 本地仓库配置 2 IDEA设置本地Maven 1 配置本地Maven 1.1 Maven下载 官网&#xff1a;http://maven.apache.org/下载地址&#xff1a;http://maven.apache.org/downloa…

腾讯云优惠券、代金券、折扣券领取方法及使用教程

腾讯云作为国内领先的云计算服务提供商&#xff0c;一直致力于为广大用户提供高效、稳定、安全的云服务。为了吸引用户上云&#xff0c;腾讯云经常推出各种优惠活动&#xff0c;其中就包括腾讯云优惠券。下面小编将详细介绍腾讯云优惠券的相关信息&#xff0c;包括种类、领取入…