popup.jsからDOMにアクセスする|クロムエクステンション

Question

私はクロームエクステンションを作り、ページの内容の一部を取ろうとしています（<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]; 
       } 
   });