How to extract the loaded javascript files from Dev Tools extension

问题

I'm working on a chrome extension that wants to load javascript files from the current page, modify them (prettify), then update the Dev Tools Sources panel.

As a fall-back option - I don't override the usual Sources panel - But rather put them in a custom panel. (With this option, all I'd need is a list of the network resources loaded -results in the Network panel)

Ideally I'd like to override the source's pages though, in the hopes of using the debugging tools available to the dev tools.

回答1:

I don't know it's possible to replace the script on the fly. But you can inject some code from devtools-panel into the currently inspected web page as follows:

chrome.devtools.panels.create(
  'your-extension-name',
  'icon.png',
  'panel.html',
  function (pPanel) {
    pPanel.onShown.addListener(function () {
      var scriptToInject = function () {
        document.addEventListener('DOMContentLoaded', function () {
          var script = document.getElementsByTagName('script')[0];
          var parent = script.parentElement;
          parent.removeChild(script);

          var newScript = document.createElement('script');
          newScript.textContent = 'xxx'; // Doesn't work?
          parent.appendChild(newScript);
        }, false);
      };
      // Reloads the page.
      chrome.devtools.inspectedWindow.reload({
        injectedScript: '(' + scriptToInject.toString() + '())'
      });
    });
  });

来源：https://stackoverflow.com/questions/22440850/how-to-extract-the-loaded-javascript-files-from-dev-tools-extension