在 Chrome 扩展后台脚本中使用 Sentry 不起作用答案

【问题标题】：Using Sentry in Chrome Extension Background script not wroking在 Chrome 扩展后台脚本中使用 Sentry 不起作用
【发布时间】：2020-07-13 01:05:30
【问题描述】：

我查看了官方哨兵文档，还查看了其他一些参考资料，但我找不到解决方案...

基本上我正在尝试在我的浏览器扩展中安装哨兵。

所以在我的 background.js 中我做了以下操作

从 '@sentry/browser' 导入 * 作为 Sentry；

Sentry.init({
  dsn: '...'
});

但是...这没有做任何事情？ - 它似乎也停止了我的其余代码的工作，例如：

我的 background.js 中有以下代码

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete') {
      currentTab = tab;
      console.log(tab);
    }
  });

现在，如果我注释掉哨兵初始化，此代码将按预期工作，但一旦我将哨兵初始化重新放入，此代码将不再运行。

我没有收到任何错误，也找不到任何关于如何使用浏览器扩展程序实现哨兵的真实示例。现在我知道这是可能的，但我显然做错了什么？

【问题讨论】：

为了能够使用import 语句，您需要一个能够正确处理模块的编译器/捆绑程序（检查您的 webpack 配置）或切换到后台页面 html 并将您的脚本声明为模块，请参阅 this，但本机模块不支持 @sentry/browser 语法，因此您必须使用不同的包。

标签： javascript webpack google-chrome-extension sentry

【解决方案1】：

我似乎找到了解决问题的方法，我正在使用 webpack 将我的 chrome 扩展与所需的依赖项捆绑在一起。 Webpack 正在生成一个 vendor.js 文件，其中包含所有导入的依赖项。就我而言，我犯的错误是没有将该文件作为脚本添加到 manifest.json 文件中。

...
      "background": {
        "matches": ["https://*/*"],
        "scripts": ["js/vendor.js","js/background.js"],
        "persistent": true
      },
...

这解决了问题，因为现在可以正确加载依赖项。

【讨论】：