如何用TypeScript开发支持热重载的Greasemonkey用户脚本

完全可行。目前大量公开的Tampermonkey/Greasemonkey用户脚本都在使用TypeScript+React技术栈开发，配合构建工具可以实现和普通前端项目一致的开发体验，包括热重载、类型校验、模块化代码组织，不需要每次修改代码后手动复制粘贴到脚本管理器后台。

项目初始化 #

• 用Vite创建空项目，选择React+TypeScript模板，删掉默认的示例页面、静态资源等冗余文件。
• 安装油猴脚本对应的TypeScript类型定义包，开发时可以获得GM_*系列API、脚本管理器内置方法的完整类型提示，避免拼写错误和参数类型问题。
• 单独维护一份油猴脚本头配置，把@name、@match、@grant、@run-at这类脚本元信息统一写在配置里，后续构建时会自动插入到输出脚本的最顶部，不需要手动维护。

构建配置适配 #

• 修改构建工具的输出规则，关闭代码分割、资源抽离配置，最终输出单个JS文件——用户脚本本质就是单段注入到页面的JS，多文件输出会导致脚本管理器无法正常加载。
• 配置构建工具保留脚本头部的元信息注释，不要在压缩阶段把这部分注释删掉，否则脚本管理器识别不到匹配规则、权限声明，脚本不会正常运行。
• 做DOM和样式隔离：脚本注入时先在目标页面创建独立的根DOM节点，最好把节点挂在Shadow DOM下，React应用直接挂载到这个独立节点上，配合CSS Modules或者CSS-in-JS方案，避免脚本的样式、DOM结构和原页面互相冲突。

热重载开发环境搭建 #

• 启动本地开发服务，默认会在本地端口生成可访问的开发版脚本资源。
• 先在Tampermonkey/Greasemonkey里安装一个极简单的“跳板脚本”：元信息里配置好你要注入的目标页面URL、开发需要用到的所有@grant权限，脚本本体只做一件事——动态往页面插入script标签，src指向本地开发服务的脚本地址，地址后面拼上随机时间戳参数避免浏览器缓存。
• 给本地开发服务配置跨域响应头，允许目标页面的域名加载本地端口的脚本资源，否则会被浏览器的跨域策略拦截。
• 开启构建工具自带的热更新能力，之后修改TS、React代码时，改动会自动同步到打开的目标页面上，不需要手动刷新页面，和开发普通Web项目的热重载体验完全一致。

• 本地开发阶段不要把React、ReactDOM这类依赖配置为外部CDN资源，会导致热更新失效；等最终打包发布的时候，再根据脚本体积需求决定是否把大体积依赖换成CDN引入。
• 如果目标页面配置了严格的内容安全策略（CSP），可能会拦截本地开发服务的脚本加载，开发阶段可以给脚本管理器开启绕过页面CSP的权限，或者临时用浏览器插件禁用对应页面的CSP规则；正式发布的脚本由脚本管理器直接注入，不会受页面CSP限制。
• 如果开发过程中需要用到GM_setValue、GM_xmlhttpRequest这类特殊API，记得在跳板脚本的头部提前声明对应的@grant权限，否则本地注入的脚本拿不到这些API的调用权限。

内容的提问来源于stack exchange，提问作者sjiamnocna