如何使用代码注入调试Chrome扩展示例？

Question

也许这个问题有点像菜鸟风格，但我不明白这个JavaScript的东西。 我的问题：如何调试以下注入的代码 chrome extension example？ popup.js文件执行send_links.js（这是注入的文件，如果我理解这是正确的）。我想调试send_links.js。我无法设置任何断点，因为我无法在Chrome的开发者工具中看到send_links.js。我尝试了命令“debugger;”在send_links.js但它不起作用。 “的console.log（” 等等 “）;”命令也被忽略。

谢谢！

Answer 1

如果在按下操作按钮之前打开当前选项卡的开发人员工具，debugger关键字将起作用。

此外，如果您希望脚本显示其名称，请在send_links.js中的任意位置添加以下行：

//@ sourceURL=send_links.js

然后该脚本将显示在当前选项卡的Developer Tools的“Content Scripts”选项卡中。在那里你可以设置断点等。但是，在按下按钮之前，您需要始终打开选项卡的开发人员工具。

Answer 2

所有Injected Files或Content Scripts都暴露于Page Developer Tools，您可以设置断点以及您在常规Java Script Pages上执行的所有常规操作。

所有控制台日志都会显示在它们注入的页面中。

实施例

如果我将console.log(document.getElementsByTagName('body')[0].style);注入http://www.google.co.in/，那么我需要打开http://www.google.co.in/页面的devtools并查看其控制台。

出现的输出类似于常规调试结果。

编辑1

它们通过chrome.tabs.executeScript()公开，但间接地，当您设置debugger;命令时，您可以检查代码。

示范

如果某些示例代码注入

chrome.tabs.executeScript(35, {
    "code": "console.log('hi');debugger;//@ sourceURL=send_links.js"
});

页面调试器显示正在注入的脚本。

Answer 3

我想这是因为您在选项卡上打开调试器工具而不是在扩展上。右键单击扩展程序的图标，然后选择检查弹出窗口菜单项。您可以在此页http://developer.chrome.com/extensions/tut_debugging.html

上找到更多信息

Answer 4

在这种情况下，在打开弹出窗口之前不会注入脚本。加载弹出窗口后，它会注入send_links.js，"content_scripts": [{ "matches": ["<all_urls>"], "js": ["send_links.js"] }], 会在获取链接后立即发送消息。您可以撤消此消息传递并将文件注入清单：

send_links.js

向chrome.extension.onMessage.addListener(function(message,sender,sendResponse){ [...] sendResponse(links); }); 添加一个消息处理程序，并支持发送响应

onMessage

然后使用executeScript回调替换弹出窗口中的sendMessage处理程序和chrome.windows.getCurrent(function (currentWindow) { chrome.tabs.query({active: true, windowId: currentWindow.id},function(tab) { chrome.tabs.sendMessage(tab[0].id, {method: "getlinks"},function(links){ for (var index in links) { allLinks.push(links[index]); } allLinks.sort(); visibleLinks = allLinks; showLinks(); }); }); });

send_links.js

这种安排会将plfdheimenpnchlahmhicnkejgmhjhom放入每个页面，以便您可以更轻松地调试它。一旦它没有错误，你可以切换回程序化注入，因为在这样的情况下它更有效。 您可以在Sources＆gt;下找到该脚本。内容脚本＆gt;其中之一（例如{{1}}）。

Edited source files