Google Chrome/Firefox在控制台中看不到扩展名输出

Question

我正在尝试为浏览器的Web扩展测试示例代码.但是,它不起作用.我检查了控制台的谷歌浏览器和Firefox.它不打印任何东西.以下是我的代码:

manifest.json:

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

    "permissions": [
        "webRequest"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

background.js:

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

我错过了什么吗？

Answer 1

火狐

在Firefox中,您的代码可以正常工作(输出到控制台),因为它是在问题中编写的.

如果您没有在控制台中看到它,那么您可能正在查看错误的控制台.

Mozilla描述了在Debugging页面的哪个控制台中可以看到的扩展输出.

Browser Console

您应该使用浏览器控制台.您可以从Tools➜WebDeveloper➜BrowserConsole(键盘快捷键Ctrl- Shift- J或Cmd- Shift- J在Mac上)访问它.

浏览器工具箱

如果已启用它,则还可以使用" 浏览器工具箱"控制台.您可以从Tools➜WebDeveloper➜BrowserToolbox(键盘快捷键Ctrl- Alt- Shift- I;在Mac上:Cmd- Alt- Shift- I)访问它.

附加调试器

要调试加载项,可以使用加载项调试程序.您可以通过about:debugging➞Debug 访问它.

Web控制台

您可能正在查看仅与单个选项卡关联的Web控制台(键盘快捷键F12).这是您在调试网页时所需要的,而不是附加组件.对于在该选项卡中注入的内容脚本,console.log()输出将显示在此控制台中.但是,您不会看到加载项的任何其他部分的输出(例如,不是其他选项卡中的内容脚本,而不是后台脚本等).

谷歌浏览器

在Chrome中为扩展程序显示正确的控制台有点复杂.控制台输出将仅显示在多个可能位置中的一个位置,具体取决于console.log()执行的上下文.以下每个DevTools彼此独立,并显示在单独的窗口或选项卡中.在关联选项卡(底部或侧面)中显示是与网页和内容脚本关联的DevTools的默认设置,因为它们特定于选项卡.对于网页/内容脚本DevTools,您可以选择将其显示在单独的窗口中,或停靠在选项卡(侧面或底部)内.

对于您的背景页面

正如Srujan Reddy解释的那样,您必须在下拉菜单中进行多项选择,才能进入chrome://extensions页面(或者您可以手动输入该URL作为URL,或使用书签)然后选择两个复选框("开发人员")模式")然后单击"后台页面"链接.然后,您必须在弹出的窗口中选择"控制台"选项卡.

展示你必须做的事情要容易得多:

对于您的内容脚本

输出将显示在常规Web控制台中(在Web Developer Tools中).您可以通过F12在注入了内容脚本的网页中按(或其他快捷方式)来打开它.每个Web控制台仅显示该选项卡中注入的脚本的输出.

执行上述操作会显示console.*扩展程序的输出,但会导致控制台JavaScript命令行,调试程序等位于页面上下文中,而不是内容脚本中.

如果要在注入网页的内容脚本的上下文中使用控制台JavaScript命令行,则需要从控制台窗口左上角的下拉菜单中选择扩展的内容脚本上下文.此下拉菜单通常以值"top"开头.下拉列表将包含每个内容脚本上下文的选择(每个扩展一个注入了脚本).

对于你的弹出窗口

右键单击browserAction按钮并选择"Inspect Popup".或者,在弹出窗口中单击鼠标右键,然后选择"检查".要么为弹出页面打开DevTools.弹出窗口将在比通常情况更多的条件下保持打开状态,但如果切换标签等,仍然会关闭弹出窗口.

对于"选项"页面

在"选项"弹出窗口(而不是标题栏)的主要内容中单击鼠标右键,然后选择"检查".这将打开选项页面的DevTools.

对于面板或扩展程序中加载的扩展程序中的页面

当面板或标签聚焦时,您可以通过按F12(或其他快捷方式)或打开上下文菜单(右键单击)并选择"检查" 来打开DevTools .

Answer 2

您在哪个控制台中查看日志？

如果您在选项卡上查看控制台，那么这是错误的地方。

打开设置/扩展或在新的选项卡类型中

chrome://extensions

在您的扩展程序下，单击“后台页面”链接，您可以在该链接中查看日志

**确保选中开发者模式