使用 content scripts 和 Vue Router 等技术在当前页面中注入和显示 Vue 单文件组件

要在当前页面中注入和显示 Vue 单文件组件，您需要按照以下步骤操作：

1. 创建一个 Vue 项目：首先，确保您有一个 Vue 项目，包括您的 Vue 单文件组件以及相应的构建配置。
2. 将构建后的文件添加到插件目录：将 Vue 项目构建后生成的 HTML、CSS 和 JavaScript 文件添加到您的 Chrome 插件的目录中。
3. 编写 Content Scripts：创建一个 Content Script 文件，用于向当前页面注入所需的脚本和样式。

// content.js

// 创建一个 div 元素，用于显示 Vue 组件
const div = document.createElement('div');
div.id = 'my-vue-app'; // 为了方便选择该元素
document.body.appendChild(div);

// 引入构建后的 Vue JavaScript 文件
const script = document.createElement('script');
script.src = chrome.extension.getURL('vue-app.js');
document.head.appendChild(script);

4. 创建 Vue 实例：在 Vue 单文件组件中，创建一个 Vue 实例，将其挂载到上面创建的 div 元素上。

// vue-app.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#my-vue-app');

5. 更新插件的 manifest.json：确保 manifest.json 文件正确配置了 Content Scripts。

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 匹配所有页面
    "js": ["content.js"]
  }
]

6. 重新打包插件：将构建后的文件和更新后的 manifest.json 重新打包成 Chrome 插件。
7. 安装和启用插件：在 Chrome 浏览器中加载并启用您的插件。

现在，当您访问网页时，Vue 单文件组件将在当前页面中注入和显示在您指定的 div 元素中。这使您能够在 Chrome 插件中嵌入 Vue 组件而不是打开弹出窗口。