调试 Chrome 扩展的内容脚本答案

【问题标题】：Debugging Content Scripts for Chrome Extension调试 Chrome 扩展的内容脚本
【发布时间】：2013-06-11 17:54:31
【问题描述】：

一般问题

你好！我正在深入研究 Chrome 扩展程序的世界，并且在降低整个工作流程方面遇到了一些问题。谷歌最近似乎转而大力提倡事件页面，而不是将所有内容都保存在 background.js 和 background.html 中。我部分理解这意味着我们应该将您的大部分扩展逻辑传递给内容脚本。

在Google's Event Page primer 中，它们的内容脚本列在 manifest.json 文件中。但是在他们的事件页面示例扩展中，它是通过 background.js 中的这个代码块引入的：chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

一种方式比另一种方式有什么优势？

我的代码

我将继续使用注入内容脚本的编程方式，例如 Google 的示例。

manifest.json

{
    "manifest_version": 2,
    "name": "Test",
    "description": "Let's get this sucker working",
    "version": "0.0.0.1",
    "permissions": [
        "tabs",
        "*://*/*"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png"
    }
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    console.log("alert from background.js");
    chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
        console.log("jquery Loaded");
    });
    chrome.tabs.executeScript({file: "content.js"}, function() {
        console.log("content loaded");
    });
});

content.js

console.log('you\'r in the world of content.js');
var ans = {};

ans.createSidebar = function() {

    return {
        init: function(){
            alert("why hello there");
        }
    }
}();

ans.createSidebar.init();

我能够让前 3 个console.log 语句显示在后台页面的调试器中。我还可以从 content.js 获取警报以显示在任何网站上。但是我无法从 content.js 中看到console.log，也无法从 content.js 中查看任何 JS。我尝试查看后台页面调试器的“源”选项卡的“内容脚本”部分。 SO 上的其他一些帖子建议添加debugger; 语句以使其显示，但我没有任何运气。我见过的最接近的解决方案是this post，但通过在清单中列出内容脚本来完成。

任何帮助将不胜感激。谢谢！

【问题讨论】：

你的问题解决了我的问题。通过清单注入内容脚本，我无法真正与网页的 DOM 进行交互。现在，通过 browser_action 加载 contentScript 解决了我的问题。谢谢。赞赏。

标签： debugging google-chrome-extension google-chrome-devtools content-script

【解决方案1】：

内容脚本的 console.log 消息显示在网页的控制台中，而不是后台页面的检查器中。

如果开发者工具（用于注入内容脚本的网页）打开，则添加 debugger; 有效。

因此，在这种情况下，您应该先激活（网页的）开发者工具，然后再单击浏览器操作图标，一切正常。

【讨论】：

很好，很有效！ debugger; 语句是否总是需要让调试器识别扩展环境中的内容脚本？似乎您可以通过一次设置断点。任何后续尝试运行扩展程序时，内容脚本都会加载到新环境中，并且您会丢失原始断点。
调试器将持续加载页面，如果您打开开发者工具 (F12)，它将始终中断。它们被硬编码到您的脚本中，所以不要忘记稍后删除它们。调试器适用于任何 javascript，它们不是内容脚本独有的。
如果内容脚本有括号不匹配等错误（例如，在传递内联函数作为参数后忘记关闭)），则不会给出错误并且即使使用debugger也会静默失败.这真是令人沮丧。你怎么能调试这个？
你把“调试器”放在哪里？在 background.js 或 contextscript.js 中？具体在哪里？
那么添加debugger; 是查看console.log 语句的唯一方法吗？

【解决方案2】：

我尝试使用debugger方法，但效果不佳，因为项目使用require.js 来捆绑javascript 文件。

如果您还使用require.js 进行chrome 扩展开发，您可以尝试在代码库中添加this 之类的内容，并将eval(xhr.responseText) 更改为eval(xhr.responseText + "\n//@ sourceURL=" + url);。（像这样question）

然后你就可以在你的开发工具中看到源文件了（但不是后台html窗口）

【讨论】：