是否可以從Chrome開發人員工具窗口將JavaScript注入當前加載的頁面？

我想添加面板UI到Chrome devtools窗口並顯示一些關於當前加載頁面的信息。爲了獲取信息，我想在加載頁面之前注入一些JavaScript代碼，以便我可以更改某些方法的行爲。是否可以從Chrome開發人員工具窗口將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）似乎永遠不會被注入到加載的頁面中。有沒有關於這方面的任何建議？

來源

2013-03-01 kuu

您可以在腳本的第一行設置斷點，編輯它並繼續... – Uooo 2013-03-01 08:11:04

我認爲我完成了。 – kuu 2013-03-01 08:13:53

這是否解決了您的問題？如果是這樣，我想發佈這個答案，以便將來的讀者快速找到解決方案。 – Uooo 2013-03-01 08:17:05

你注入腳本bogusarray.js的第一線不編寫頁面 - 它運行的是獨立的執行上下文，只能看到頁面的DOM。您可以通過在內容腳本中將<script>標籤注入到DOM中來編寫腳本，但是覆蓋Array的原型等功能仍然爲時過晚。

要實現您的目標，您應該使用chrome.devtools.inspectedWindow.reload()從DevTools擴展中重新加載檢查頁面。只需使用injectedScript參數將其覆蓋。

來源

2013-03-01 17:51:16

它可以工作，現在我可以重寫Array的原型。但是，如果我嘗試通過postMessage檢索頁面的變量，則頁面會崩潰並顯示「Aw Snap」。這可能是一個安全限制，但我會發佈一個關於它的單獨問題。不管怎麼說，還是要謝謝你！ – kuu 2013-03-04 05:28:36

請你看看相關問題： http://stackoverflow.com/questions/15196480/calling-chrome-devtools-inspectedwindow-reload-with-injection-causes-aw-snap – kuu 2013-03-05 01:27:46

這聽起來不錯，但是，你能否提供一個例子來說明如何將覆蓋傳遞給chrome.devtools.inspectedWindow.reload（）。？謝謝 – 2016-09-20 19:41:27

你可以這樣說：

設置斷點在腳本
編輯腳本
繼續調試

來源

2013-03-01 08:52:47 Uooo

是否可以從Chrome開發人員工具窗口將JavaScript注入當前加載的頁面？

回答

相關問題