尝试在windows上使用wxt框架开发chrome插件

公司摸鱼时间，打算研究下插件的开发。因为另一款插件是用wxt框架开发的，即刻不少人也推荐这个框架，因此计划也是用他来开发chrome插件，没想到是踩坑的开始。公司电脑是Windows+Ubuntu双PC，一般在Windows上使用vscode ssh链接Ubuntu做代码开发，Windows上主要是处理文档之类的。

初始化项目（Ubuntu）

根据官方文档，初始化项目：

npx wxt@latest init myhelper

然后直接npm run dev测试下，结果Ubuntu因不使用桌面，索性没安装chrome，所以出现如下报错：

ERROR  The CHROME_PATH environment variable must be set to a Chrome/Chromium executable no older than Chrome stable.

看来得安装个chrome才行，这里比较疑问的是即使安装了chrome，该如何调试？先安装吧。

sudo apt install chromium-browser
which chromium-browser

安装成功后可以正常编译了，但是继续出现了后续报错，访问 34713 被拒绝，查了下原因，这里应该是wxt热重载使用的端口？且每次都是随机的，vscode server无法设置自动转发。看文档上没咋说，AI也不知道，放弃了。。

myhelper$ npm run dev

> wxt-react-starter@0.0.0 dev
> wxt


WXT 0.19.26                                                                                                            4:14:14 PM
✔ Started dev server @ http://localhost:3000                                                                          4:14:15 PM
ℹ Pre-rendering chrome-mv3 for development with Vite 6.0.8                                                            4:14:15 PM
✔ Built extension in 350 ms                                                                                           4:14:15 PM
  ├─ .output/chrome-mv3/manifest.json               1.05 kB 
  ├─ .output/chrome-mv3/popup.html                  744 B   
  ├─ .output/chrome-mv3/background.js               19.96 kB
  ├─ .output/chrome-mv3/chunks/popup-BxzUToPe.js    8.24 kB 
  ├─ .output/chrome-mv3/content-scripts/content.js  38.3 kB 
  ├─ .output/chrome-mv3/icon/128.png                3.07 kB 
  ├─ .output/chrome-mv3/icon/16.png                 559 B   
  ├─ .output/chrome-mv3/icon/32.png                 916 B   
  ├─ .output/chrome-mv3/icon/48.png                 1.33 kB 
  ├─ .output/chrome-mv3/icon/96.png                 2.37 kB 
  └─ .output/chrome-mv3/wxt.svg                     1.07 kB 
Σ Total size: 77.61 kB                                               
✖ Command failed after 26.0 s                                                                                         4:14:40 PM

 ERROR  connect ECONNREFUSED 127.0.0.1:34713                                                                           4:14:40 PM

    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1611:16)

Windows初尝试

很烦windows上的环境变量配置，习惯了Ubuntu和Mac OS。。现在不得不折腾一下，在vscode中尝试下。

安装node

问了下AI，可以使用Chocolatey来做包管理器，类似linux上的apt和yum，听起来很不错！

管理员权限在powershell中安装Chocolatey：

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

安装完Chocolatey后，在powershell中安装node：

choco install nodejs

设置环境变量以生效配置这里有个坑，其实上一步是已经自动配置了环境变量，cmd中已有可以运行node -v了，但是，我使用的是powershell！！！不会自动更新环境变量！！！

# powershell中查看环境变量
Get-ChildItem Env:\

看了下，有网友写了个脚本来生效powershell的环境变量，实测可用：

# RefreshEnv.ps1
# 
# PowerShell脚本用于从注册表读取环境变量并设置会话变量

Write-Host "正在从注册表刷新cmd.exe的环境变量。请稍候..." -NoNewline

function Set-FromReg {
	param ( 
		[string]$regPath,
		[string]$name,
		[string]$varName
	)
	
	$value = Get-ItemProperty -Path $regPath -Name $name -ErrorAction SilentlyContinue
	if ($value) {
		Set-Item -Path Env:$varName -Value $value.$name
	} 
}

function Get-RegEnv {
	param (
		[string]$regPath
	)
	
	$vars = Get-Item -Path $regPath
	foreach ($var in $vars.Property) {
		if ($var -ne "Path")
		{
			Set-FromReg $regPath $var $var
		}
	} 
}

# 获取系统和用户环境变量

Get-RegEnv "HKLM:\System\CurrentControlSet\Control\Session Manager\Environment"
Get-RegEnv "HKCU:\Environment"

# 特殊处理PATH - 混合用户和系统路径

$path_HKLM = (Get-ItemProperty -Path "HKLM:\System\CurrentControlSet\Control\Session Manager\Environment").Path
$path_HKCU = (Get-ItemProperty -Path "HKCU:\Environment").Path
$env:Path = "$path_HKLM;$path_HKCU"

# 保存原始用户名和架构
$OriginalUserName = $env:USERNAME
$OriginalArchitecture = $env:PROCESSOR_ARCHITECTURE

# 重置用户名和架构
$env:USERNAME = $OriginalUserName
$env:PROCESSOR_ARCHITECTURE = $OriginalArchitecture

Write-Host "完成"

wxt插件开发环境

初始化项目，和之前的Windows一样

# 设置成淘宝镜像源
npm config set registry https://registry.npmmirror.com/
npx wxt@latest init myhelper

跟其他一样了。