十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Harper Chrome 扩展:离线运行的私有语法检查器安装、架构与更新机制

Harper Chrome 扩展:离线运行的私有语法检查器安装、架构与更新机制 Harper Chrome 扩展离线运行的私有语法检查器安装、架构与更新机制【免费下载链接】harperOffline, privacy-first grammar checker. Fast, open-source, Rust-powered项目地址: https://gitcode.com/GitHub_Trending/har/harper本文基于 Harper 仓库中 Chrome 扩展的官方集成文档packages/web/src/routes/docs/integrations/chrome-extension/page.md展开讲解如何在 Chrome 中安装并更新 Harper 浏览器扩展、它为何能在完全离线的环境下完成语法检查以及从 manifest.ts 到 background/index.ts 的源码级实现帮助读者在掌握日常安装运维的同时理解其隐私优先的底层设计。定位免费、离线、隐私优先Harper 的 Chrome 扩展面向所有 Chrome 用户提供免费的语法检查服务其核心差异化在于全部计算都在本地离线完成邮件、消息和文档的文本不会被发送到任何服务器语法规则引擎以 WASM 形式在浏览器内运行。这与依赖云端 API 的其他语法检查插件形成鲜明对比。隐私设计在扩展清单中有直接体现。从源码结构看manifest.ts 中makeExtensionCSP函数构建的内容安全策略CSP仅允许self wasm-unsafe-evalconnect-src中唯一的外部主机是官方域名用于有限的功能同步这意味着扩展页面在技术上被限制为只能加载本地资源和本地 WASM 二进制文件// packages/chrome-plugin/src/manifest.ts const scriptSrc [self, wasm-unsafe-eval]; // minimum, cannot add more const objectSrc [self]; // standard const connectSrc [self]; // WebSocket goes here此外package.json 声明该包基于 Apache-2.0 许可构建依赖harper.js、lint-framework两个工作区包以及 Svelte 5 前端框架进一步印证其引擎在端侧的技术路线。安装 Harper Chrome 扩展官方安装流程只有两步访问 Chrome 应用商店中的 Harper 扩展页面点击「Add to Chrome」。扩展安装完成后点击工具栏图标即可启用检查。从源码看安装时后台 Service Worker 会触发一段引导逻辑background/index.ts首次安装OnInstalledReason.INSTALL时扩展会设置卸载调研地址并自动打开一个安装引导页chrome.runtime.onInstalled.addListener((details) { if (details.reason chrome.runtime.OnInstalledReason.INSTALL) { chrome.runtime.setUninstallURL(https://writewithharper.com/uninstall-browser-extension); chrome.tabs.create({ url: https://writewithharper.com/install-browser-extension, }); } });该逻辑也解释了首次安装后会弹出一个标签页——这是正常的引导行为而非恶意跳转。对于希望自行构建的开发者仓库提供了打包脚本package.json# 构建 Chrome 版分发包 TARGET_BROWSERchrome npm run build node src/zip.js harper-chrome-plugin.zip此外扩展同时声明了 Firefoxgecko支持browser_specific_settings.gecko严格最低版本 146.0并附带zip-for-firefox脚本即同一套代码可跨 Chromium 内核与 Firefox 发布。扩展架构MV3 三件套 本地语法引擎官方文档指出扩展由harper.js驱动。在仓库中这对应 packages/harper.js 包其 README 明确写道It always runs on-device, which means there arent any privacy considerations or servers to run. 整体架构可归纳为三层后台 Service Worker消息路由与本地 Linterbackground/index.ts 是扩展的核心。它通过harper.js的LocalLinter在端侧执行检查并将结果经unpackLint解包后返回给内容脚本。handleRequest函数L215-L287实现了完整的消息协议路由包括消息类型功能lint对文本执行语法检查返回分组的 lint 结果setConfig/getConfig读写检查配置setDialect/getDialect切换英语方言美式/英式等addToUserDictionary将单词加入用户自定义词典ignoreLint忽略某条具体检查项setDomainStatus按域名启用/禁用检查addWeirpack/removeWeirpack管理自定义规则包其中方言在启动时自动检测detectDialect见 detectDialect.ts 所在目录持久化状态统一存放在chrome.storage.local的dialect、ignoredLints、lintConfig、weirpacks、userDictionary五个键中L108-L117。当这些键被整体清除时storage.onChanged监听器会自动重建 Linter保证配置一致性。默认启用的域名白名单Harper 采用默认对常用写作场景启用、其他域名手动开启的策略。defaultEnabledDomainsL118-L172覆盖了 GitHub、Reddit、Google Docs/Gmail、Discord、Notion、Slack、Medium 等约五十个站点并支持localhost以便本地开发调试。内容脚本DOM 扫描与 Lint 渲染contentScript/index.ts 在所有页面all_urls全部 frame以document_idle时机注入职责是扫描可编辑节点并将文本通过ProtocolClient提交给后台检查。核心设计点使用lint-framework包的LintFramework统一管理 DOM 目标、lint 渲染、忽略操作与热键L18-L38跳过不可见、disabled、readOnly以及显式声明data-enable-grammarlyfalse的输入框L64-L84通过每 400 毫秒一次的空文本 lint 请求作为心跳防止 MV3 Service Worker 休眠导致响应延迟L51-L58对 WordPress 和 Substack 站点会强制启用当前域名L14-L16因为这两个平台默认不在白名单中。Google Docs 场景更为特殊manifest 中额外注册了一个world: MAIN、document_start时机加载的googleDocsBootstrap.js内容脚本配合web_accessible_resources中的三个google-docs-bridge*.js文件以桥接方式注入 Docs 的富文本编辑器manifest.ts。这一机制有对应的 Playwright 集成测试覆盖包括闪烁、实时编辑、表格锚点等边缘场景google_docs.spec.ts、google_docs_flicker.spec.ts。更新 Harper Chrome 扩展Harper 团队会持续改进语法引擎并为扩展引入新功能因此保持最新版本能获得最佳体验。自动更新浏览器会在商店推送新版本后自动更新扩展通常无需手动干预。手动更新当自动更新延迟时可手动触发在地址栏导航到chrome://extensions打开右上角的 Developer mode开发者模式开关点击 Harper 扩展卡片上出现的 Update更新按钮。需要说明的一个现实约束是Google 的商店审核流程通常比其他平台例如文档中提到的 Obsidian 插件更慢因此 Chrome 扩展的新版本往往比其他集成晚几天才能到达所有用户。这是商店机制决定的与本地引擎的更新节奏无关。小结与延伸阅读Harper 的 Chrome 扩展用 MV3 的标准结构Service Worker 内容脚本 选项页承载了一个完全离线运行的 Rust/WASM 语法引擎harper.js负责在浏览器中加载 WASM 二进制并暴露LocalLinterbackground/index.ts负责消息路由与状态持久化contentScript/index.ts负责 DOM 层的目标扫描与结果渲染CSP 则从策略层面杜绝了外部代码与外部通信。如需深入可从以下仓库路径继续扩展清单与 CSP 构建manifest.ts后台消息处理与 Linter 初始化background/index.ts内容脚本与 DOM 扫描contentScript/index.ts底层 JS 封装包含 Web Worker 版 Linter 与 WASM 加载packages/harper.js/src端到端行为测试GitHub 页面、Quill/ProseMirror/Slate/Draft 编辑器、Google Docs 等packages/chrome-plugin/tests版本变更记录CHANGELOG.md【免费下载链接】harperOffline, privacy-first grammar checker. Fast, open-source, Rust-powered项目地址: https://gitcode.com/GitHub_Trending/har/harper创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表