1. 背景
为了方便 Cyra 用户查看/管理项目中的视图及视图间的跳转和数据传递，决定开发一个 Chrome extension（扩展）来方便展示。开发中，最关键的问题在于如何解决各模块之间的通信。最终的实现效果如下图：
2. 开发
2.1 模块划分
这部分网上已经有很多文章来介绍，在此不再赘述。但网上涉及到devtools类型的插件比较少，所以简单介绍下。首先，在 devtools 中创建的 panel 本质是一个 HTML 页面。代码主要分为以下4部分：
- background.js：Chrome 为扩展提供的一个独立的脚本运行环境，在本例中，主要作为 content_script.js 和 devtools.js 之间通信的桥梁，因为 Chrome 并没有提供后面二者直接通信的服务。
- content_script.js：用来向打开的页面注入脚本。
- devtools.js：用来在 devtools 中创建一个 panel，并实现该 panel 和 background.js 之间的通信。
- draw.js：devtools.js 中创建 pan