当前位置: 首页 > news >正文

[crxjs]自己创建一个浏览器插件

参考官方

https://crxjs.dev/vite-plugin/getting-started/vue/create-project

按照流程操作会失败的原因

是因为跨域的问题, 在此处添加

  server: {host: "localhost",port: 5173,cors: true,headers: {"Access-Control-Allow-Origin": "*",},},

在这里插入图片描述

添加匹配及通信

manifest.json

{"manifest_version": 3,"name": "CRXJS Vue Vite Example","version": "1.0.0","action": { "default_popup": "index.html" },"background": {"service_worker": "background.js","type": "module"},"content_scripts": [{"matches": ["*://localhost/*", "*://www.baidu.com/*"],"js": ["content.js"],"run_at": "document_end"}],"host_permissions": ["*://localhost/*", "*://www.baidu.com/*"]
}

content.js

window.onload = function () {// 页面加载包括所有依赖的资源(如图片、样式等)console.log("Page fully loaded and window.onload event fired.");document.dispatchEvent(new CustomEvent("extension-present", {detail: {message: "扩展已加载",version: "1.0",config: { theme: "dark" },},bubbles: true,}));
};

***.vue

<script>
import HelloWorld from '/src/components/HelloWorld.vue';
export default {components: {HelloWorld,},data() {return {hello: false,detail: ""};},methods: {handleExtensionEvent(event) {// 从event.detail获取参数this.detail = event.detail;const { message, version, config } = event.detail;console.log('收到扩展消息:', message);this.$store.commit('updateExtensionStatus', { version, config });this.hello = true;}},mounted() {document.addEventListener('extension-present', this.handleExtensionEvent);},beforeDestroy() {document.removeEventListener('extension-present', this.handleExtensionEvent);;},
};
</script>

在这里插入图片描述

在这里插入图片描述

http://www.dtcms.com/a/208348.html

相关文章:

  • Android中Binder驱动作用?
  • 【AS32X601驱动系列教程】GPIO_点亮LED详解
  • 服务器修改/home的挂载路径
  • HTB-Season8-Puppy-WriteUp
  • Teensy LC 一款由 PJRC 公司开发的高性能 32 位微控制器开发板
  • 图解深度学习 - 机器学习简史
  • 【Mini-F5265-OB开发板试用测评】2、关于platform.c中的串口号初始化修改的建议
  • vue中v-clock指令
  • 分布式消息队列kafka详解
  • Vue3.5 企业级管理系统实战(二十):角色菜单
  • 把英语电子书翻译为中文 epub
  • NDVI谐波拟合(基于GEE实现)
  • MySQL安装配置指南
  • 精华贴分享|个股拥挤度分析研究分析
  • PyQt学习系列11-综合项目:多语言文件管理器
  • MCP 服务与 Agent 协同架构的实践解码:双轮驱动下的场景化价值创造
  • 镭神N10P SLAM算法选型
  • Datawhale_PyPOTS_task6
  • Elastic:什么是 DevOps?
  • Oracle 11g导出数据库结构和数据
  • 【线程池】线程池的使用汇总
  • ​​3D 几何建模工具库​Open CASCADE(OCCT)简单介绍。
  • 在TIA 博途中下载程序时找不到对应的网卡怎么办?
  • 使用Kotlin创建Spring Boot用户应用项目
  • 在Kotlin中绕过泛型类型擦除的实战指南
  • Kotlin 中该如何安全地处理可空类型?
  • RequestBody注解中Map
  • 「MATLAB」计算校验和 Checksum
  • 摩尔线程S4000国产信创计算卡性能实战——Pytorch转译,多卡P2P通信与MUSA编程
  • uv sync --frozen卡住不动