西安建设高端网站,郑州做网站设计,flash制作网页,企业官网邮箱怎样申请plasmo#xff1a;GitHub - PlasmoHQ/plasmo: #x1f9e9; The Browser Extension Framework
plasmo是一个开发浏览器插件的框架#xff0c;支持使用react和vue等技术#xff0c;而且不用手动管理manifest.json文件#xff0c;框架会根据你在框架中的使用#xff0c;自…
plasmoGitHub - 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 buttonCustom button/button
}export default CustomButton
然后重新加载插件就可以看到
