Question

我想在Chrome devtools窗口中添加一个面板用户界面，并显示有关当前加载页面的一些信息。为了获取信息，我想在加载页面之前注入一些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。您可以通过从内容脚本向DOM注入<script>标记来编写页面脚本，但是覆盖像Array的原型这样的函数仍然为时已晚。

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

Answer 2

你可以这样做：

在脚本的第一行设置断点
编辑脚本
继续调试

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

2 个答案: