Main World 实战：让 Chrome 扩展和网页直接对话

最近做项目时踩了个坑：有个网页的全局配置对象需要改一下，结果用普通的内容脚本怎么都访问不到。折腾了好久才发现，原来 content scripts 是在隔离环境里跑的，压根碰不到网页的全局对象。

后来才发现 Chrome 扩展还有 main world 这么个好东西，用起来特别爽，今天就把这方面的经验跟大家唠唠。

Main World 是什么？

说白了，main world 就是网页自己的 JavaScript 地盘。我们在浏览器控制台里敲的代码，或者网页自带的 JS，都在这块地盘上混。跟扩展的隔离环境不一样，在 main world 里跑的脚本可以直接操作网页的全局对象，比如 window 和网页自己定义的变量。

这种感觉就像是从扩展的”小单间”搬到了网页的”大平层”，想干啥都方便得很。

在 Plasmo 里用 main world 简直不要太省心，只要在内容脚本配置里加个 world: "MAIN" 就完事了：


// content.ts
export const config: PlasmoContentScript = {
  matches: ["https://*.example.com/*"],
  world: "MAIN" // 加上这个就搞定
}

配好之后 Plasmo 会自动帮你搞定所有底层细节，这种声明式的开发方式用起来真的很舒服，再也不用操心那些复杂的注册流程了。

Plasmo 在背后默默做了不少工作来支持 main world。它会用 Chrome 的 scripting.registerContentScripts API 来动态注册脚本，还会自动给你加上需要的 scripting 权限。

要是项目里有 main world 脚本，Plasmo 还会自动创建后台服务来管着这些脚本，确保一切运行得顺顺当当的。

从我实际项目的踩坑经验来看，main world 在下面这些场景特别好使：

像我之前那个项目，需要改网页的一个全局配置对象，用普通内容脚本根本够不着，换成 main world 后一下子就搞定了。

主要区别就在执行环境这块：

选哪个得看具体需求。如果只是读读页面内容或者加个 UI 元素，普通内容脚本就够用了。但要深度修改网页行为，main world 绝对是更好的选择。

在实际开发踩坑过程中，我发现几个特别实用的点：

检查有没有 main world 脚本： Plasmo 提供了 hasMainWorldScript 属性可以快速检查，还有 mainWorldScriptList 能让你看到所有 main world 脚本的列表。

自动更新机制：内容脚本有变化时，如果项目里有 main world 脚本，系统会自动更新后台服务，确保注册逻辑永远都是最新的。

代码生成过程： Plasmo 会为每个 main world 脚本生成对应的导入语句和注册代码，包括脚本路径、配置这些细节都给你处理好了。

虽然 main world 很强大，但用的时候还是得注意几点：

Main world 是 Chrome 扩展 Manifest V3 的一个高级功能，Plasmo 通过自动化把使用难度降到了最低。我们开发者只要专心搞业务逻辑就行，框架会把所有注册、权限和后台服务的麻烦事都处理掉。

这种”声明式开发”的理念真的很符合现代前端的调性——让开发者专注业务，框架处理底层。如果你也遇到过需要直接操作网页全局对象的情况，不妨试试 main world 功能，用起来真的挺顺手的。

有什么问题或者想分享的经验，欢迎在评论区一起唠唠！