From my devtools extension, can I programmatically access the sources panel?

Question

I'm looking at writing a devtools extension to graphically represent my app state.

Can my extension access/link to the devtools sources panel, especially the filesystem tab?

In my extension, I would need to iterate files in the filesytem tab, then construct links such that a user can click on something in my panel and we take them straight to a file in the filesystem tab.

Answer 1

chrome.devtools.panels.openResource() is the answer to this question. The following function (in my custom devtools extension) loops through the resources of an inspected window to find files that match the filename arg, then opens them in the sources panel. Devtools is then clever enough to focus the sources panel.

openSource(filename) {
  chrome.devtools.inspectedWindow.getResources(
    (resources) => {
      for (const resource of resources) {
        var canonical = resource.url.replaceAll("-", "").toLowerCase()
        if (canonical.includes("/" + filename.replaceAll("-", "").toLowerCase() + ".")) {
          chrome.devtools.panels.openResource(resource.url, 1, function () { })              
        }
      }
    }
  )
}