调试Chrome扩展程序的内容脚本

Question

一般问题

您好！我正在钻研Chrome扩展程序的世界，并且在整体工作流程下降方面遇到了一些问题。似乎Google最近转而大力提倡事件页面，而不是将所有内容保存在background.js和background.html中。我认为我们应该将大部分扩展逻辑传递给内容脚本。

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

以另一种方式做到这一点有什么好处？

我的代码

我正在采用注入内容脚本的编程方式，例如谷歌的例子。

的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。我试过查看后台页面调试器的Sources选项卡的“内容脚本”部分。关于SO的一些其他帖子建议添加debugger;语句来展示它，但我没有任何运气。我见过的最接近的解决方案是this post，但是通过在清单中列出内容脚本来完成。

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

Answer 1

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

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

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

Answer 2

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

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

然后你可以在dev工具中看到源文件（但不是后台html窗口）