使用Quasar BEX开发浏览器扩展时如何向网页注入自定义Vue组件

完全可以实现，核心思路是将自定义Vue组件连同依赖的Quasar运行时、Vue runtime打包为独立可执行脚本，再通过content script注入到目标页面挂载，具体步骤如下：

1. 配置独立构建入口 #

修改quasar.config.js的BEX构建配置，为要注入的组件新增单独构建入口，Quasar CLI会自动把组件、用到的Quasar组件、依赖打包成独立文件：

// quasar.config.js
module.exports = defineConfig({
  // ...其他配置
  bex: {
    extendBexScriptsConf (config) {
      config.entry = {
        ...config.entry,
        // 新增组件注入脚本的入口路径
        'inject-custom-component': './src/bex/entries/inject-custom-component.js'
      }
    },
    // Manifest V3需要额外配置可访问资源
    manifest: {
      manifest_version: 3,
      // ...其他原有manifest配置
      web_accessible_resources: [
        {
          resources: ['inject-custom-component.js'],
          matches: ['<all_urls>'] // 可缩小到你需要注入的站点范围
        }
      ]
    }
  }
})

2. 编写组件注入入口脚本 #

创建上面配置的src/bex/entries/inject-custom-component.js文件，完成Vue实例初始化、Quasar注册、组件挂载逻辑，建议用Shadow DOM隔离样式避免和原页面互相干扰：

import { createApp } from 'vue'
import { Quasar, QBtn /* 其他用到的Quasar组件都在这里引入 */ } from 'quasar'
import 'quasar/dist/quasar.prod.css'
// 引入你src/components下的自定义组件
import MyCustomComponent from 'src/components/MyCustomComponent.vue'

// 创建挂载容器
const mountContainer = document.createElement('div')
const shadowRoot = mountContainer.attachShadow({ mode: 'open' })
document.body.appendChild(mountContainer)

// 初始化Vue实例，注册Quasar
const app = createApp(MyCustomComponent)
app.use(Quasar, {
  components: { QBtn }, // 所有用到的Quasar组件都在这里注册
  config: {
    // 按需配置Quasar全局参数，比如深色模式、全局样式等
    dark: 'auto'
  }
})

// 挂载到Shadow DOM节点
app.mount(shadowRoot)

3. 在content script中注入打包后的脚本 #

在你原有content script中动态加载打包好的独立组件脚本即可：

// src/bex/content-script.js
const componentScript = document.createElement('script')
componentScript.src = chrome.runtime.getURL('inject-custom-component.js')
document.documentElement.appendChild(componentScript)

补充说明 #

• 如果不需要样式隔离，去掉Shadow DOM相关代码，直接把组件挂载到普通DOM节点即可，建议给自定义组件根节点加唯一专属类名避免样式冲突。
• 组件和content script/background脚本的通信逻辑可以直接用Quasar BEX内置的bridgeAPI，和普通BEX开发的通信规则完全一致。
• 如果用到Quasar的插件（比如Notify、Loading等），在app.use(Quasar)的配置中正常注册即可，和普通Quasar项目用法没有区别。

内容的提问来源于stack exchange，提问作者jibrail_