从popup.js|Chrome扩展访问DOM

Access DOM from popup.js | Chrome Extension

本文关键字：扩展 访问 DOM Chrome popup js      更新时间：2023-09-26

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

我试过这个：

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

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

我做错了什么？

首先，正如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 Web Store。明智的做法是在使用之前检查你是否真的得到了结果：

    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];
  }
});
相关文章：