如何在Firefox控制台中访问附加内容脚本? [英] How to access add-on content script in Firefox console?

问题描述

我已经为Firefox和Chrome开发了一个插件.它具有内容脚本.我想在浏览器标签的控制台中访问它们(在Firefox上， Web控制台).例如，我要输入在控制台的内容脚本中定义的全局变量，它将输出其值.

I have developed an add-on for Firefox and Chrome. It has content scripts. I want to access them in the browser tab's console (on Firefox the Web Console). For example, I want to enter a global variable defined in the content script(s) in the console, and it will output its value.

在Chrome中，我可以通过按 F12 打开控制台，然后导航到开发者工具中的控制台"标签.在过滤器按钮之后，它具有一个下拉框，用于选择我所处的上下文(页面/内容脚本):

In Chrome, I can open the console by pressing F12, then navigate to the Console tab in the developer tools. It has a dropbox, right after the filter button, to select which context I am in (page/content script):

在Firefox中，如何做同样的事情?

In Firefox, how to do the same thing?

推荐答案

更改在Firefox中查看控制台的其他任何方式都不存在此功能.请求在Bugzilla上提交 bug/RFE ；这将非常有用.您将希望RFE清楚地说明，应该为选项卡中的每个框架(即顶部框架和每个子框架)切换到内容脚本上下文/范围.控制台和调试器都应该是这种情况.

The ability to change the context/scope of the Web Console (opened directly with Ctrl-Shift-K or F12 and selecting the Console tab) to that of the content scripts for an extension does not appear to exist. In addition, this capability does not exist in any of the other ways to view a console in Firefox. A bug/RFE should be filed on Bugzilla requesting this functionality; it would be quite useful. You will want the RFE to clearly explain that there should be the ability to switch to the content script context/scope for each frame in the tab (i.e. the top frame and each child frame). This should be the case for both the Console and the Debugger.

注意:您可以通过从框架选择器下拉菜单打开的下拉菜单中选择框架，将控制台更改为iframe页面脚本的上下文/范围:

NOTE: You can change the console into the context/scope of the iframe's page scripts by selecting the frame from the drop-down menu opened from the frame-selector drop-down:

如果没有为您显示此下拉图标，请转到DevTools设置，然后选中选择iframe作为当前目标文档".但是，这样做A)不能切换到内容脚本上下文/范围，并且B)不能与Web调试器一起正常工作(在当前版本的Firefox和Nightly(54.0a1)中进行测试.

If this drop-down icon is not appearing for you, go to the DevTools settings and check "Select an iframe as the currently targeted document". However, doing this A) does not switch into the content script context/scope and B) does not work properly with the Web Debugger (testing in the current version of Firefox and Nightly (54.0a1).

您可以使用Web调试器( Ctrl - Shift - S 或 F12 并选择调试器标签)和WebExtension内容脚本.该扩展的内容脚本在moz-extension:// URL下的源"中列出.您将需要识别用于扩展的UUID .您可以查看变量的内容，设置断点等.但是，这不能让您明确切换到子框架的上下文.在子iframe中运行的JavaScript中放置debugger;指令无效.

You can use the Web Debugger (Ctrl-Shift-S, or F12 and selecting the Debugger tab) with WebExtension content scripts. The content scripts for the extension are listed in the "Sources" under a moz-extension:// URL. You will need to identify the UUID that is used for the extension. You can view the content of variables, set breakpoints, etc. However, this does not give you the ability to explicitly switch to the context of the child frame. Placing debugger; directives in the JavaScript which is running in the child iframe is ineffective.

Web Debugger调试内容脚本(在顶部框架中):

Web Debugger debugging content script (in top frame):

如果要在WebExtensions的后台脚本的上下文中打开控制台，可以通过单击about:debugging中扩展名的 Debug 按钮来打开.但是，这不能使您访问内容脚本上下文中的控制台.

If you were wanting to open a console which was in the context of your WebExtensions' background script, you could do so by clicking on the Debug button for your extension in about:debugging. However, this will not get you access to a console in the content script's context.

针对您的需求:明确指示值在iframe上下文中，而不是顶部框架中；我看到这样做的两种方法:

For what you need: unambiguously indicating that values are in the iframe context, not the top frame; I see two methods of doing so:

• 在console.log()中使用带前缀的信息，该信息清楚地表明脚本相信正在iframe中运行.例如:

• Use console.log() with information prepended that clearly indicates that the script believes it is running in the iframe. For example:

console.log('In iframe', 'foo=', foo);

这样您不必在每次调用console.log()时都包含'In iframe'，可以创建一个函数，该函数会将文本添加到对该函数的所有调用之前.您甚至可以覆盖console.log()函数，因此您的代码仍只调用console.log().

So that you don't have to have 'In iframe' in every call to console.log() you make, you could create a function that prepends that text to all calls to that function. You could even override the console.log() function so your code still just calls console.log().

但是，这仅告诉您代码认为它正在iframe中运行.您可能要调试的部分内容是内容脚本代码检测到它在iframe中.

However, this only tells you that your code thinks that it is running in the iframe. Part of what you may be debugging is your content script code detecting that it is in an iframe.

此方法不能肯定地表明报告的值在iframe中实际上是 .

This method does not indicate with certainty that the reported values are actually in the iframe.

使用元素将值存储到DOM中.数据集或其他DOM元素属性，然后检查DOM中的这些值.要查看这些属性，我发现 DOM检查器清楚地显示了这些内容:

Store values into the DOM using Element.dataset, or other DOM element attributes, and then inspect the DOM for these values. To view these attributes, I find that the DOM Inspector shows these quite clearly:

此方法可用于明确显示值是iframe中的值，以及确切的值是哪个iframe，而无需依赖iframe中运行的代码来准确地确定它在iframe中以及它在哪个iframe中.

This method can be used to unambiguously show that the values are ones in the iframe, and exactly which iframe, without relying on the code running in the iframe to accurately determine that it is in an iframe and which iframe it is in.

这篇关于如何在Firefox控制台中访问附加内容脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！