使用plasmo开发浏览器插件在网页指定位置添加自定义UI

1024小神

已于 2024-04-01 18:57:16 修改

阅读量2.6k

点赞数 35

CC 4.0 BY-SA版权

分类专栏： HTML前端文章标签： ui 插件

于 2024-04-01 17:14:57 首次发布

本文链接：https://blog.csdn.net/weixin_44786530/article/details/137227087

本文介绍了如何在Plasmo框架下开发浏览器插件，利用ContentScriptsUI功能创建和配置自定义UI，包括匹配特定网站、监听UI位置变化、插入DOM和实现类似React的UI交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用plasmo开发浏览器插件的时候，有时候需要在指定网站的指定页面添加自定义的UI内容，如果通过content.js内容脚本去通过js创建的话，可就太麻烦了，要写不少的js代码。不过plasmo已经帮我们实现了这个功能，就是Content Scripts UI，官方地址：Content Scripts UI – Plasmo

创建内容UI脚本

在contents里面创建文件：plasmo.tsx

可以单独匹配对应的网站，可以初始化监听更新UI位置，可以获取渲染位置的UI：

import type {
    PlasmoCSConfig,
    PlasmoGetOverlayAnchor,
    PlasmoWatchOverlayAnchor,
} from 'plasmo'

export const config: PlasmoCSConfig = {
    matches: ['https://www.plasmo.com/*'],
}

// watch page ui change，then reset ui position
export const watchOverlayAnchor: PlasmoWatchOverlayAnchor = (
    updatePosition
) => {
    const interval = setInterval(() => {
        updatePosition()
    }, 420)

    return () => clearInterval(interval)
}

// get ui render position
export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
    document.querySelector(`header > div > a[href="/"]`)

// ui components
const PlasmoPricingExtra =