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

Question

也许这个问题有点新手风格，但我不理解JavaScript的东西。我的问题是:如何调试以下chrome extension example的注入代码？文件popup.js执行send_links.js (如果我理解正确的话，这是注入的文件)。我想调试send_links.js。我不能设置任何断点，因为我在Chrome的开发者工具中看不到send_links.js。我在send_links.js中尝试了命令"debugger;“，但它不起作用。"console.log("blah");“命令也会被忽略。

谢谢!

Answer 1

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

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

//@ sourceURL=send_links.js

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

Answer 2

我猜这是因为您在选项卡上打开调试器工具，而不是在扩展上。右击您的分机图标，选择Inspect popup菜单项。您可以在此页面上找到更多信息http://developer.chrome.com/extensions/tut_debugging.html

Answer 3

在这种情况下，直到您打开弹出窗口，脚本才会被注入。弹出窗口加载后，它注入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放到每个页面中，以便您可以更轻松地对其进行调试。一旦它没有bug，你就可以切换回编程注入，因为在这样的情况下，它更有效。您可以在Sources > Content Scripts >其中之一(例如plfdheimenpnchlahmhicnkejgmhjhom)下找到该脚本。

Edited source files