1852242 - Support `useContentScriptContext` for `devtools.inspectedWindow.eval`

Status: NEW

(WebExtensions :: Developer Tools, enhancement, P3)

Description

[Bramus]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Steps to reproduce:

Demo REPO: https://github.com/bramus/devtools-extension-bug-iframe

I am building a DevTools extension. Summarized, I try to execute this whenever an element is selected in the DevTools Elements panel.

chrome.devtools.inspectedWindow.eval('console.log($0)', { useContentScriptContext: true });

Actual results:

This feature is currently not supported:

[debug] Firefox stderr: JavaScript error: moz-extension://8ef02d0a-ab42-4b62-b316-21b7f2b34791/devtools.js, line 4: Error: Type error for parameter options (Property "useContentScriptContext" is unsupported by Firefox) for devtools.inspectedWindow.eval.

Expected results:

As per https://developer.chrome.com/docs/extensions/reference/devtools_inspectedWindow/#executing-code it should be possible to do this when creating a DevTools extension:

chrome.devtools.inspectedWindow.eval('console.log($0)', { useContentScriptContext: true });

I need this because I am creating a DevTools extension that interacts with the current selected element from the Elements panel. Whenever a new element is selected in the tree, I need to get some data from that element. I do this by executing a function that is declared in the content script which then returns back the necessary data. Because useContentScriptContext is not supported, I cannot access this function.

Comment 1

[Rob Wu [:robwu]]

An alternative to useContentScriptContext is to use the tabs.executeScript (in MV2) or scripting.executeScript.

However, it looks like you're not just asking for the ability to run code in the content script context, but specifically for access to devtools APIs. That is a different question, and I'm not sure how feasible it would be to support that.

For other readers, I'd also like to point to a report on Chrome's issue tracker about a perceived bug in their implementation of $0 in some contexts: https://bugs.chromium.org/p/chromium/issues/detail?id=1480418 (this is by the same reporter as this bug)

Comment 2

[Bramus]

scripting.executeScript won’t cut it for me, as I am making a DevTools extension. This extension needs access to the $0 variable as exposed via the chrome.devtools.inspectedWindow API. This is also mentioned in the docs:

The execution context of the code being evaluated includes the Developer Tools console API. For example, the code can use inspect and $0.

But this issue isn’t about $0, as using $0 in a Firefox DevTools extension already works:

chrome.devtools.inspectedWindow.eval('console.log($0)'); // Works fine

What doesn’t work is using useContentScriptContext in the options, which is what this feature request is about.

I can see where the confusion comes from though, as the example I used mentions $0. I should have picked a better example, for which I aplogize.

Here’s a “better” one, on that doesn’t use $0, and that also fails:

chrome.devtools.inspectedWindow.eval('console.log("hello")', { useContentScriptContext: true });

Side note: In Chrome, as you pointed out, there’s an issue with getting the value of $0 when the inspected element is inside an iframe indeed. This is unrelated to Firefox or adding support for { useContentScriptContext: true }