從popup.js |訪問DOM Chrome Extent

Question

我試圖做一個Chrome Extention，將採取一些頁面的內容（<span>的內部HTML與id="productTitile"）然後，我需要採取該值，並將其放入我的popup.html 。

我已經檢查了很多關於堆棧溢出的其他問題，但沒有一個人似乎有一個工作的答案。

我已經試過這樣：

document.getElementById('input_87').value = chrome.tabs.executeScript({ 
    code: 'document.getElementById("productTitle").innerHTML' 
}); 

，但它只是返回undefined進入該領域。然後我在父頁面的控制檯中運行document.getElementById("productTitle").innerHTML，它給了我期望的值，但是當我在彈出擴展的控制檯中運行整個代碼時，它再次返回undefined。

有人可以請幫我出來或告訴我我做錯了什麼？

Answer 1

首先，正如Haibara Ai所說，chrome.tabs.executeScript是異步的 - 它不會返回任何東西（並且不會立即執行任何操作）。

這個一般的良好來源是這樣一個問題：How do I return the response from an asynchronous call?（擾流板：你不能）

如果look at the docs（其中，順便說一下，應該是你的第一個無條件反射），你」你會發現它有一個回調，如果你閱讀上面的問題，你會明白這是你唯一的選擇。但是，也有2種額外的併發症：

1. 回調得到結果的陣列。發生這種情況是因爲executeScript可以（可選地指定allFrames: true或frameId）在子​​幀中運行。所以你需要使用結果數組的第一個元素：

   chrome.tabs.executeScript({ 
       code: 'document.getElementById("productTitle").innerHTML' 
   }, function(results) { 
       document.getElementById('input_87').value = results[0]; 
   }); 
   

2. 到executeScript，則調用失敗 - 例如，當無論權限，如Chrome網上應用店的頁面不是編寫腳本。這是明智的檢查，你實際使用之前得到結果：

   chrome.tabs.executeScript({ 
       code: 'document.getElementById("productTitle").innerHTML' 
   }, function(results) { 
       if (chrome.runtime.lastError) { 
       // Couldn't execute the script at all 
       } else if (typeof results[0] === "undefined") { 
       // Couldn't find what we wanted 
       } else { 
       // Everything is fine 
       document.getElementById('input_87').value = results[0]; 
       } 
   });