在哪里放置Bugsnag脚本用于Chrome扩展集成

Question

我正在第一次开发Chrome扩展程序，并试图集成Bugsnag的错误报告。

我发现了很多有用信息，但我不知道如何将bugsnag实际加载到扩展中。(例如，在后台脚本、内容脚本、background.html页面或其他地方)。是否编写代码将脚本标记插入到页面中？

Bugsnag 安装文档建议配置

<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-2.min.js"
     data-apikey="YOUR-API-KEY-HERE"></script>

我试着把它添加到background.html页面中，但是没有结果。我还尝试将cloudfront脚本添加到扩展中的内容和背景脚本中，但是加载它时遇到了问题。

Uncaught ReferenceError: Bugsnag is not defined

类似地，哪里是对bugsnag脚本的引用并修改Bugsnag对象的最佳位置(例如，

Bugsnag.beforeNotify = function (error, metaData) {
    error.stacktrace = error.stacktrace.replace(/chrome-extension:/g, "chromeextension:");
}

允许扩展错误达到错误，如建议的这里。

意识到这是一个非常基本的设置问题，但是在为这个特定的用例找到方向时遇到了一些困难。谢谢你的建议！

Answer 1

你想要包含一个外部脚本。这将是艰难的-扩展主要是期望他们所有的资源捆绑在一起。

对于扩展页(背景/弹出)，是的，您可以包括它，但是：

1. 您需要将允许此代码作为异常的声明CSP。
2. 您必须通过https://显式加载它，协议相对URL //...会失败，因为原语有chrome-extension://... URL。

对于内容脚本，它将更加复杂。您不能使用标记方法，因为<script>标记中的任何内容都指向页面上下文，而不是内容脚本上下文。

因此，您需要用executeScript注入它，因为以前用XHR下载了它(您不能为executeScript指定远程URL，但可以指定包含代码的字符串)。显然，您需要使用替代方法进行设置API键。

请注意，Bugsnag 提及可能在本地捆绑代码：

如果要避免额外的阻塞请求，可以将javascript包含在资产编译过程中，以便将其内联到现有的脚本文件中。唯一需要确保的是，在运行onload处理程序之前包含了Bugsnag。

因此，上述所有这些都可以安全地忽略。但这将取决于你保持最新的脚本。