从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]; 
       } 
   });