如何在 Chrome 扩展内容脚本中获取错误堆栈跟踪?

问题描述

有一个带有 的 Google Chrome 扩展程序处理所有标签页上发生的 JS 错误的内容脚本.但问题是没有任何一种获取错误堆栈跟踪的常用方法不起作用.

There is a Google Chrome extension with content script that handles JS errors occured on all tabs pages. But the problem is that no one of usual methods of getting errors stack trace does not work.

比如Chrome扩展的content script中有一段代码:

For example, there is a code in content script of Chrome extension:

window.addEventListener('error', function(event) {
    console.log(event.error.stack); // event.error will be null
}, false);

如果我在网页中调用此代码，那么 event.error 将包含具有 stack 属性的 Error 对象.

If I call this code inside web page, so event.error will contains Error object with stack property.

尝试使用以下方法获取堆栈跟踪的问题:

Same problem with trying to get stack trace using:

console.log((new Error()).stack));

是否有人知道在 Chrome 扩展程序的 content script 中获取错误堆栈跟踪的一些工作问题?

Does anybody knows some working issue to get error stack trace inside content script of Chrome extension?

错误堆栈跟踪必须以string或Array的形式接收，这意味着不仅仅是通过调用console.trace().

Error stack trace must be received as string or Array, means not just like some output in JS console by calling console.trace().

如何复制:

1. 下载https://mega.co.nz/#!ENw00ZAC!92LYKyp-PU5YAj0h88-3Q
2. 将 jzen.zip 解压到某个 /jsen 文件夹
3. 在 Google Chrome 中打开 chrome://extensions，启用 Developer mode http://i.imgur.com/5x5D6NP.png
4. 点击Load unpacked extension按钮并选择/jsen文件夹的路径
5. 打开 /jsen/content.js 文件并在 window.addEventListener('错误', 函数(e) {
6. 转到 http://xpart.ru/_share/js.htm 并查看结果在 JS 控制台中(Ctrl+Shift+J)
7. 尝试编辑/jsen/content.js以获得正确的错误跟踪
8. 要重新初始化 Chrome 扩展程序源代码，请点击 http://i.imgur.com/SjFgkHA.png

1. Download https://mega.co.nz/#!ENw00YAC!92gBZEoLCO9jPsWyKht4dbjYyo0Zk-PU5YAj0h88-3Q
2. Unpack jzen.zip to some /jsen folder
3. Open chrome://extensions in your Google Chrome, enable Developer mode http://i.imgur.com/5x5D6NP.png
4. Click Load unpacked extension button and select path to /jsen folder
5. Open /jsen/content.js file and add console.log('JSEN', e.error.stack); inside window.addEventListener('error', function(e) {
6. Go to http://xpart.ru/_share/js.htm and see result in JS console(Ctrl+Shift+J)
7. Try to edit /jsen/content.js to get correct error trace
8. To reinitialize Chrome extension source code click http://i.imgur.com/SjFgkHA.png

推荐答案

如你所说，在 Content 中捕获事件时，事件对象的 error 属性为 null脚本上下文，但在网页上下文中捕获时具有所需的信息.因此，解决方案是在网页上下文中捕获事件并使用消息传递将其传递给内容脚本.

As you mention, the error property of the event object is null when capturing the event in Content Script context, but it has the required info when captured in webpage context. So the solution is to capture the event in webpage context and use messaging to deliver it to the Content Script.

// This code will be injected to run in webpage context
function codeToInject() {
    window.addEventListener('error', function(e) {
        var error = {
            stack: e.error.stack
            // Add here any other properties you need, like e.filename, etc...
        };
        document.dispatchEvent(new CustomEvent('ReportError', {detail:error}));
    });
}

document.addEventListener('ReportError', function(e) {
    console.log('CONTENT SCRIPT', e.detail.stack);
});

//Inject code
var script = document.createElement('script');
script.textContent = '(' + codeToInject + '())';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

所使用的技术描述于:

• https://stackoverflow.com/a/9517879/1507998
• https://stackoverflow.com/a/9636008/1507998

这篇关于如何在 Chrome 扩展内容脚本中获取错误堆栈跟踪?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！