調試tabs.executeScript時如何使用console.log

Question

我一直在尋找這個問題的答案，但是當我想調試網頁時，它只帶我去調試擴展本身的解決方案。

我想創建一個擴展程序，使我可以修改特定的網頁（顯然僅在我的計算機上）。
根據chrome開發者網站上的"activeTab"權限教程，我創建了一個非常簡單的腳本，然后進行了以下操作：

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  chrome.tabs.executeScript({
    code:'
      var oSwitchContainer = document.getElementById("norm");
      console.log(oSwitchContainer.childNodes);
    '
  });
});

但是，當我檢查頁面時，看不到任何控制台消息，可以通過修改oSwitchContainer的innerHTML輕松更改其內容。

啟用擴展后，是否可以查看頁面的控制台日志？

Answer 1

您說您找到了調試“擴展本身”的解決方案。

看一下“ 架構概述” 。

您所說的“擴展本身”是它的背景頁面，這是您的browserAction.onClicked偵聽器的執行位置。 如果您從該代碼執行console.log()語句，它將進入后台頁面的控制台。

但是，使用chrome.tabs.executeScript ，您傳遞的代碼將在打開的選項卡的上下文¹中執行，而不是在后台頁面中執行。 來自該上下文的所有console.log()調用都轉到打開頁面自己的控制台-您應該在此處查看。

console.log("This will show in the background page console");
chrome.tabs.executeScript(
  { code: 'console.log("This will show in the current tab console");' }
);

---

¹確切地說，擴展名創建了一個隔離的上下文，但是它仍然屬於打開的頁面。 有關更多詳細信息，請參見Content Scripts文檔 。