Google Chrome / Firefox在控制台中看不到扩展名输出 [英] Google Chrome / Firefox do not see extension output in console

问题描述

我试图测试浏览器的Web扩展示例代码。
但是，这是行不通的。我检查了Google Chrome和Firefox的控制台。它不打印任何东西。以下是我的代码：

manifest.json ：

  {
description：演示webRequests，
manifest_version：2，
name：webRequest-demo，
version ：1.0，
 
permissions：[
webRequest
]，
background：{
scripts：[ background.js] 
} 
} 
  

背景。 js ：
$ b

 函数logURL（requestDetails）{
 console.log（Loading：+ requestDetails .URL）; 
} 
 
 chrome.webRequest.onBeforeRequest.addListener（
 logURL，
 {url：[< all_urls>]} 
）; 
 console.log（Hell o扩展后台脚本执行）; 
  

我错过了什么吗？

解决方案 Firefox

在Firefox中，您的代码工作（输出到控制台），就像写在问题中一样。 b
$ b

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

Mozilla描述了什么扩展输出可以在中）。您可以通过在注入内容脚本的网页中按 F12 （或其他快捷方式）将其打开。每个Web控制台将只显示在该选项卡中注入的脚本的输出。

通过显示控制台执行上述操作。* 你的扩展的输出，但会导致控制台JavaScript命令行，调试器等等在页面的上下文中，而不是内容脚本。如果要在注入到网页中的内容脚本的上下文中使用控制台JavaScript命令行，则需要从Console窗口左上角的下拉菜单中选择扩展的内容脚本上下文。这个下拉菜单通常以top开头。下拉菜单可以选择每个内容脚本上下文（每个扩展有一个脚本注入）。

为您的Popup

右键单击您的 browserAction 按钮并选择检查弹出窗口。或者，在弹出框中右键单击并选择检查。要么打开弹出页面的DevTools。弹出窗口会在通常情况下保持打开状态，但是如果切换标签页等，它仍然会被关闭。

您的选项页面

右键单击选项弹出框（不是标题栏）的主要内容，然后选择检查。这将打开DevTools的选项页面。

对于您的面板或从您的扩展内的页面加载在选项卡

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

I am trying to test sample code for web extension for browsers. But, it doesn't work. I checked the console for Google Chrome and also for Firefox. It doesn't print anything. The following is my code:

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");

Am I missing something?

解决方案

Firefox

In Firefox, your code works (outputs to console), as it is written in the question.

If you are not seeing it in the console, then you are, probably, looking at the wrong console.

Mozilla describes what extension output can be seen in which console in their Debugging page.

Browser Console

You should be using the Browser Console. You can access it from Tools➜Web Developer➜Browser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

Browser Toolbox

If you have it enabled, you could also use the Browser Toolbox console. You can access it from Tools➜Web Developer➜Browser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I).

Add-on Debugger

To debug your add-on you can use the Add-on Debugger. You can access it though about:debugging➞Debug.

Web Console

You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

Google Chrome

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

For your Background page

As Srujan Reddy explained, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

It is much easier to show what you have to do:

For your Content Scripts

Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

For your Popup

Right-click on your browserAction button and select "Inspect Popup". Alternately, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

For your Options page

Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

For your panel or a page from within your extension loaded in a tab

When the panel or tab is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

这篇关于Google Chrome / Firefox在控制台中看不到扩展名输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！