如何用Nuxt 3开发含Popup等功能的完整Chrome浏览器扩展？

一、项目基础配置 #

1. Manifest.json 放置位置
   直接把manifest.json放在Nuxt项目的public目录下，Nuxt构建时会自动将该目录下的文件原封不动复制到dist根目录，完美适配Chrome扩展的文件结构要求。

示例Manifest V3配置（包含你需要的所有模块）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0.0",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png"
    }
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "options_page": "options.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/content.js"]
    }
  ]
}

2. Nuxt核心配置（nuxt.config.ts）
   Chrome扩展是纯客户端应用，必须禁用SSR，同时调整基础路径避免路由异常：

export default defineNuxtConfig({
  ssr: false,
  app: {
    baseURL: './', // 相对路径适配扩展的文件结构
    head: {
      title: '你的扩展',
    }
  },
  nitro: {
    output: {
      publicDir: './dist'
    }
  }
})

二、各模块实现方法 #

1. Popup Window

• 在pages目录下创建popup.vue，编写Popup界面：

<template>
  <div style="width: 300px; padding: 1rem;">
    <h1>扩展Popup</h1>
    <button @click="saveSetting">保存设置</button>
  </div>
</template>

<script setup>
const saveSetting = async () => {
  await chrome.storage.local.set({ theme: 'dark' })
}
</script>

• 构建后Nuxt会自动生成dist/popup.html，和Manifest里action.default_popup的配置对应即可。

2. Content Injection（内容脚本）

• 原生JS内容脚本：在public/js目录下创建content.js，编写注入逻辑：

// public/js/content.js
console.log('内容脚本已注入页面')
// 示例：向页面插入自定义DOM
const div = document.createElement('div')
div.textContent = '来自扩展的内容'
div.style.cssText = 'position:fixed;top:10px;right:10px;background:white;padding:8px;'
document.body.appendChild(div)

• Vue组件注入：如果想用Vue组件渲染页面内容，可单独打包Vue组件（用Vite打包成umd格式），再在content.js中引入并挂载到页面DOM节点上。

3. 自定义新标签页（Custom NewTab）

• 在pages目录下创建newtab.vue，编写新标签页界面：

<template>
  <div class="newtab-container">
    <h1>我的自定义新标签页</h1>
    <input type="text" placeholder="搜索..." class="search-input" />
  </div>
</template>

<style scoped>
.newtab-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
.search-input {
  width: 400px;
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

• Manifest中chrome_url_overrides.newtab指向dist/newtab.html，构建后自动替换默认新标签页。

4. 选项/设置页面（Options/Settings Page）

• 在pages目录下创建options.vue，编写设置界面：

<template>
  <div style="width: 600px; margin: 2rem auto;">
    <h1>扩展设置</h1>
    <label style="display:block;margin:10px 0;">
      主题：
      <select v-model="theme" @change="updateTheme">
        <option value="light">浅色</option>
        <option value="dark">深色</option>
      </select>
    </label>
  </div>
</template>

<script setup>
const theme = ref('light')

onMounted(async () => {
  const res = await chrome.storage.local.get('theme')
  theme.value = res.theme || 'light'
})

const updateTheme = async () => {
  await chrome.storage.local.set({ theme: theme.value })
}
</script>

• Manifest中options_page指向dist/options.html，用户可通过扩展右键菜单进入设置页。

三、调试与构建 #

1. 执行npm run build，生成dist目录。
2. 打开Chrome浏览器，进入chrome://extensions/，开启"开发者模式"，点击"加载已解压的扩展程序"，选择dist目录即可调试。

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