如何从开发工具扩展中提取加载的JavaScript文件 [英] How to extract the loaded javascript files from Dev Tools extension

问题描述

我正在研究一个Chrome扩展，希望从当前页面加载JavaScript文件，修改它们（美化），然后更新开发工具来源面板。

作为回退选项 - 我不重写通常的来源面板 - 而是将它们放在自定义面板中。 （有了这个选项，我需要的只是网络面板中加载的网络资源列表 - 结果）

理想情况下，我想重写源代码的页面尽管如此，希望使用开发工具可用的调试工具。

解决方案

我不知道有可能替换在飞行中的脚本。
但是，您可以从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'; //无效
 parent.appendChild（newScript）; 
}，false）; 
}; 
 //重新加载
 chrome.devtools.inspectedWindow.reload（{
 injectScript：'（'+ scriptToInject.toString（）+'（）） 
}）; 
}）; 
}）; 
  

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.

解决方案

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

这篇关于如何从开发工具扩展中提取加载的JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！