google-chrome-extension - 是否可以从 Chrome 开发者工具窗口将 JavaScript 注入当前加载的页面？

Question

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

我使用以下代码进行了测试：

清单.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"
  }]
}

开发工具.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 的原型之类的函数仍然为时已晚。

为了实现您的目标，您应该使用chrome.devtools.inspectedWindow.reload(). 只需使用injectedScript参数将您的覆盖传递给它。

Answer 2

你可以这样做：

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