是否可以从Chrome Developer Tools窗口将JavaScript注入当前加载的页面？

Question

我想在Chrome devtools窗口中添加一个面板UI,并显示有关当前加载页面的一些信息.为了获取信息,我想在页面加载之前注入一些JavaScript代码,这样我就可以改变某些方法的行为.

我测试了以下代码:

的manifest.json

{
  "name": "Test Dev Panel",
  "version": "0.1",
  "description": "Extends the Developer Tools, replacing Array.toString() with a bogus one.",
  "devtools_page": "devtools.html",
  "manifest_version": 2,
  "permissions": ["<all_urls>"],
  "content_scripts": [{
    "matches": ["http://*/*"],
    "js": ["bogusarray.js"],
    "run_at": "document_start"
  }]
}

devtools.js

chrome.devtools.panels.create("Text Dev Panel",
                          "img/iconDev.png",
                          "panel.html");

bogusarray.js

Array.prototype.toString = function () {
    return 'Injected!';
  };

但是,由于Array.toString()的行为没有改变,JavaScript(bogusarray.js)似乎从未注入到加载的页面中.对此有什么建议吗？

Answer 1

您注入的脚本bogusarray.js不会对页面进行编写脚本 - 它运行的是一个单独的执行上下文,只能看到页面的DOM.您可以通过<script>从内容脚本向DOM 注入标记来编写页面脚本,但是覆盖像Array的原型这样的函数仍然为时已晚.

为了实现您的目标,您应该使用DevTools扩展程序重新加载已检查的页面chrome.devtools.inspectedWindow.reload().只需使用injectedScript参数将覆盖传递给它.