WXT开发

WXT为浏览器扩展开发框架，用于开发浏览器插件的

谷歌浏览器绿色版：https://googlechromelabs.github.io/chrome-for-testing/

WXT开发文档：https://wxt.dev/guide/installation.html

WXT教程视频：https://www.bilibili.com/video/BV1pEpEzYEnT/?spm_id_from=333.1245.playlist.watchlater.redirect&vd_source=9e4dca636d3cd02955550851d4fcbf70

一、准备

项目基于WXT+Vue3开发的浏览器插件

1.环境要求：node.js

2.创建项目

npx wxt@latest init
>选择vue
>选择npm
>回车开始创建

创建完成会得到一下目录

3.创建完项目，进到wxt-finance-demo目录安装依赖

#可简写为npm i
npm install

4.修改启动配置

（1）打开/wxt-finance-demo/wxt.config.ts文件

import { defineConfig } from 'wxt';

// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ['@wxt-dev/module-vue'],
  webExt: {
    binaries: {
      chrome:
        'C:\\Users\\EDY\\chrome-browser\\chrome-win64\\chrome.exe',  //修改为本地的chrome路径
    },
    chromiumProfile: 'C:\\Users\\EDY\\chrome-browser\\profile',   //修改为本地的profile
    keepProfileChanges: true,
  },
  manifest: {
    name: 'Finance Audit Demo',
    description:
      'Prototype extension for extracting payment form fields and detail tables from the finance approval page.',
    permissions: ['storage', 'activeTab'],
    // 添加 host_permissions，允许访问该域名下的所有路径
    host_permissions: [
      'http://10.10.94.243/*',
      'https://10.10.94.243/*',
      'file:///*',
      // 'https://i.cnblogs.com/posts/*',   // 或者更精确
      // '<all_urls>',   //访问所有网站（不推荐，但有时需要） 
    ],
  },
});

（2）新建/wxt-finance-demo/scripts/launch-chrome-profile.ps1文件（非必要）

launch-chrome-profile.ps1 的作用是自动化启动指定配置的 Chrome 浏览器并加载扩展，主要用于开发调试场景。

这个脚本相当于把手动操作（打开浏览器、加载扩展）打包成一条命令，提升开发效率。

//launch-chrome-profile.ps1 
param(
  [string]$StartUrl = "",  //可选启动 URL，直接打开目标页面
  [switch]$AllowFileAccessFromFiles   //允许访问本地 file:// 资源，用于调试保存的 HTML 文件
)

$ErrorActionPreference = "Stop"

$projectRoot = (Resolve-Path (Join-Path $PSScriptRoot "..")).Path
$chromePath = "C:\Users\EDY\chrome-browser\chrome-win64\chrome.exe"  //修改为本地地址,使用项目指定的独立 Chrome 版本，避免影响系统默认浏览器。
$profileDir = "C:\Users\EDY\chrome-browser\profile"    //修改为本地地址,使用独立的用户数据目录，保持开发环境隔离。
$devOutputDir = Join-Path $projectRoot ".output\chrome-mv3-dev"
$buildOutputDir = Join-Path $projectRoot ".output\chrome-mv3"

if (-not (Test-Path -LiteralPath $chromePath)) {
  throw "Chrome executable not found: $chromePath"
}

if (-not (Test-Path -LiteralPath $profileDir)) {
  throw "Chrome profile directory not found: $profileDir"
}

$extensionDir = $null
if (Test-Path -LiteralPath $devOutputDir) {
  $extensionDir = (Resolve-Path -LiteralPath $devOutputDir).Path
} elseif (Test-Path -LiteralPath $buildOutputDir) {
  $extensionDir = (Resolve-Path -LiteralPath $buildOutputDir).Path
}

if (-not $extensionDir) {
  throw "Extension output not found. Run 'npm run dev:chrome' or 'npm run build:chrome' first."
}

$argumentList = @(
  "--user-data-dir=$profileDir"
  "--disable-extensions-except=$extensionDir"  //禁用其他无关扩展。
  "--load-extension=$extensionDir"   //自动加载项目构建产物
  "--no-first-run"
  "--no-default-browser-check"
)

if ($AllowFileAccessFromFiles) {
  $argumentList += "--allow-file-access-from-files"
}

if ($StartUrl) {
  $argumentList += $StartUrl
}

Start-Process -FilePath $chromePath -ArgumentList $argumentList -WindowStyle Normal
Write-Host "Chrome launched with extension:" $extensionDir
if ($AllowFileAccessFromFiles) {
  Write-Host "Chrome launched with file URL access enabled."
}

在package.json引用该文件

"scripts": {
    "dev": "wxt",
    "dev:chrome": "wxt -b chrome",
    "dev:firefox": "wxt -b firefox",
    "build": "wxt build",
    "build:chrome": "wxt build -b chrome",
    "build:firefox": "wxt build -b firefox",
    "launch:chrome-profile": "powershell -ExecutionPolicy Bypass -File .\\scripts\\launch-chrome-profile.ps1",   //引用
    "launch:chrome-profile:file-unsafe": "powershell -ExecutionPolicy Bypass -File .\\scripts\\launch-chrome-profile.ps1 -AllowFileAccessFromFiles",   //引用
    "zip": "wxt zip",
    "zip:firefox": "wxt zip -b firefox",
    "compile": "vue-tsc --noEmit",
    "postinstall": "wxt prepare"
  },