Chrome 下 ContentScript 和 UserScript 的联系和调试

Extension 与 UserScript 区别

经过观察，Chrome 下的 UserScript 属于一种特殊的扩展（Extension）；它属于 Extension 中的 ContentScript 部分，没有自己的后台页面（backgroundPage），因此功能是受限的。

关键的问题是不能直接调试它，每次打断点或输出到控制台是极不方便的。

做一个简易的REPL

事件通知是一种可行的方式，通过 DOM 上的自定义事件让前台页面与 ContentScript 通讯。

数据共享有几种方式，比如 localStorage、Cookie、DOM Dataset。选择最后一种最方便，没有数据的大小限制，页面退出时也不会造成不好的影响。

示例的目的是，直接通过输入脚本片断，来了解 ContentScript 中的环境状态，或执行 ContentScript 中的函数。

前台UI和脚本片断示例

实际应用中应该在 UserScript 中动态构建调试用的UI。

共享事件的方法是 document.createEvent('Event') 来创建一个事件，然后初始化并发布这个事件。

这样，前台页面和 ContentScript 就能够互相进行通知。

UserScript 示例

* 原理：直接生成动态脚本或函数转字符串再执行

反过来，UserScript 通知前台页面有两种办法：

• 直接插入外联脚本或动态创建脚本，对应的上面的 requireScript 和 globalEval。要小心翼翼！注意：这样做会影响前台页面的全局环境，比如需要以这样的方式引入了jQuery的话，要记得使用 jQuery.noConfict 方法返回全局变量 jQuery。
• 同样，也可以用共享的事件通知。