Chrome 安装离线插件时报 CRX_HEADER_INVALID

一时失言乱红尘 2023-06-12 13:29 15阅读 0赞

# 下载 react-developer-tools.crx #

下载react developer tools离线的crx工具包，地址为：[http://chromecj.com/Handler/Download/890][http_chromecj.com_Handler_Download_890]

也可以上插件网下载，地址为：[http://www.cnplugins.com/devtool/react-developer-tools/download.html][http_www.cnplugins.com_devtool_react-developer-tools_download.html]

# 安装 react-developer-tools.crx #

## 打开 chrome 进入扩展程序页面 ##

两种方式

*  更多工具 ——> 扩展程序  
    ![在这里插入图片描述][20191113102951672.png]
 *  地址栏输入 `chrome://extensions/`

![在这里插入图片描述][2019111310353167.png]

## 添加插件 ##

如果直接拖动 react-developer-tools.crx 到插件页面，必然会报 CRX\_HEADER\_INVALID 错误。

同样有两种解决方案

*  用压缩软件打开 crx，然后解压。解压后，先打开“开发者模式”，再点击 “加载已解压的扩展程序”  
    ![在这里插入图片描述][20191113103343448.png]  
    ![在这里插入图片描述][20191113104604857.png]  
    ![在这里插入图片描述][20191113103439320.png]
 *  chrome浏览器默认不允许安装三方下载的扩展包，需要手动设置允许。打开浏览器的属性，在目标字段后面补上 `-enable-easy-off-store-extension-install`。确认后，回到插件页面，拖入插件 crx 文件即可 【**经测试，该方法无效**，无论是enable前面是一个横线还是两，都不顶用】  
    ![在这里插入图片描述][20191113103723499.png]

# 打包插件 #

之前网上下载的插件太旧了，节点展开效果不是很好，组件也不好定位。于是我就在别人翻墙的电脑上把他的 crx 打包出来，打包步骤如下

找到对应插件，点击 “详细信息”  
![在这里插入图片描述][20191129100629920.png]  
在详细信息栏目中可以查看到其ID  
![在这里插入图片描述][20191129101221342.png]  
Chrome插件路径，如下：`C:\Users\【用户名】\AppData\Local\Google\Chrome\User Data\Default\Extensions\fmkadmapgofadopljbjfkapdkoienihi`  
![在这里插入图片描述][2019112910190615.png]  
回到扩展程序页面，点击 “打开扩展程序” 按钮  
![在这里插入图片描述][20191129101929950.png]  
打开后把上面的路径复制进去，一直复制到版本号那边，然后点击打包即可。  
![在这里插入图片描述][20191129102208105.png]他会在之前目录的版本号文件夹下，生成 crx 扩展程序文件 和 pem 证书密钥文件  
![在这里插入图片描述][20191129102341602.png]资源 [https://download.csdn.net/download/chy555chy/12004926][https_download.csdn.net_download_chy555chy_12004926]

插件我有上传，没有积分的，可以留下你的邮箱，到时候私发给你  
（如果觉得有用，就点赞关注一下，谢谢）

# 附录 #

chrome 由于不能翻墙到 google 的商店，故只能从网上下载插件包，如果下的是旧的，那功能就比较弱了

因此推荐使用 firefox 浏览器，选项 —> 扩展和主题，直接搜索 react 即可（就是这么方便）  
![在这里插入图片描述][20200210204451858.png]

[http_chromecj.com_Handler_Download_890]: http://chromecj.com/Handler/Download/890
[http_www.cnplugins.com_devtool_react-developer-tools_download.html]: http://www.cnplugins.com/devtool/react-developer-tools/download.html
[20191113102951672.png]: https://img-blog.csdnimg.cn/20191113102951672.png
[2019111310353167.png]: https://img-blog.csdnimg.cn/2019111310353167.png
[20191113103343448.png]: https://img-blog.csdnimg.cn/20191113103343448.png
[20191113104604857.png]: https://img-blog.csdnimg.cn/20191113104604857.png
[20191113103439320.png]: https://img-blog.csdnimg.cn/20191113103439320.png
[20191113103723499.png]: https://img-blog.csdnimg.cn/20191113103723499.png
[20191129100629920.png]: https://img-blog.csdnimg.cn/20191129100629920.png
[20191129101221342.png]: https://img-blog.csdnimg.cn/20191129101221342.png
[2019112910190615.png]: https://img-blog.csdnimg.cn/2019112910190615.png
[20191129101929950.png]: https://img-blog.csdnimg.cn/20191129101929950.png
[20191129102208105.png]: https://img-blog.csdnimg.cn/20191129102208105.png
[20191129102341602.png]: https://img-blog.csdnimg.cn/20191129102341602.png
[https_download.csdn.net_download_chy555chy_12004926]: https://download.csdn.net/download/chy555chy/12004926
[20200210204451858.png]: https://img-blog.csdnimg.cn/20200210204451858.png