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

Question

常见问题

你好！我正在深入研究Chrome扩展程序的世界，并且在掌握整个工作流程时遇到了一些问题。似乎Google最近转向强烈倡导事件页(Event Pages)，而不是将所有内容都放在background.js和background.html中。我认为其中的一部分意思是我们应该将大部分扩展逻辑传递给内容脚本。

在Google的事件页入门指南中，他们在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"
    }
}

背景脚本.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();

我能在后台页面的调试器中看到前三个console.log语句。我也可以在任何网站中看到来自content.js的提示框。但我无法看到来自content.js的console.log，也无法查看content.js中的任何JS代码。我尝试查找后台页面调试器的Sources标签下的"content scripts"部分。一些其他帖子中建议添加debugger;语句以使其显示，但我没有任何好运。我看到的最接近的解决方案是这篇文章，但需要将内容脚本列在清单中。

希望得到任何帮助。谢谢！

- NoR

---

你的问题解决了我的难题。通过清单注入内容脚本，我无法真正地与网页的DOM进行交互。现在，通过browser_action加载contentScript解决了我的问题。谢谢。感激不尽。 - jainashish

Answer 1

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

如果开发者工具（注入您的内容脚本的网页的开发者工具）已打开，则添加debugger;可行。

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

- 方 觉

---

太好了，它有效了！在扩展环境中，debugger;语句是否总是需要用来让调试器识别内容脚本？似乎你只有一次机会设置断点。任何后续尝试运行扩展时，内容脚本都会加载到新的环境中，你将失去原始的断点。 - NoR

调试器将持久化页面加载，并且如果您打开了开发者工具（F12），它将始终中断。它们被硬编码到您的脚本中，因此不要忘记稍后删除它们。调试器将适用于任何JavaScript，它们不仅限于内容脚本。 - QFDev

如果内容脚本存在错误，例如括号不匹配（例如，在将内联函数作为参数传递后忘记关闭）），则不会给出任何错误提示，即使使用debugger也无法调试。这真的很令人沮丧。你该如何调试呢？ - jozxyqk

你会把 "debugger;" 放在 background.js 还是 contextscript.js 中呢？具体放在哪里？ - jim

那么在代码中添加 debugger; 是唯一能够查看 console.log 语句的方法吗？ - libby

Answer 2

我试图使用debugger方法，但由于项目使用require.js来捆绑JavaScript文件，它不能很好地工作。

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

然后，您可以在开发工具中查看源文件（但不包括背景HTML窗口）。

- sfs

Answer 3

有两种方法可以做到这一点：

1. 通过服务工作者(background.js)进行访问
2. 使用console.log()（推荐）

最简单的方法，如您所料，是选项2，并且是Google Chrome文档上推荐的解决方案。

要使其起作用，您必须检查运行content.js脚本的当前页面，而不是弹出窗口或后台元素。

以下是一个示例：

// content.js
console.log('Hello World!');

在matches:键中，指定您想要运行脚本的URL。您可以使用["<all_urls>"]在所有允许的URL上注入脚本。

// manifest.json
"content_scripts": [
    {
      "matches": ["https://www.google.com/"],
      "js": ["content.js"]
    }
  ],

现在当您访问 google.com 并检查控制台时，您将看到 "Hello World" 字符串。

- Victor Eke

Answer 4

清单 v3

您可以在内容脚本中添加 console.log 语句。

这是调试应用程序的最佳方法之一。

假设您想从内容脚本访问DOM节点。

const node = document.querySelector("selector")

如果存在，节点将是Element实例，否则它将是null

如果您可以在元素选项卡中看到该节点，但无法通过内容脚本访问它，则可能是在访问时未加载该节点。

请参考答案来解决此问题。

- Anjan Talatam