使用plasmo框架开发浏览器插件，注入contents脚本和给页面添加UI组件

plasmo：GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework

plasmo是一个开发浏览器插件的框架，支持使用react和vue等技术，而且不用手动管理manifest.json文件，框架会根据你在框架中的使用，自动生成manifest.json文件，而且做了大量的封装，让你可以快速开发浏览器插件，而且还支持很多浏览器。

想要通过plasmo给网页注入一些自己的js脚本，来修改控制网页内容，屏蔽网页广告，监听页面变化和拦截请求都是非常方便的。今天就讲一下使用plasmo给页面注入js脚本和给页面添加UI功能。也可以看官方文档，讲的比较详细：Content Scripts – Plasmo

注入脚本

内容脚本运行在独立世界的网页上下文中。这允许来自不同扩展的多个内容脚本共存，而不会与其他扩展的执行发生冲突，并且与页面的 JavaScript 保持隔离。使用的时候，只需要在框架根目录添加content.ts即可，或者你想注入多个脚本，就需要创建一个contents文件夹，将脚本都放进去即可：

// 默认匹配多有的页面并注入脚本
export {}console.log("You may find that having is not so pleasing a thing as wanting. This is not logical, but it is often true."
)

想要注入多个脚本，就创建一个contents文件夹：

只想给指定的网页注入，就添加配置：

import type { PlasmoCSConfig } from 'plasmo'// 可以匹配多个网址
export const config: PlasmoCSConfig = {matches: ['https://www.plasmo.com/*']
}

注入UI标签

Plasmo 拥有将 React、 Svelte3或 Vue3组件安装到当前网页的一流支持。这个特性称为内容脚本 UI (CSUI)。只需要在contents文件夹中创建一个tsx组件，然后导出组件即可：

export {}const CustomButton = () => {return <button>Custom button</button>
}export default CustomButton

然后重新加载插件就可以看到：