## Chrome DevTools 'Sources' Extension Originally articulated here: - https://github.com/j4k0xb/webcrack/issues/29 - > add Chrome DevTools extension that allows the web IDE to be used within DevTools - https://github.com/pionxzh/wakaru/issues/76 - > add Chrome DevTools extension that allows the web IDE to be used within DevTools ### Overview The following is as I originally wrote it on the above issues, copied here for posterity: > First off, I LOVE the new [v2.11.0](https://github.com/j4k0xb/webcrack/releases/tag/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'](https://developer.chrome.com/docs/devtools/search/) / ['Sources'](https://developer.chrome.com/docs/devtools/sources) / ['Network'](https://developer.chrome.com/docs/devtools/network/) / etc tabs, the [debugger](https://developer.chrome.com/docs/devtools/javascript/reference/), and the [console](https://developer.chrome.com/docs/devtools/console/api) / [utilities](https://developer.chrome.com/docs/devtools/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](https://codemirror.net/)), 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](https://developers.google.com/web/tools/chrome-devtools/). 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 `frameURL`s, different `scriptExecutionContext`s, 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](https://developer.chrome.com/docs/devtools/recorder) 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](https://developer.chrome.com/devtools/docs/debugger-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](https://chromedevtools.github.io/devtools-protocol/tot/Accessibility), [Audits](https://chromedevtools.github.io/devtools-protocol/tot/Audits), [CacheStorage](https://chromedevtools.github.io/devtools-protocol/tot/CacheStorage), [Console](https://chromedevtools.github.io/devtools-protocol/tot/Console), [CSS](https://chromedevtools.github.io/devtools-protocol/tot/css), [Database](https://chromedevtools.github.io/devtools-protocol/tot/Database), [Debugger](https://chromedevtools.github.io/devtools-protocol/tot/Debugger), [DOM](https://chromedevtools.github.io/devtools-protocol/tot/DOM), [DOMDebugger](https://chromedevtools.github.io/devtools-protocol/tot/DOMDebugger), [DOMSnapshot](https://chromedevtools.github.io/devtools-protocol/tot/DOMSnapshot), [Emulation](https://chromedevtools.github.io/devtools-protocol/tot/Emulation), [Fetch](https://chromedevtools.github.io/devtools-protocol/tot/Fetch), [IO](https://chromedevtools.github.io/devtools-protocol/tot/IO), [Input](https://chromedevtools.github.io/devtools-protocol/tot/Input), [Inspector](https://chromedevtools.github.io/devtools-protocol/tot/Inspector), [Log](https://chromedevtools.github.io/devtools-protocol/tot/Log), [Network](https://chromedevtools.github.io/devtools-protocol/tot/Network), [Overlay](https://chromedevtools.github.io/devtools-protocol/tot/Overlay), [Page](https://chromedevtools.github.io/devtools-protocol/tot/Page), [Performance](https://chromedevtools.github.io/devtools-protocol/tot/Performance), [Profiler](https://chromedevtools.github.io/devtools-protocol/tot/Profiler), [Runtime](https://chromedevtools.github.io/devtools-protocol/tot/Runtime), [Storage](https://chromedevtools.github.io/devtools-protocol/tot/Storage), [Target](https://chromedevtools.github.io/devtools-protocol/tot/Target), [Tracing](https://chromedevtools.github.io/devtools-protocol/tot/Tracing), [WebAudio](https://chromedevtools.github.io/devtools-protocol/tot/WebAudio), and [WebAuthn](https://chromedevtools.github.io/devtools-protocol/tot/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](https://developer.chrome.com/docs/extensions/manifest/externally_connectable). 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/tabs/#method-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#method-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-sendMessage)). > - https://developer.chrome.com/docs/extensions/reference/api/runtime#method-connectNative > - > Connects to a native application in the host machine. See [Native Messaging](https://developer.chrome.com/docs/extensions/nativeMessaging) 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](https://developer.chrome.com/docs/extensions/mv3/declare_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](https://developer.mozilla.org/docs/Web/API/Window/indexeddb), and [Storage](https://developer.mozilla.org/docs/Web/API/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.