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

Question

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

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

list .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) 似乎从未注入(inject)到加载的页面中。
对此有什么建议吗？

Answer 1

您注入(inject)的脚本 bogusarray.js 不会为页面编写脚本 - 它运行的是单独的执行上下文，并且只能查看页面的 DOM。您可以通过注入(inject) <script> 来编写页面脚本从你的内容脚本标记到 DOM，但是覆盖像 Array 的原型(prototype)这样的函数仍然为时已晚。

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