Question

我正在开发一个Chrome扩展程序，它想要从当前页面加载javascript文件，修改它们（美化），然后更新Dev Tools Sources面板。

作为后备选项 - 我不会覆盖通常的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() + '())'
      });
    });
  });

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

1 个答案: