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

Question

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

谢谢！

Answer 1

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

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

//@ sourceURL=send_links.js

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

Answer 2

All Injected Filesor Content Scriptsare Exposed to Page Developer Tools，您可以设置断点以及您在常规 Java 脚本页面上执行的所有常规操作。

_{（来源：google.com）}

您的所有控制台日志都出现在它们被注入的页面中。

前任：

如果我注入http://www.google.co.in/console.log(document.getElementsByTagName('body')[0].style); ，那么我需要打开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 > Content Scripts > One 其中（例如）下找到该脚本。

编辑的源文件