在擴展的Chrome DevTools和內容腳本之間的溝通

Question

（我已閱讀this，並沒有工作，我已經做了很多搜索和實驗都無濟於事。）

我寫的是Chrome擴展程序（BigConsole），目標是爲Chrome開發人員工具構建更好的「控制檯」選項卡。這意味着我想在頁面的上下文中執行用戶輸入的代碼，以訪問頁面上的DOM和其他變量。要做到這一點，通信的結構如下：

• devtools創建panel其中用戶編寫代碼
• 當用戶想要從panel執行代碼，所述panel發送一個消息給一個background腳本代碼
• 的background腳本從panel接收消息/碼並將其傳遞到content腳本將其注入到所述頁面
• 的content腳本recei VES從background腳本消息/代碼和注入一個script元件到其中，然後運行該代碼
• 的script在頁面上的結果然後回發到content腳本window.postMessage
• 的content的頁面腳本偵聽來自該網頁的信息/結果並將其傳遞到background腳本
• 的background腳本接收消息/從content腳本導致並將其傳遞到panel
• 的panel接收messag從background腳本E /導致並將其插入到日誌結果

呼的。

現在，當用戶試圖運行代碼時，沒有任何反應。我在代碼中放了一堆console.log()，但控制檯中沒有任何東西出現。我的主要問題是，我在這裏做了什麼錯誤的消息傳遞，導致什麼都沒有發生？或者，我很樂意被告知我這樣做太複雜，並且有更好的做事方式。下面簡化代碼...

panel.js：

window.onload = function() { 
     var port = chrome.runtime.connect({name: "Eval in context"}); 
     // Add the eval'd response to the console when the background page sends it back 
     port.onMessage.addListener(function (msg) { 
     addToConsole(msg, false); 
     }); 
     document.getElementById('run').addEventListener('click', function() { 
     var s = document.getElementById('console').value; 
     try { 
      // Ask the background page to ask the content script to inject a script 
      // into the DOM that can finally eval `s` in the right context. 
      port.postMessage(s); 
      // Outputting `s` to the log in the panel works here, 
      // but console.log() does nothing, and I can't observe any 
      // results of port.postMessage 
     } 
     catch(e) {} 
     }); 
    }; 

background.js：

chrome.runtime.onConnect.addListener(function (port) { 
     // Listen for message from the panel and pass it on to the content 
     port.onMessage.addListener(function (message) { 
     // Request a tab for sending needed information 
     chrome.tabs.query({'active': true,'currentWindow': true}, function (tabs) { 
      // Send message to content script 
      if (tab) { 
      chrome.tabs.sendMessage(tabs[0].id, message); 
      } 
     }); 
     }); 
     // Post back to Devtools from content 
     chrome.runtime.onMessage.addListener(function (message, sender) { 
     port.postMessage(message); 
     }); 
    }); 

content.js：

// Listen for the content to eval from the panel via the background page 
    chrome.runtime.onMessage.addListener(function (message, sender) { 
     executeScriptInPageContext(message); 
    }); 
    function executeScriptInPageContext(m) { alert(m); } 

Answer 1

正如Alex指出的那樣，這是代碼中的一個錯誤，它阻止了它的工作。

放下當前的代碼並使用chrome.devtools.inspectedWindow.eval直接運行代碼並解析結果。這就簡化了複雜的邏輯：

• devtools創建了用戶編寫代碼
• devtools面板運行的代碼
• devtools手柄導致

PS。有是一種方式來操縱現有的控制檯，但我建議不要使用它，除非它是個人使用。在this answer中顯示了兩種不同的方法。