前端示例工程【免费下载链接】chrome-extension-boilerplate-react-viteChrome Extension Boilerplate with React Vite Typescript项目地址https://gitcode.com/GitHub_Trending/ch/chrome-extension-boilerplate-react-vite点击查看免费下载Content Runtime Script 是 chrome-extension-boilerplate-react-vite 模板中用于在运行时runtime向任意页面按需注入脚本与 UI的能力模块。它通过 pages/content-runtime/README.md 定义使用流程配合chrome.scriptingAPI 在运行时动态执行区别于 manifest 中静态声明的 content scripts。读完本文你将掌握如何新增一个 runtime 注入脚本、理解其目录约定与构建产物命名规则、看懂底层 Shadow DOM 隔离机制并能立即在自己的项目里落地一个带 React UI 的按需注入方案。Content Runtime Script 是什么与静态 Content Script 的对比在 Chrome 扩展Manifest V3开发中向页面注入代码有两种主流路径静态声明manifest content_scripts在 manifest 中预先声明matches与 JS/CSS 文件浏览器在页面加载时自动注入。当前仓库的 chrome-extension/manifest.ts 中就声明了content/all.iife.js、content-ui/all.iife.js等静态注入项。运行时注入chrome.scripting.executeScript在任意时刻通过chrome.scripting.executeScriptAPI 动态注入脚本无需提前在 manifest 中声明。这正是 Content Runtime Script 模块的用途。根据 pages/content-runtime/README.md 的定义该模块“allows users to inject scripts (Console and UI) during runtime into all pages specified by you”即既可以注入纯逻辑脚本Console也可以注入带界面的 UI并且注入目标页面的集合完全由你指定。从源码结构看pages/content-runtime/src/matches 下预置了all与example两个注入脚本入口每个入口都包含 React 组件App.tsx、样式index.css与挂载逻辑index.tsx说明该模块默认面向React UI 的运行时注入场景。快速上手新增一个运行时注入脚本第一步复制matches/example并改造原文档给出的第一步是复制matches/example文件夹以其他名称命名并编辑其内容。对应的源码目录为 pages/content-runtime/src/matches/example包含三个文件App.tsxReact 根组件。默认实现仅打印日志并渲染一行文本import { useEffect } from react; export default function App() { useEffect(() { console.log([CEB] Example runtime content view loaded); }, []); return div classNameceb-example-runtime-content-view-textExample runtime content view/div; }index.css组件样式通过import extension/ui/global.css引入全局样式并定义局部类import extension/ui/global.css; .ceb-example-runtime-content-view-text { font-size: 20px; }index.tsx注入入口负责将组件渲染进页面的 Shadow DOM详见下文“底层原理”小节import inlineCss from ../../../dist/example/index.css?inline; import { initAppWithShadow } from extension/shared; import App from src/matches/example/App; initAppWithShadow({ id: CEB-extension-runtime-example, app: App /, inlineCss });例如若要新增一个在 GitHub 页面上注入的“快速导航”脚本只需将example目录复制为github-nav然后修改App.tsx中的组件内容与useEffect日志修改index.css中的样式类名建议保持ceb-前缀以避免与宿主页面冲突修改index.tsx中initAppWithShadow的id如CEB-extension-runtime-github-nav与样式导入路径../../../dist/github-nav/index.css?inline。第二步通过chrome.scripting.executeScript触发注入新目录就绪后在你希望触发注入的任意位置README 默认建议放在popup弹窗中调用chrome.scripting.executeScript注意注入文件的命名规则await chrome.scripting.executeScript({ ..., files: [/content-runtime/{matches_folder_name}.iife.js], });其中{matches_folder_name}就是你新建的文件夹名。沿用上面的例子应为await chrome.scripting.executeScript({ target: { tabId }, files: [/content-runtime/github-nav.iife.js], });第三步确保scripting权限运行时注入依赖chrome.scriptingAPI。当前仓库的 chrome-extension/manifest.ts 已声明permissions: [storage, scripting, tabs, notifications, sidePanel]其中scripting正是运行时脚本注入所需权限同时host_permissions: [all_urls]允许脚本注入到所有匹配的 URL。如果你是从零新建扩展请务必在 manifest 的permissions中加入scripting否则executeScript会因缺少权限而失败。目录约定与构建产物命名{folder}.iife.js从何而来README 中files: [/content-runtime/{matches_folder_name}.iife.js]的产物命名并非凭空约定而是由仓库中的构建配置决定的。从源码结构看Content Runtime 模块的每个matches子目录被当作一个独立的 Rollup/Vite 入口。其入口收集逻辑位于 packages/vite-config/lib/get-content-script-entires.ts该函数扫描matchesDir即matches目录下的每个子文件夹若某文件夹是目录则检查其中是否存在index.ts或index.tsx若两者都不存在则抛出异常{folder} in \matches doesnt have index.ts or index.tsx file否则以文件夹名作为入口 key指向其中的index.ts或index.tsx文件。因此新建的注入脚本文件夹必须包含index.ts或index.tsx作为入口文件example与all使用的都是index.tsx。构建时Vite 会将每个入口打包成folder.iife.js格式的 IIFE立即执行函数产物再经由content-runtime/前缀部署到扩展根目录最终与 README 中的/content-runtime/{matches_folder_name}.iife.js路径一一对应。.iife.js后缀意味着产物是自包含的、以立即执行形式运行的脚本这正是executeScript直接加载文件所需的形式。底层原理initAppWithShadow与 Shadow DOM 隔离example/index.tsx与all/index.tsx都调用了来自extension/shared的initAppWithShadow。其实现位于 packages/shared/lib/utils/init-app-with-shadow.ts核心流程如下创建一个div元素root.id id并追加到document.body在该div上通过attachShadow({ mode: open })建立 Shadow DOM将内联 CSS 注入 Shadow DOMFirefox 环境由于 Mozilla 已知 Bug #1770592 不支持adoptedStyleSheets改用style元素注入样式实现中注明这可能导致与宿主页面样式冲突其他浏览器使用CSSStyleSheetadoptedStyleSheets注入实现彻底的样式隔离最后通过createRoot(rootIntoShadow).render(app)将 React 组件渲染进 Shadow DOM。样式文件通过import inlineCss from ../../../dist/example/index.css?inline以内联字符串形式引入Vite 的?inline查询参数从而避免运行时再次发起网络请求、也无需在web_accessible_resources中额外注册 CSS 资源。该机制使注入的 UI不会受宿主页面样式污染也不会反向污染宿主页面这是运行时注入 UI 相比直接document.body.appendChild的关键优势。两个预置示例的对照参考仓库提供了两个开箱即用的参考实现pages/content-runtime/src/matches/example面向特定站点如https://example.com/*对应 manifest 中静态 content scripts 的匹配范围的示例Shadow DOM 根节点 id 为CEB-extension-runtime-examplepages/content-runtime/src/matches/all面向所有页面的示例根节点 id 为CEB-extension-runtime-allApp.tsx中日志为[CEB] All runtime content view loaded。对照两者可以发现除目录名、id、样式类名与组件文案不同外其index.tsx的挂载模式完全一致这正是“复制文件夹即可新增脚本”这一设计的体现。由于matches目录中的每个文件夹都会由 get-content-script-entires.ts 自动收集为独立入口新增脚本不需要修改任何配置文件——复制、改名、编辑三步即可。与静态 Content Scripts 的协同与选型建议回到 chrome-extension/manifest.ts可以看到静态声明的 content scripts 会根据matches自动注入。运行时注入与静态注入的协同场景大致如下页面加载时就必须存在的注入优先使用 manifest 静态声明如content/all.iife.js浏览器保证注入时机与顺序需要按需触发点击弹窗按钮、收到消息、用户操作后才注入、或希望精确控制注入目标的 UI使用 Content Runtime Script chrome.scripting.executeScript它不受 manifest 匹配规则的束缚完全由业务代码决定注入时机与目标标签页。从 README 的默认用法看popup弹窗是最典型的触发入口用户点击扩展图标后根据当前标签页 URL 决定是否注入、注入哪个脚本这与模板中 pages/popup 模块的定位相符。在实际项目中你完全可以将触发逻辑迁移到 background service workerchrome-extension/src/background/index.ts中结合消息传递实现更复杂的注入决策。总结Content Runtime Script 模块以极低的接入成本提供了“运行时按需注入 React UI”的能力一个文件夹即一个注入入口构建自动产出content-runtime/{folder}.iife.js配合chrome.scripting.executeScript即可在任意目标页面动态挂载 UI底层initAppWithShadow的 Shadow DOM 方案则保证了注入内容与宿主页面之间的样式隔离。结合本仓库的 pages/content-runtime/README.md、pages/content-runtime/src/matches/example/index.tsx 与 packages/shared/lib/utils/init-app-with-shadow.ts你可以快速搭建属于自己的运行时注入方案。关键参考路径Content Runtime 使用文档预置示例入口example预置示例入口all入口自动收集逻辑Shadow DOM 注入实现扩展 manifest 权限与静态注入声明赞分享前端示例工程【免费下载链接】chrome-extension-boilerplate-react-viteChrome Extension Boilerplate with React Vite Typescript项目地址https://gitcode.com/GitHub_Trending/ch/chrome-extension-boilerplate-react-vite点击查看免费下载相关推荐oneTBB Flow Graph 保留式 join_nodeReservation协议解析与实战oneTBB Flow Graph 保留式 join_nodeReservation协议解析与实战 导读 本文以 mold 项目所携带的 oneTBBTh前端示例工程Chrome 扩展 Content UI 指南基于 React Vite 向指定页面注入组件chrome-extension-boilerplate-react-viteChrome 扩展 Content UI 指南基于 React Vite 向指定页面注入组件chrome extension boilerplate r前端示例工程深入解析 chrome-extension-boilerplate-react-vite 的 extension/env 环境变量包从 .env 到构建流程的完整指南深入解析 chrome extension boilerplate react vite 的 extension/env 环境变量包从 .env 到构建流程前端示例工程上一篇OpenVINO属性配置指南设备参数与性能调优详解下一篇Go语言设计模式持续集成从零构建可靠的测试验证体系创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考