1413872 - Implement UI for switching context to content script

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[mrmr1993]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171003101344

Steps to reproduce:

Load a web extension with content scripts.
Open web debugger (Ctrl-Shift-S).
Click the "Select an iframe as the currently targeted document" button.


Actual results:

The page context for each frame is listed.
None of the extension content script contexts are included in the list.


Expected results:

The active content script contexts for each frame/extension pair should be listed in the menu, or there should be some other way of switching between the different JS contexts.



Currently, to get access to an extension's context for debugging, you can set a breakpoint in a content script and execute commands when it fires. However:
* the breakpoints don't fire in content scripts in different frames
* this can't be used to query/debug extension state when page code is running, or vice versa
* sometimes (seemingly randomly, probably after extension reloads) the breakpoints don't fire

Chrome devtools has had an equivalent feature for some time, with a context switcher dropdown attached to the console.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I don't understand this report

Can you please provide more detailed STRs?

What exactly do you mean by the following:

The page context for each frame is listed.
None of the extension content script contexts are included in the list.

--

Btw. debugging addon's content scripts works just fine for me. Not sure how iframe target selector is involved...

Honza

Comment 2

[Jason Laster [:jlast]]

closing as we do not have an STR. Happy to re-open w/ an str

Comment 3

[mrmr1993]

Attachment: multiple_frames.zip

What exactly do you mean by the following:

The page context for each frame is listed.
None of the extension content script contexts are included in the list.

I'm looking for a way to switch the context of the developer console from the page's context to a WebExtension's content script's context. As far as I can tell, the devtools doesn't have a way to choose to execute JS from the console in an extension's JS context.

Steps to reproduce:

• Load the attached WebExtension
• Open developer tools
• Attempt to change the console's context to the WebExtension's context, in order to read or modify the contents of window.my_global from the console.

Expected results:

There is some part of the devtools UI that lets you switch the console into an extension context.
Alternatively, there is some part of the browser content toolbox UI that lets you switch its console to a chosen extension context.

Actual results:

There doesn't seem to be any part of the devtools UI or the browser content toolbox UI that lets you select an extension context to switch into.

For completeness:

• You can get into the correct context with the attached WebExtension by

  • opening the devtools
  • clicking in the document while the debugger pane is open

  due to the debugger statement in the content script handler.

• Similarly, on pages with <iframe>s with the attached WebExtension, you can also get into the correct context within an <iframe> by

  • opening the devtools
  • selecting that frame as the 'currently targeted document' in the devtools
  • clicking within the frame

• Chrome devtools features a drop-down menu next to (above and to the left of) their devtools console that lists every frame as a context that can be switched to, and each extension content script context for that frame as a sub-item that may also be switched to.

• The Firefox devtools features a button to switch context which lists all of the frames, but doesn't list the context script contexts for any of those frames or allow them to be switched to.

Btw. debugging addon's content scripts works just fine for me. Not sure how iframe target selector is involved...

The combined iframe and JS context selector in the Chrome devtools is just my preferred UI for this. If there is some other UI for this in the devtools that I've overlooked, I'm very sorry.

Comment 4

[Jason Laster [:jlast]]

Thanks for explaining this in more depth. CCing Yulia and Luca.

Comment 5

[Yulia Startsev [:yulia]]

This overlaps with some work that I am doing. The larger story is we need a UX for doing this kind of switching across devtools. The bug that is tracking this is here: https://bugzilla.mozilla.org/show_bug.cgi?id=1520790

This will include the ability to switch to a webextension. At the moment, I do not thing that we have a way to do this from the console. Maybe Nicolas has more context.

Comment 6

[Luca Greco [:rpl] [:luca] [:lgreco]]

It is definitely a reasonable enhancement (and there is also Bug 1369557 filed for the same kind of enhancement, we should mark it as a duplicate of this one, as this one has now more context then Bug 1369557).

From what I recall, in chrome the drop-down menu mentioned in comment 3 only switch the webconsole, whereas the frame selector available in Firefox is switching the entire devtools toolbox to target the selected subframe (and so it also affects the inspector and the other devtools panels in the toolbox, in case of a content script the inspector should still point to the webpage on which the content script is attached).

As an additional side note, every subframe in the page may have its own content script instance.

(This doesn't look like a Debugger specific issue, in the debugger the content scripts are listed, a breakpoint works as expected and the webconsole is in the right context while the debugger is paused, and so it looks more like a general DevTools issue or a webconsole one)

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

Here's a broader document about switching context https://docs.google.com/document/d/1pI4Ool0oxhhZ01dHmRv50DgjO49a5_1NFccbtC-9rKc/edit#heading=h.bn38te3qtxzp
The idea is to have a consistent mechanism in the different panels to do such thing.

---

We currently have the cd command in the console that allow you to switch to a given iframe context but I guess this isn't discoverable.
We could make it a bit better/general if we provide some autocomplete with the different available context

    +-----------------------------+
    | myWebExtension content      |
    +-----------------------------+
    | iframe https://example.com/ |
    +-----------------------------+
    | worker|script.js            |
    +-----------------------------+
:cd |

that may also be a good idea to test the Resources list function? Not sure.

Comment 9

[eritbh]

Has there been any movement on this? I'm a web extension developer, and this is a pretty major pain point in my debugging workflow compared to Chrome. I often end up switching back to Chrome to debug because of the lack of this feature.

Comment 10

[Jason Laster [:jlast]]

Hi, I'm still a little bit confused about what needs to be built. Would you mind sharing a quick video on your workflow with chrome (https://www.loom.com) or a couple of relevant screenshots?

Comment 11

[eritbh]

Attachment: Screen recording of the console in Chrome developer tools, demonstrating the context selector

Sure, I've attached a screen recording of me using the Chrome developer console to interact with a content script in the extension I'm developing. First, I try to reference something defined in my content script in the console, and it doesn't exist. Then, I select a new console context with a dropdown menu Chrome has. My extension shows up in this list, I select it, and I then have access to variables defined in the content script.

Currently, Firefox is missing this dropdown menu or any analogous feature. As stated in above comments, there is a feature for switching into the context of an <iframe>, but not to the context of a web extension's content script.

This is useful for inspecting values we set in the content script at runtime without having to set breakpoints, and for making use of utility methods in the code when inspecting state.

More documentation about the feature as it appears in Chrome: https://developers.google.com/web/tools/chrome-devtools/console/reference#context

Comment 12

[Jason Laster [:jlast]]

Thanks! That helps a lot

Comment 13

[Jason Laster [:jlast]]

Nicolas, this might be nice to do as a precursor to fission.

Comment 14

[Michael Leggett]

Any update on this?

As an extension developer trying to support Firefox, not having this ability is extremely limiting / frustrating. And seeing that it is a 4-year old P3 bug, I'm guessing it isn't happening any time soon if ever. :(

Comment 15

[Martin Suchý]

(In reply to Michael Leggett from comment #14)

Any update on this?

As an extension developer trying to support Firefox, not having this ability is extremely limiting / frustrating. And seeing that it is a 4-year old P3 bug, I'm guessing it isn't happening any time soon if ever. :(

Must agree with this, I am following this bug for a while and you speak from my heart.

Comment 16

[Matthew Kidd]

Now that I've gotten pretty far down the road on an extension that does something a lot more sophisticated than adding a red border to every web page, I've gotten very annoyed by the shortcoming reported here. For a week or two I figure I must be overlooking some feature in the developer console... but evidently I'm not.

Comment 17

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Matthew, this features is under construction and you can follow the following meta to see the progress.
https://bugzilla.mozilla.org/show_bug.cgi?id=1605153

Honza

Comment 18

[Michael Leggett]

@Honza Wonderful!!

Comment 19

[Matthew Kidd]

This is great news!

Now getting off topic, is there any timeline for implementing the latest Clipboard API features, i.e. placing HTML or an image on the clipboard? Incredibly, this is still a W3C draft specification in 2021, so Firefox isn't exactly a laggard. But Chrome went ahead and implemented it and this functionality would be really nice for my extension. Currently, I shove the HTML as plaintext on the clipboard which works for certain users, e.g, Insert → HTML in Thunderbird, while simultaneously displaying the HTML in a <div> temporarily overlaid on the center of the webpage for manual copy-and-paste (as HTML) purposes. I suppose there are some possible security issues with shoving full HTML onto the clipboard but I just want simple stuff like <div>, <p>, <table>, <span>, etc, i.e. the restricted set of HTML that works for rich text type editors.