从 popup.js 访问 DOM | Chrome 扩展程序

Question

我正在尝试制作一个 Chrome 扩展程序，它将获取页面的一些内容（a <span>with的内部 HTML id="productTitile"）然后我需要获取该值并将其放入我的 popup.html 中的一个字段中。

我试过这个：

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

但它只是回到undefined了现场。然后我document.getElementById("productTitle").innerHTML在父页面的控制台中运行，它给了我预期的值，但是当我在弹出扩展的控制台中运行整个代码时，它再次返回未定义。

我究竟做错了什么？

Answer 1

首先，正如 Haibara Ai 所说，它chrome.tabs.executeScript是异步的——它不返回任何东西（也不立即做任何事情）。

一般来说，一个很好的来源是这个问题：如何从异步调用返回响应？ （剧透：你不能）

如果您查看文档（顺便说一下，这应该是您的第一个无条件反射），您会看到它有一个回调，如果您阅读上述问题，您就会明白这是您唯一的选择。但是，还有两个额外的并发症：

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