如何从Dev Tools扩展中提取加载的javascript文件

Question

我正在研究一个chrome扩展，希望从当前页面加载javascript文件，修改它们(美化)，然后更新Dev Tools Sources面板。

作为一个备选选项-我不覆盖通常的源面板-而是把它们放在一个自定义面板。(有了这个选项，我所需要的只是网络面板中加载的网络资源的列表-结果)

理想情况下，我想覆盖源代码的页面，希望使用开发工具可用的调试工具。

Answer 1

我不知道是否可以动态替换脚本。但是你可以从devtools-panel中注入一些代码到当前被检查的网页中，如下所示:

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() + '())'
      });
    });
  });