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

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

news 来源：原创 2025/5/24 6:07:12

参考官方

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>