add Chrome DevTools extension that allows the web IDE to be used within DevTools

[0xdevalias]

First off, I LOVE the new v2.11.0 update, and the changes to the web IDE to use monaco to support 'references', 'go to declaration', etc.

This issue is about an idea I've had and wanted to work on myself for a while, but haven't got around to it yet. Often when exploring web apps, I make pretty heavy use of Chrome DevTools' 'Search' / 'Sources' / 'Network' / etc tabs, the debugger, and the console / utilities APIs. While there have been some nice improvements to the 'Sources' tab over the years (pretty printing, syntax highlighting, code folding, etc); one area I have really wished it was able to support for a long time now is 'references' / 'go to definition' / similar.

A thought I had in this space is that, while I obviously can't outright replace the 'Sources' tab (which I believe is based on CodeMirror), it should be possible to create a Chrome DevTools Extension that adds a new tab/panel that does similar to the current 'Sources' tab, but using monaco as it's base, and enabling features like 'references' / 'go to definition' / etc within that.

Useful Chrome Extension APIs

Overview of extending DevTools:

• https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools

  • Extending DevTools
    DevTools extensions add functionality to Chrome DevTools by accessing DevTools-specific extension APIs through a DevTools page added to the extension.

Some of the Chrome Extension API's that would be useful/enable this:

• https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow

  • Use the chrome.devtools.inspectedWindow API to interact with the inspected window: obtain the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.

  • Use the getResources call and the onResourceContent event to obtain the list of resources (documents, stylesheets, scripts, images etc) within the inspected page. The getContent and setContent methods of the Resource class along with the onResourceContentCommitted event may be used to support modification of the resource content, for example, by an external editor.

  • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#executing-code

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

    • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#method-eval

      • Evaluates a JavaScript expression in the context of the main frame of the inspected page.

      • This can also be used to target different frameURLs, different scriptExecutionContexts, etc
  • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#method-getResources

    • Retrieves the list of resources from the inspected page.

    • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#type-Resource

      • A resource within the inspected page, such as a document, a script, or an image.

      • getContent: Gets the content of the resource. (potentially encoded, Currently, only base64 is supported.).

      • setContent: Sets the content of the resource. Only resources with the text type are currently supported.

  • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#method-reload

    • Reloads the inspected page.

    • The most interesting part of this API is probably reloadOptions -> injectedScript (though userAgent might be useful sometimes too):

      • injectedScript: If specified, the script will be injected into every frame of the inspected page immediately upon load, before any of the frame's scripts.

      • userAgent: If specified, the string will override the value of the User-Agent HTTP header that's sent while loading the resources of the inspected page. The string will also override the value of the navigator.userAgent property that's returned to any scripts that are running within the inspected page.

  • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#event-onResourceAdded

    • Fired when a new resource is added to the inspected page.

  • https://developer.chrome.com/docs/extensions/reference/api/devtools/inspectedWindow#event-onResourceContentCommitted

    • Fired when a new revision of the resource is committed (e.g. user saves an edited version of the resource in the Developer Tools).

• https://developer.chrome.com/docs/extensions/reference/api/devtools/panels

  • Use the chrome.devtools.panels API to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.

  • https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#type-SourcesPanel

    • Represents the Sources panel

    • I hadn't stumbled upon this before, but it sounds like it's possible to access the existing 'Sources' panel; can react to 'when an object is selected in the panel' (not sure what 'object' refers to in this case), can create a sidebar pane, etc
  • https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-create

    • Creates an extension panel

    • This was my main original thought, in creating a new custom panel
  • https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-openResource

    • Requests DevTools to open a URL in a Developer Tools panel.

    • Can seemingly be used to interact with existing panels
  • https://developer.chrome.com/docs/extensions/reference/api/devtools/panels#method-setOpenResourceHandler

    • Specifies the function to be called when the user clicks a resource link in the Developer Tools window. To unset the handler, either call the method with no parameters or pass null as the parameter.

• https://developer.chrome.com/docs/extensions/reference/api/devtools/network
  • Use the chrome.devtools.network API to retrieve the information about network requests displayed by the Developer Tools in the Network panel.
  • Probably less specifically relevant to the functionality I was thinking of, but could be some value/crossover there, so figured I'd mention it. onNavigated / onRequestFinished might be useful in some cases.
• https://developer.chrome.com/docs/extensions/reference/api/devtools/recorder

  • Use the chrome.devtools.recorder API to customize the Recorder panel in DevTools.
    devtools.recorder API is a preview feature that allows you to extend the Recorder panel in Chrome DevTools.

  • Again, probably not as useful, but linking here in case.
• https://developer.chrome.com/docs/extensions/reference/api/debugger

  • The chrome.debugger API serves as an alternate transport for Chrome's remote debugging protocol. Use chrome.debugger to attach to one or more tabs to instrument network interaction, debug JavaScript, mutate the DOM and CSS, etc.

  • For security reasons, the chrome.debugger API does not provide access to all Chrome DevTools Protocol Domains. The available domains are: Accessibility, Audits, CacheStorage, Console, CSS, Database, Debugger, DOM, DOMDebugger, DOMSnapshot, Emulation, Fetch, IO, Input, Inspector, Log, Network, Overlay, Page, Performance, Profiler, Runtime, Storage, Target, Tracing, WebAudio, and WebAuthn.

  • This can do all sorts of powerful stuff, though some of the original reasons I was thinking of needing to use it (eg. getting access to the page's script contents/etc) are apparently already covered in other more specific APIs (eg. chrome.devtools.inspectedWindow). Still worth being aware of it and the features it has though, as there is some pretty cool stuff here!
  • https://chromedevtools.github.io/devtools-protocol/

Then there are also all of the 'standard' Chrome Extension APIs as well, which can do a lot of cool stuff:

• https://developer.chrome.com/docs/extensions/reference/api

A few of which could be useful for this feature:

• https://developer.chrome.com/docs/extensions/reference/api/runtime

  • Use the chrome.runtime API to retrieve the service worker, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs.

  • Some more esotetic, but interesting aspects of this, are the ability to communicate with other externsions and/or locally installed programs using connect / onConnectExternal / onMessageExternal / connectNative / sendMessageNative:
    • https://developer.chrome.com/docs/extensions/reference/api/runtime#method-connect

      • Attempts to connect listeners within an extension/app (such as the background page), or other extensions/apps. This is useful for content scripts connecting to their extension processes, inter-app/extension communication, and web messaging. Note that this does not connect to any listeners in a content script. Extensions may connect to content scripts embedded in tabs via tabs.connect.

    • https://developer.chrome.com/docs/extensions/reference/api/runtime#event-onConnectExternal

      • Fired when a connection is made from another extension (by runtime.connect).

    • https://developer.chrome.com/docs/extensions/reference/api/runtime#event-onMessageExternal

      • Fired when a message is sent from another extension/app (by runtime.sendMessage).

    • https://developer.chrome.com/docs/extensions/reference/api/runtime#method-connectNative

      • Connects to a native application in the host machine. See Native Messaging for more information.

    • https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendNativeMessage

      • Send a single message to a native application.

    • https://developer.chrome.com/docs/extensions/reference/api/runtime#event-onConnectNative

      • Fired when a connection is made from a native application. Currently only supported on Chrome OS.

      • While this is only supported from Chrome OS, I believe the browser can always initiate the connection to a native app.
• https://developer.chrome.com/docs/extensions/reference/api/permissions

  • Use the chrome.permissions API to request declared optional permissions at run time rather than install time, so users understand why the permissions are needed and grant only those that are necessary.

• https://developer.chrome.com/docs/extensions/reference/api/contextMenus

  • Use the chrome.contextMenus API to add items to Google Chrome's context menu. You can choose what types of objects your context menu additions apply to, such as images, hyperlinks, and pages.

• https://developer.chrome.com/docs/extensions/reference/api/sidePanel

  • Use the chrome.sidePanel API to host content in the browser's side panel alongside the main content of a webpage.

• https://developer.chrome.com/docs/extensions/reference/api/storage

  • Use the chrome.storage API to store, retrieve, and track changes to user data.
    The Storage API provides an extension-specific way to persist user data and state. It's similar to the web platform's storage APIs (IndexedDB, and Storage), but was designed to meet the storage needs of extensions.

• https://developer.chrome.com/docs/extensions/reference/api/notifications
  • Use the chrome.notifications API to create rich notifications using templates and show these notifications to users in the system tray.

And some that are a little more esoteric, but might still be interesting/useful:

• https://developer.chrome.com/docs/extensions/reference/api/scripting

  • Use the chrome.scripting API to execute script in different contexts.

• https://developer.chrome.com/docs/extensions/reference/api/userScripts

  • Use the userScripts API to execute user scripts in the User Scripts context.

• https://developer.chrome.com/docs/extensions/reference/api/webNavigation

  • Use the chrome.webNavigation API to receive notifications about the status of navigation requests in-flight.

• https://developer.chrome.com/docs/extensions/reference/api/offscreen

  • Use the offscreen API to create and manage offscreen documents.

---

Edit: This is also captured on the following gist for posterity, and that will likely be where I capture any future notes about my own explorations of this:

• https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#chrome-devtools-sources-extension

---

See Also

• add Chrome DevTools extension that allows the web IDE to be used within DevTools pionxzh/wakaru#76