解决 Chrome 更新后 HackBar 插件消失无法加载的问题

小记

前言

最近我突然发现自己经常用的渗透测试插件hackbar突然不能用了，具体情况是，在打开插件的情况下，F12后理应出现hackbar那一栏的，直接消失了。

卸载重新安装、github原项目上下载插件再安装……等等方法都试了，就是不行，最终换了个Edge浏览器就行了。

但是我还是习惯用Chrome了，每次都要打开Edge再渗透对我来说还是不舒适的，想彻底解决这个问题。

排查

学网安的都知道，当遇到一个完全没碰到过的问题时，除了问身边大佬，唯一的办法就是上网搜了，不过很遗憾，关键词搜索后网上都没有相应的解决方案。

我想拓展都是执行的JS代码，那就要看看具体的JS报错信息。hackbar需要打开一个网站才会工作，所以我们随便打开任意网站，然后再“F12”调出开发者工具。 Hackbar这种浏览器扩展是注入到DevTools里的一个脚本，而DevTools其实本身也是一个“网页”，也是由 HTML、CSS 和 JavaScript 写成的 Web 应用，所以我们要想调试Hackbar插件，就得再给DevTools开启DevTools，这样也许就可以看到hackbar执行过程中的一些报错信息。具体操作如下：

确保开发者工具是独立窗口模式（如果是固定在网页底部的，点击右上角三个点 -> Dock side(中文：停靠侧) -> 选择最左边的“Undock into separate window”（中文：取消停靠至单独的窗口）图标）。

image-20260116155522880

然后在这个独立的 F12 窗口上，再次按下 Ctrl + Shift + I :

image-20260116160207595

可以看到新弹出来的devtools中有了我们hackbar的报错内容，点击具体报错的位置：

image-20260116161458235

那么就是这里了。具体js代码我不是很懂，尤其一大坨，我直接报错信息+devtools.js 代码内容复制给gemini，让它进行了解答：

核心原因如下：

**事实：**HackBar 的源码是基于 WebExtension 标准 编写的。这个标准规定插件 API 的统一入口是 browser.* （例如 browser.devtools）。

冲突： 虽然 Chrome 支持 WebExtension 的大部分功能，但它作为“浏览器霸主”，一直坚持保留自己的私有命名空间 chrome.*。

结果： Chrome 的 JS 引擎里，默认根本不存在 browser 这个对象。

  • Firefox：window.browser ✅
  • Chrome：window.chrome ✅，window.browser ❌ (undefined)

这就是为什么看到报错 Cannot read properties of undefined —— 代码在找 browser，但 Chrome 说“查无此人”。

既然 Chrome 没有 browser 对象，开发者为了偷懒（一套代码跑两个浏览器），引入了一个 Polyfill 库。它的作用是在 Chrome 里手动造一个 browser 对象，把 chrome 的功能映射过去。 问题应该就是在hackbar使用的这个Polyfill 库比较老旧，导致出现了一些不兼容的问题。

所以本质就是chrome更新导致hackbar使用的依赖库出现了一些不兼容问题，导致无法使用。

解决方案

具体原因也无法仔细排查下去了，接下来gemini推荐我的解决方案是让我修改了拓展的几处代码。

最好是从github 上下载拓展文件包，在这个上面修改。

首先是devtools.js，源文件代码改成如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function () {
    'use strict';

    // 1. 移除了所有 browser-polyfill 的代码，直接使用 Chrome 原生 API
    // 2. 这里的 chrome.devtools.panels.create 是 F12 面板的标准接口
    try {
        chrome.devtools.panels.create(
            "HackBar",      // 面板显示的名称
            "icon.png",     // 图标
            "main.html",    // 面板加载的 HTML 页面
            function(panel) {
                // 回调函数，创建成功后执行，这里留空即可
                console.log("HackBar 面板创建成功"); 
            }
        );
    } catch (e) {
        // 如果报错，会在控制台打印出来，方便调试
        console.error("HackBar 创建失败:", e);
    }

})();

其次是main.js，加上一行代码：

1
2
3
4
window.browser = chrome;// 文件开头加上这行代码
(function () {
  'use strict';
..............

然后chrome中在开发者模式中将我们修改好的这个hackbar拓展项目加载进来就可以了，然后就会发现熟悉的hackbar又回来了。

image-20260116164909690