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

Question

我正在尝试制作一个 Chrome 扩展程序，它将获取页面的一些内容(<span> 和 id="productTitile" 的内部 HTML)然后我需要获取该值并将其放入字段中在我的 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 是异步的 - 它不返回任何内容(并且不立即执行任何操作)。

一般来说，这个问题的一个很好的来源是: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];
     }
   });