参考官方

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>