了解插件React Developer Tools

最近工作需要写了个小插件项目，完成后简单记录了一下探索入门的过程。

前端使用的react框架，了解一下平时开发会用的Chrome插件React Developer Tools ，

作为后面搭建自己小插件项目的参考。

1. 插件和web页面一样都是写html, css, js

先检查React Developer Tools 的popup 页面（图中弹框页）

可以看到，Chrome插件的这个popup页面，实际上就是一个网页，由HTML、CSS、JS、组成。

然后看看官网文档的定义，这样看，Chrome插件内容跟一个网页内容一样，跟web页面一样都是写html, css, js

developer.chrome.com/docs/extens…

Extensions are written with the same web technologies used to create web applications

2. 插件和web页面的区别

Chrome Apis

主要就是插件内能调用额外的 Chrome APIs. 使用这些api可以跟web页面交互（interact with the content of web pages）实现一些对页面的操作。

developer.chrome.com/docs/extens…

然后检查web页面，简单看一下React Developer Tools 插件中 使用的Chrome Api 。

如下图使用chrome.runtime 来传输信息。

总结一下：浏览器插件(chrome extension) 实际上依旧是写网页。然后多了一些Chrome Api，用来增强浏览器功能。其实也就是extension 延伸扩展的意思。

插件和web页面交互

然后可以看看文档，了解一下，写一个简单的插件demo 需要哪些内容。以及通过插件和web网页做简单的交互，获取web网页中的内容。

developer.chrome.com/docs/extens…

以上观察React Developer Tools，看到两个重要的部分content scripts 和 弹框 popup部分。

有几个关键点：

1. 一个重要的manifest.json。简单理解，这个 manifest.json就是插件的必备的配置文件，且名称明确为manifest.json。

The extension's manifest is the only required file that must have a specific file name: manifest.json

1. 弹框 popup部分是可以直接使用Chrome Api 。

An extension can include various HTML files, such as a popup, an options page, and other HTML pages. All these pages have access to Chrome APIs.

1. 用content scripts 与 web页面交互。

Content scripts execute Javascript in the context of a web page. They can also read and modify the DOM of the pages they're injected into. 

知道以上内容后，插件和web页面交互方式。例如以下步骤：

1. 可以在popup页面中用chrome.tabs.sendMessage 发送请求a

2. 然后在content scripts 中chrome.runtime.onMessage.addListener监听到a；获取一些web网页data，再sendResponse回popup页面。

3. popup页面拿到网页data后，可直接发起http请求（可实现跨域请求），保存网页data

3. React Developer Tools的manifest源码

然后看看 刚刚我们观察的React Developer Tools，先看看manifest.json文件, 两个重要的部分content scripts 和 弹框 popup这两部分是怎么在manifest.json中引用。

github.com/facebook/re…

可以看到源码中，有配置不同浏览器的manifest，然后往下查看chrome的manifest。

github.com/facebook/re…

细节点：默认配置的文件，会根据网页是否用了react开发，会切换引用的文件。

比如默认popups/disabled.html , 然后当打开react开发的网页时，引入的是popups/production.html。

这里是因为调用了chrome.browserAction.setPopup 动态设置 popup 导入的html。如下图源码。

vite+react 构建

在构建完整项目前，先找了一个github上的获取图片的插件

github.com/QiYuOr2/chr…

可以看到这个插件，主要包括3个部分，入口文件manifest，然后是popup页面部分和content-script。

如上例，直接这样用html+js+css 就能完成插件的内容。然后考虑到后期开发方便快捷，还有配置环境变量，代码规范管理等。

1. 考虑了一下用vite来打包管理，react-devtools-extensions 源码中 用了webpack打包，这里vite相当于代替了webpack。

2. 引入react+antd写popup页面部分, 就当做写一个web页面一样。

3. 然后manifest 因为需要放在根目录下，manifest和图片部分就直接放public处理。

4. 另外单独的content-script 部分在vite build中单独打包配置。（注意manifest中引入的路径）

vite打包

在manifest.json 中引入popup 和contentScript 这两个部分。

在打包配置vite.base.config.js 中配置打包contentScript.js

到这里，项目构建好，把打包完成的dist 文件上传到浏览器上，就可以调试了。

调试避坑点

1. 插件刷新 content_scripts

开发环境，vite配置 --watch。这时修改代码保存后，会自动触发run build:dev 重新打包, 这时更新了dist文件。

  "build:dev": "APP_ENV=development vite --config build/vite.config.js build --watch",

然后，重新点开popup页面时会发现页面更新了，但是这不是插件热更新了。

如果保持popup一直打开状态，dist文件更新时，并不会热更新popup页面。

因为重新点开popup页面时，这时会重新加载dist文件，相当于做了popup 页面reload的。

实际上，可以看到其他文件，像content_scripts文件不会更新。

手动处理：在管理扩展程序中，点击刷新加载content_scripts

然后，会发现，刷新后，重新打开的web页面查看contentScript.js 已经更新了

1. web页面刷新 content_scripts

但是，之前已经打开的web页面，contentScript.js 还是没更新。

因为新打开的tab 才会加载新的content_scripts ，之前打开的tab 需要刷新，重新加载新的content_scripts。