Question

我试图制作一个Chrome扩展程序，它会占用页面的一些内容（<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? （剧透：你可以＆＃39;

如果你look at the docs（顺便说一下，这应该是你的第一个无条件反射），你会发现它有一个回调，如果你阅读了上述问题，你就会理解它和＆＃39} ＃39;是你唯一的选择。但是，还有2个并发症：

回调获得结果的数组。发生这种情况是因为executeScript可以选择（指定allFrames: true或frameId）在子帧中运行。因此，您需要使用结果数组的第一个元素：
```
chrome.tabs.executeScript({
  code: 'document.getElementById("productTitle").innerHTML'
}, function(results) {
  document.getElementById('input_87').value = results[0];
});
```

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

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

1 个答案: