如何将Chrome扩展的Vue弹窗应用迁移至内容脚本？

核心思路 #

内容脚本无法加载外部JS，所以必须把Vue框架与业务代码打包成自包含的单文件，再通过消息触发机制在页面中动态渲染应用。

1. 打包自包含的Vue应用代码 #

使用Vue CLI或Vite将Vue框架、业务代码、样式全部打包进一个独立JS文件，避免依赖外部资源：

• 以Vite为例，修改vite.config.js配置库模式，强制打包Vue依赖：

// vite.config.js
export default {
  build: {
    lib: {
      entry: 'src/main.js',
      name: 'VueContentApp',
      fileName: 'vue-content-app'
    },
    rollupOptions: {
      external: [], // 不排除Vue，将其打包进最终文件
      output: { globals: {} }
    }
  }
}

执行打包后会得到vue-content-app.js，该文件包含运行应用所需的全部代码。

2. 配置扩展Manifest与触发逻辑 #

• 在manifest.json中注册内容脚本，确保打包后的JS注入目标页面：

// manifest.json（Manifest V3）
{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 根据需求调整页面匹配规则
      "js": ["vue-content-app.js"]
    }
  ],
  "action": { "default_icon": "icon.png" },
  "background": { "service_worker": "background.js" }
}

• 用后台脚本监听图标点击，给内容脚本发送触发消息：

// background.js
chrome.action.onClicked.addListener(tab => {
  chrome.tabs.sendMessage(tab.id, { action: 'showVueApp' });
});

3. 改造Vue应用的初始化逻辑 #

在内容脚本中，收到消息后动态创建挂载容器并初始化Vue实例：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

// 监听后台的显示指令
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'showVueApp') {
    // 检查容器是否已存在，避免重复创建
    let appContainer = document.getElementById('vue-content-app-container');
    if (!appContainer) {
      appContainer = document.createElement('div');
      appContainer.id = 'vue-content-app-container';
      // 设置悬浮样式，避免被页面元素遮挡
      Object.assign(appContainer.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        width: '400px',
        height: '500px',
        zIndex: 99999,
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 0 10px rgba(0,0,0,0.2)',
        overflow: 'hidden'
      });
      document.body.appendChild(appContainer);
    }
    // 挂载Vue应用
    createApp(App).mount(appContainer);
  }
});

4. 样式隔离处理 #

内容脚本的样式会污染页面，需通过以下方式隔离：

• 在Vue组件中使用<style scoped>，自动给样式添加作用域前缀；
• 全局样式需加上容器ID前缀，比如：

#vue-content-app-container .app-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

5. 可选：添加应用关闭逻辑 #

在Vue组件中实现关闭功能，卸载实例并清理DOM：

<template>
  <div class="app-root">
    <button @click="closeApp">关闭</button>
    <!-- 应用内容 -->
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const closeApp = () => {
  const instance = getCurrentInstance();
  instance?.appContext.app.unmount();
  document.getElementById('vue-content-app-container').remove();
};
</script>

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