news 2026/5/8 16:20:07

基于React与TypeScript的现代化浏览器扩展开发模板全解析

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
基于React与TypeScript的现代化浏览器扩展开发模板全解析

1. 项目概述：一个现代浏览器扩展开发的“全家桶”模板

如果你和我一样，开发过几个浏览器扩展，那你一定经历过那种“从零开始”的痛苦：手动配置构建工具、纠结于如何优雅地管理选项页面、为不同浏览器的打包发布流程头疼，更别提还要集成一套现代化的前端技术栈了。每次新项目启动，都像是一次重复的体力劳动。今天要聊的这个browser-extension-template项目，就是专门为解决这些痛点而生的。它不是一个简单的脚手架，而是一个集成了 React、TypeScript、TailwindCSS、自动化测试和 CI/CD 的“开箱即用”级浏览器扩展开发模板。

这个模板的核心价值在于，它把那些繁琐但又必需的工程化配置都帮你做好了，让你能立刻专注于扩展功能本身的开发。它基于 Parcel 2 构建，天然支持热重载和代码分割；用 TypeScript 保障代码质量；用 React + Shadcn/UI + TailwindCSS 构建美观且一致的 UI；用 Playwright 进行端到端测试；甚至用 GitHub Actions 实现了自动发布到 Chrome 网上应用店和 Firefox Add-ons。无论你是想快速验证一个扩展点子，还是打算认真开发一个长期维护的产品级扩展，这个模板都能提供一个坚实、现代的起点。

2. 核心架构与技术栈选型解析

2.1 为什么选择 Parcel 2 作为构建工具？

在浏览器扩展开发中，构建工具的选择至关重要。传统的 Webpack 配置复杂，而 Vite 虽然快，但其对多入口（manifest.json中声明的background,content_scripts,options等）的原生支持在早期版本中并不完美。这个模板选择了Parcel 2，我认为这是一个非常务实且高效的选择。

Parcel 2 的核心优势是“零配置”。对于扩展开发这种典型的多入口项目，你只需要在package.json中指定入口文件为manifest.json，Parcel 就能自动分析依赖图，打包所有相关的脚本、样式和资源。这意味着你完全不需要手动配置如何打包background.ts、content_script.tsx和options.tsx，Parcel 会帮你处理好一切。此外，Parcel 2 内置了对 TypeScript、JSX、PostCSS（TailwindCSS 的基础）等现代前端技术的支持，开箱即用，极大地降低了上手门槛。

注意：虽然 Parcel 的“零配置”很诱人，但在处理一些非常特殊的资源或需要深度自定义打包行为时，其配置灵活性可能不如 Webpack。不过，对于 90% 的浏览器扩展项目来说，Parcel 2 提供的功能已经绰绰有余，其开发体验的流畅度是巨大的加分项。

2.2 现代化前端技术栈：React + TypeScript + TailwindCSS + Shadcn/UI

模板将现代 Web 开发的最佳实践带入了扩展开发领域。

  • TypeScript：这是大型项目可维护性的基石。扩展的代码运行在复杂的浏览器环境中，与各种 DOM API 和扩展 API 交互，类型系统能极大地减少运行时错误，并提供优秀的代码提示。模板已经配置好了tsconfig.json，针对扩展开发环境做了优化。
  • React：用于构建选项页面、弹出页面（popup）甚至内容脚本中的复杂 UI。React 的组件化模型非常适合管理扩展中常见的状态和交互。模板中的示例选项页面就是一个功能完整的 React 组件。
  • TailwindCSS：实用优先的 CSS 框架，让你能在 JSX/TSX 中快速构建 UI，无需在多个文件间跳转。这对于需要快速迭代的扩展 UI 开发来说效率极高。
  • Shadcn/UI：这是一个基于 Radix UI 和 TailwindCSS 构建的高质量、可访问的组件库。它不是一个传统的 NPM 包，而是通过复制组件代码到你的项目中来使用，这意味着你可以完全控制组件样式和逻辑，没有额外的运行时负担。模板集成了它，为扩展提供了美观且专业的 UI 组件基础。

这套组合拳确保了开发出的扩展不仅功能强大，而且拥有现代、一致的用户界面。

2.3 开发体验与代码质量保障工具链

模板在开发者体验上做了大量投入：

  1. Prettier + Husky + lint-staged：这是自动化代码格式化的黄金组合。Prettier统一代码风格；Husky用于设置 Git 钩子；lint-staged让你在提交代码前，自动对暂存区的文件运行 Prettier 格式化。这确保了代码仓库风格的统一，避免了无意义的格式争论。
  2. Commitizen：通过npm run commit命令，提供一个交互式的命令行界面，引导你生成符合 Conventional Commits 规范的提交信息。这能让你的提交历史清晰可读，并且可以用于自动生成更新日志（CHANGELOG）。
  3. Playwright：微软出品的端到端测试框架。模板配置了 Playwright 用于测试扩展的选项页面。虽然示例只有一个基础测试，但这为扩展的 UI 和交互测试铺平了道路。你可以轻松扩展它来测试弹出页面或模拟内容脚本的交互。

2.4 对比原版模板：从 XO/Stylelint 到全功能现代栈

这个模板是 fork 自fregante/browser-extension-template的。原版模板更轻量，使用了xo（一种固执己见的 ESLint 配置）和stylelint进行代码检查。而本模板进行了一次彻底的“现代化改造”：

- xo (ESLint 封装) - stylelint + React + TypeScript + Commitizen + Prettier / Husky / lint-staged + Playwright for E2E Tests + Shadcn/UI and TailwindCSS

这个转变的意图非常明显：从提供一个极简、风格固定的基础，转向提供一个功能全面、技术栈现代、适合开发复杂扩展的“电池包含”式模板。如果你需要一个快速、轻量的起点，原版可能更合适。但如果你计划开发一个拥有丰富交互和复杂状态的扩展，并希望拥有完善的开发、测试和部署流程，那么这个增强版模板无疑是更好的选择。

3. 从零开始：项目初始化与首次构建实操

3.1 使用 GitHub 模板创建仓库

这是最快也是最推荐的方式，因为它能自动清理模板自身的特定文件。

  1. 访问模板仓库页面，点击绿色的“Use this template”按钮，然后选择“Create a new repository”。
  2. 在新页面中，为你自己的扩展项目命名（如my-awesome-extension），选择公开或私有，然后点击创建。
  3. 关键步骤：创建完成后，不要立刻克隆！GitHub 会自动触发一个名为“Template Cleanup”的 Actions 工作流。这个工作流会执行一个脚本，删除模板仓库的特定信息（如原始的 git 历史、模板相关的 issue 和 PR 链接等），并提交一个名为 “Template cleanup” 的初始提交。你需要等待这个工作流运行完成（通常一分钟内），在仓库的 Actions 标签页可以看到状态变为绿色对勾。

实操心得：务必等待“Template Cleanup”工作流完成。我曾有一次心急直接克隆，结果发现.github目录下的工作流文件还指向原模板仓库，导致后续的自动发布失败。等待这个初始化步骤完成，能确保你得到一个干净、属于你自己的起点。

3.2 本地环境搭建与依赖安装

等待模板清理完成后，就可以将仓库克隆到本地了。

git clone https://github.com/你的用户名/my-awesome-extension.git cd my-awesome-extension

接下来安装项目依赖。模板使用 npm，确保你的 Node.js 版本在 16 以上。

npm install

这个npm install会安装所有依赖，包括 Parcel、TypeScript、React、TailwindCSS、Playwright 以及各种开发工具。首次安装 Playwright 时，它会自动下载 Chromium、Firefox 和 WebKit 的浏览器二进制文件，这可能需要一些时间和网络流量。

3.3 理解项目目录结构

安装完成后，先花几分钟熟悉一下核心目录和文件：

my-awesome-extension/ ├── .github/workflows/ # GitHub Actions 自动化脚本，用于测试和发布 ├── dist/ # 构建后生成的扩展目录（运行 build 后出现） ├── source/ # 所有源代码 │ ├── manifest.json # 扩展的核心配置文件，V3 版本 │ ├── options.html # 选项页面入口 │ ├── options.tsx # 选项页面的 React 主组件 │ ├── background.ts # 后台脚本（Service Worker） │ ├── content.tsx # 内容脚本示例（可注入页面的脚本） │ ├── styles/ # 全局样式目录 │ │ └── options.css # 选项页面样式，已导入 Tailwind │ └── assets/ # 静态资源，如图标 ├── tests/ # Playwright 端到端测试文件 ├── package.json # 项目依赖和脚本定义 ├── tsconfig.json # TypeScript 配置 ├── tailwind.config.ts # TailwindCSS 配置 ├── postcss.config.js # PostCSS 配置（用于 Tailwind） └── playwright.config.ts # Playwright 测试配置

manifest.json是扩展的“身份证”和“说明书”，定义了扩展的名称、版本、权限、后台脚本、内容脚本、选项页面等所有元信息。模板默认使用Manifest V3，这是 Chrome 扩展的最新标准，也得到 Firefox 的逐步支持。V3 主要变化是用 Service Worker 替代了持久的后台页面，更省资源。

3.4 执行首次构建与开发模式运行

现在，让我们生成第一个可用的扩展包。

  1. 构建生产版本：运行以下命令，Parcel 会读取source/manifest.json作为入口，打包所有依赖，输出到dist目录。

    npm run build

    完成后，检查dist文件夹，里面应该包含了打包压缩后的所有扩展文件，这就是可以提交到商店的版本。

  2. 启动开发模式：开发时，我们使用监听模式，这样任何代码更改都会触发重新构建。

    npm run watch

    这个命令会启动 Parcel 的开发服务器，监视source目录下的文件变化并实时重建dist目录。

  3. 在浏览器中加载扩展：我们需要一个方便的方式在浏览器中加载未打包的扩展并自动重载。推荐使用 Mozilla 官方工具web-ext。

    # 全局安装 web-ext 工具（只需一次） npm install --global web-ext # 在项目根目录下，新开一个终端窗口运行 web-ext run -t chromium

    web-ext run命令会启动一个干净的 Chrome/Chromium 浏览器实例（通过-t chromium指定），并自动加载dist目录下的扩展。当你修改代码并保存后，npm run watch会重新构建，web-ext会自动帮你重新加载扩展，无需手动操作。

  4. 验证扩展：在浏览器中，打开扩展管理页面（chrome://extensions/），确保“开发者模式”已打开。你应该能看到你的扩展。点击扩展的“详细信息”，再点击“扩展程序选项”，就能打开模板自带的示例选项页面，这表明扩展已成功加载并运行。

4. 核心功能开发与定制化指南

4.1 修改基础信息与图标

首先，从最直观的改起。打开source/manifest.json文件：

{ "manifest_version": 3, "name": "My Awesome Extension", // 修改为你的扩展名称 "version": "1.0.0", // 版本号，后续发布时会自动更新 "description": "A browser extension built with the awesome template.", "action": { "default_title": "Click me!" }, "icons": { "16": "assets/icon-16.png", // 准备不同尺寸的图标，替换这些文件 "32": "assets/icon-32.png", "48": "assets/icon-48.png", "128": "assets/icon-128.png" }, // ... 其他配置 }

将name、description改为你的内容。图标文件位于source/assets/目录下，你可以用设计好的图标替换掉默认的占位图。建议使用 128x128, 48x48, 32x32, 16x16 四种尺寸以适配不同场景。

4.2 开发选项页面：集成 webext-options-sync

选项页面是用户配置扩展的地方。模板的source/options.tsx已经是一个完整的 React 组件示例。它的核心功能是集成了webext-options-sync这个库，它极大地简化了选项的持久化存储。

原理：webext-options-sync会自动将表单输入域（<input>,<select>,<textarea>）的值与chrome.storage.sync（或browser.storage.sync）同步。用户修改表单时，值自动保存；页面加载时，自动从存储中恢复值。它还支持设置默认值和数据迁移。

如何使用：

  1. 在options.tsx中，你通过useState或表单控件来管理状态。
  2. 为需要持久化的表单元素添加name属性。
  3. 在组件初始化时，webext-options-sync会从存储中读取数据并填充表单。
  4. 你几乎不需要手动调用chrome.storage.sync.set/get，库都帮你处理了。

例如，模板中的复选框：

<input type="checkbox" name="advancedMode" id="advancedMode" />

这个名为advancedMode的复选框状态会被自动保存和恢复。

注意事项：chrome.storage.sync有配额限制（通常约 100KB），且数据会在用户登录的 Chrome 浏览器间同步。对于较大的配置或敏感信息，需要考虑使用chrome.storage.local或自己的后端。webext-options-sync也支持配置存储区域。

4.3 编写后台脚本与内容脚本

  • 后台脚本 (background.ts)：在 Manifest V3 中，后台脚本是一个 Service Worker。它没有 DOM 访问权限，生命周期由浏览器管理。它通常用于监听浏览器事件（如标签页更新、导航）、管理跨标签页的状态、或执行定时任务。模板中的background.ts是一个简单的示例，监听扩展安装事件并打开选项页面。你可以在这里添加更多的事件监听器。

    chrome.runtime.onInstalled.addListener((details) => { if (details.reason === 'install') { chrome.runtime.openOptionsPage(); // 安装后打开选项页 } });

  • 内容脚本 (content.tsx)：这些脚本会被注入到匹配的网页中，运行在网页的上下文中，可以访问和操作 DOM。模板中的content.tsx展示了如何作为一个 React 组件注入到页面中。这在需要构建复杂浮层或侧边栏时非常有用。注意，内容脚本与网页本身的 JavaScript 是隔离的，不能直接访问网页的变量或函数，需要通过window.postMessage进行通信。

权限声明：任何需要使用的 Chrome API 或网站访问权限，都必须在manifest.json的permissions或host_permissions字段中声明。例如，要使用storageAPI 和访问https://*.example.com/*：

{ "permissions": ["storage"], "host_permissions": ["https://*.example.com/*"] }

4.4 使用 Shadcn/UI 组件构建一致 UI

模板已经集成了 Shadcn/UI。假设你想在选项页面添加一个漂亮的按钮：

  1. 添加组件：Shadcn/UI 不是通过 npm 安装，而是通过其 CLI 将组件代码添加到你的项目中。首先，确保你位于项目根目录，然后运行（以 Button 组件为例）：

    npx shadcn-ui@latest add button

    这会在你的项目中创建components/ui/button.tsx等文件。

  2. 在选项页面中使用：在options.tsx中导入并使用。

    import { Button } from '@/components/ui/button'; // ... 在组件返回的 JSX 中 <Button variant="default" onClick={handleClick}>保存设置</Button>

    由于配置了@/*路径别名（在tsconfig.json中），你可以方便地从components目录导入。

  3. 样式定制：所有 Shadcn/UI 组件的样式都是通过 TailwindCSS 类定义的，你可以在components/ui/button.tsx中直接修改，或者在tailwind.config.ts中扩展主题来全局调整。这种“代码在手中”的方式，赋予了极大的定制自由。

5. 测试、发布与持续集成全流程

5.1 使用 Playwright 进行端到端测试

模板已经配置了 Playwright 来测试选项页面。运行测试很简单：

# 运行所有测试（无头模式） npm test # 以 UI 模式运行测试，可以观察浏览器操作 npx playwright test --ui # 针对特定浏览器测试，如 Chromium npx playwright test --project=chromium

测试文件位于tests/目录。example.spec.ts是一个基础示例，它打开选项页面并检查标题。你可以以此为蓝本，编写测试来模拟用户填写表单、点击按钮、验证存储等操作。Playwright 的自动等待和强大的选择器 API 使得编写可靠的扩展 UI 测试变得非常容易。

编写测试的技巧：

  • 使用page.goto('chrome-extension://[extension-id]/options.html')直接访问扩展页面。[extension-id]在开发模式下是动态的，Playwright 配置中通常有处理方式。
  • 利用page.evaluate在浏览器上下文中执行脚本，来访问chrome.storage等扩展 API 进行断言（注意，这可能需要扩展在测试中授予额外权限）。

5.2 配置自动化发布到商店

这是模板最强大的功能之一。通过 GitHub Actions，你可以实现扩展的自动构建、版本号管理和发布到 Chrome 网上应用店和 Firefox Add-ons。

准备工作：

  1. Chrome Web Store：
    • 在 Google Cloud Console 创建一个项目，启用 Chrome Web Store API。
    • 按照 chrome-webstore-upload-keys 指南，获取CLIENT_ID、CLIENT_SECRET和REFRESH_TOKEN。
    • 在 Chrome 网上应用店开发者仪表板找到你的扩展的EXTENSION_ID。
  2. Firefox Add-ons：
    • 登录 Mozilla Add-ons Developer Hub ，在“API 密钥”部分生成密钥，获得WEB_EXT_API_KEY和WEB_EXT_API_SECRET。
    • 在source/manifest.json中添加browser_specific_settings字段以包含 Firefox 的扩展 ID (gecko.id)。

配置 GitHub Secrets： 在你的 GitHub 仓库设置中，进入Settings -> Secrets and variables -> Actions，添加以下 Secrets：

  • CLIENT_ID
  • CLIENT_SECRET
  • REFRESH_TOKEN
  • EXTENSION_ID
  • WEB_EXT_API_KEY
  • WEB_EXT_API_SECRET

发布流程： 配置好 Secrets 后，.github/workflows/release.yml工作流会在两种情况下触发：

  1. 定时触发：默认每周运行一次（但只在有新的 commit 后才会实际发布）。
  2. 手动触发：在 GitHub 仓库的 Actions 标签页，找到 “Release” 工作流，点击 “Run workflow”。

工作流会执行以下步骤：

  • 构建扩展。
  • 使用 daily-version-action 生成基于 UTC 日期的版本号（如2024.12.1），并更新manifest.json。
  • 分别使用chrome-webstore-upload-cli和web-ext将扩展提交到 Chrome 和 Firefox 商店。
  • 如果发布成功，会自动在 GitHub 创建一个带有版本号标签的 Release。

避坑指南：自动发布失败最常见的原因是权限不足或Secrets 配置错误。务必仔细检查：

  1. Chrome API 的 OAuth 令牌是否有上传项目的权限。
  2. Firefox 的 API 密钥是否有效且未过期。
  3. EXTENSION_ID是否正确，且与商店中已创建的扩展条目匹配。
  4. 首次发布可能需要手动在商店创建扩展条目（填写初始描述、截图等），并确保其状态为“公开”或“待审核”，自动发布流程才能更新它。

5.3 代码提交与版本管理规范

模板集成了 Commitizen，鼓励使用规范的提交信息。运行npm run commit或git cz（如果你全局安装了commitizen）来代替git commit。它会引导你选择提交类型（feat, fix, docs 等）、填写影响范围、简短描述和详细描述。这能生成清晰的提交历史，形如：feat(option): add dark mode toggle。

结合 GitHub Actions，规范的提交信息可以用于自动生成语义化版本号和更新日志，进一步提升项目管理效率。

6. 常见问题排查与进阶技巧

6.1 开发与构建问题速查表

问题现象可能原因解决方案
npm run build失败，提示 Parcel 错误1. Node.js 版本过低。
2.node_modules损坏或依赖冲突。		1. 升级 Node.js 至 LTS 版本（>=18）。
2. 删除node_modules和package-lock.json，重新运行npm install。
npm run watch时，更改代码后浏览器未更新1.web-ext run未正确连接到构建输出。
2. 浏览器缓存。		1. 确保web-ext run是从项目根目录运行的，且dist目录存在且最新。
2. 在web-ext run命令中尝试添加--no-reload禁用自动重载，然后手动在扩展管理页面点击刷新。
内容脚本 (content.tsx) 修改后不生效Chrome 的内容脚本在扩展更新后不会自动注入到已打开的页面。在 Chrome 中，需要手动刷新目标网页。Firefox 通常会主动重新注入。开发时，可以配合web-ext的自动重载和页面刷新。
TypeScript 报错，找不到模块声明缺少 Chrome 或浏览器 API 的类型定义。安装@types/chrome包：npm install --save-dev @types/chrome。模板可能已包含，检查package.json。
TailwindCSS 样式在选项中不生效1.options.css未正确导入 Tailwind 指令。
2. Purge 配置错误（生产构建）。		1. 检查source/styles/options.css是否包含@tailwind指令。
2. 确保tailwind.config.ts中的content字段包含了你的 TSX/HTML 文件路径（如./source/**/*.{ts,tsx,html}）。

6.2 跨浏览器兼容性处理

模板旨在支持 Chrome、Firefox 等主流浏览器。大部分代码是通用的，但需要注意以下几点：

  1. API 命名空间：Chrome 使用chrome.*，而 Firefox 使用browser.*。browserAPI 是 Promise-based 的，更现代。为了兼容，可以使用webextension-polyfill库，它让你在所有浏览器中都使用browserAPI。模板可能已经内置了处理，但如果你直接调用 API，最好检查一下。
  2. Manifest V3 支持：Firefox 对 Manifest V3 的支持是逐步推进的，可能部分 V3 特性（如service_worker的某些行为）与 Chrome 有细微差别。开发时建议同时在 Chrome 和 Firefox 的开发者版本中进行测试。
  3. 存储同步：chrome.storage.sync和browser.storage.sync的配额和同步行为在不同浏览器间可能略有差异。

6.3 性能优化与打包体积控制

随着功能增加，扩展包体积可能膨胀。以下是一些优化思路：

  • 代码分割：Parcel 2 支持动态import()语法。对于大型库或非关键功能，可以考虑按需加载。例如，一个复杂的图表库只在选项页面的某个高级选项卡中使用，可以动态导入。
  • 图片与资源优化：使用压缩后的图片（WebP/AVIF格式），并通过 Parcel 的转换器进行优化。小图标可以考虑内联为 Data URL 或使用图标字体。
  • 审查依赖：定期运行npm ls --depth=1查看直接依赖，移除未使用的库。使用source-map-explorer或 Parcel 的打包分析工具，查看最终 bundle 中哪些模块体积最大。
  • Manifest V3 的 Service Worker：注意 Service Worker 有最大生命周期限制，不能长期运行。对于需要持久化运行的任务，应使用chrome.alarmsAPI 来定期唤醒。

6.4 从模板到真实项目：后续步骤建议

当你基于这个模板完成了核心功能开发后，可以考虑以下步骤来完善你的项目：

  1. 完善文档：在项目根目录添加README.md，详细描述扩展的功能、安装方式、使用方法、配置选项等。好的文档能极大提升项目的专业性。
  2. 添加更多测试：为后台脚本的逻辑、内容脚本的 DOM 操作添加单元测试（使用 Jest/Vitest）和更多的 Playwright E2E 测试。
  3. 国际化：如果你的扩展面向全球用户，考虑使用chrome.i18nAPI 来实现多语言支持。这需要创建_locales目录和消息文件。
  4. 错误监控：集成像 Sentry 这样的错误监控服务，捕获用户端发生的运行时错误，帮助你持续改进扩展质量。
  5. 用户反馈渠道：在选项页面添加一个链接，引导用户到 GitHub Issues 或你的客服邮箱反馈问题。

这个browser-extension-template提供了一个强大的地基，让你能避开工程化的泥潭，快速驶入功能开发的快车道。它的价值不仅在于初始的搭建速度，更在于其集成的现代化工具链和自动化流程，能伴随你的扩展项目从原型走向成熟。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/5/8 16:19:40

OpenClaw智能体监控仪表盘：一键部署与可视化运维指南

1. 项目概述&#xff1a;一键启动你的智能体监控中心如果你正在使用 OpenClaw 框架来管理和运行你的 AI 智能体&#xff08;Bot&#xff09;&#xff0c;那么你很可能面临一个共同的痛点&#xff1a;如何直观、实时地掌握所有智能体的运行状态、会话情况、资源消耗以及技能生态…

作者头像 李华
网站建设 2026/5/8 16:19:40

ORA 600 [qkaQknLTPruneKaf:1] BUG 分析与处理

大家好&#xff0c;这里是 DBA学习之路&#xff0c;专注于提升数据库运维效率。 前言 今天检查一套 Oracle 12.1 单机数据库发现 alert 日志报错 ORA-600 [qkaQknLTPruneKaf:1]&#xff0c;本文记录一下处理过程。 问题描述 日常检查数据库&#xff0c;adrci 检查发现报错&am…

作者头像 李华
网站建设 2026/5/8 16:19:38

一站式解决方案：win-capture-audio专业音频捕获插件实战指南

一站式解决方案&#xff1a;win-capture-audio专业音频捕获插件实战指南 【免费下载链接】win-capture-audio An OBS plugin that allows capture of independant application audio streams on Windows, in a similar fashion to OBSs game capture and Discords application …

作者头像 李华
网站建设 2026/5/8 16:19:09

2026年熔覆加工供应商大揭秘，哪家才是行业优选？

在制造业不断发展的今天&#xff0c;熔覆加工技术的重要性日益凸显。选择一家优质的熔覆加工供应商&#xff0c;对于企业的生产效率、产品质量以及成本控制都有着至关重要的影响。2026年&#xff0c;众多熔覆加工供应商竞争激烈&#xff0c;其中上海盖泽激光科技有限公司&#…

作者头像 李华
网站建设 2026/5/8 16:19:05

Windows音频路由终极指南：免费开源工具让每个应用都有专属音箱

Windows音频路由终极指南&#xff1a;免费开源工具让每个应用都有专属音箱 【免费下载链接】audio-router Routes audio from programs to different audio devices. 项目地址: https://gitcode.com/gh_mirrors/au/audio-router 你是否曾经想过让游戏音效通过高端音箱播…

作者头像 李华