从“popup.html”访问当前选项卡 DOM 对象？答案

【问题标题】：Accessing Current Tab DOM Object from "popup.html"?从“popup.html”访问当前选项卡 DOM 对象？
【发布时间】：2009-12-26 20:02:33
【问题描述】：

我正在为 Google Chrome 浏览器开发一个扩展程序。我不知道如何从“popup.html”页面访问当前选项卡 DOM 对象。有什么建议吗？

【问题讨论】：

标签： javascript google-chrome

【解决方案1】：

默认情况下，在 popup.js/popup.html 中，“document”对象仅指扩展的弹出窗口的文档。要获取特定选项卡（例如当前活动选项卡）的 DOM，您需要使用 content scripts communications。例如，我们需要通过popup从extension 向您的内容脚本发送请求，因此在popup.html 中您可以执行以下操作：

chrome.tabs.getSelected(null, function(tab) {
  // Send a request to the content script.
  chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) {
    console.log(response.dom);
  });
});

现在在内容脚本中，我们需要 listen for those events 来自扩展名，所以在一些文件中我们命名为 dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM")
   sendResponse({dom: "The dom that you want to get"});
 else
   sendResponse({}); // Send nothing..
});

现在记得设置您的 manifest 以包含内容脚本和选项卡权限。

【讨论】：

是的，我在示例中向您展示的是在 Chrome 扩展中完成的同步消息传递。我返回了一个字符串“你想要获取的 dom”，但实际上，你可以返回任何你想要的 DOM。如果您想获取正文中的所有内容，可以执行 "sendResponse({dom: document.getElementsByTagName("body")[0]});"
上面的例子有效吗？ AFAIK 发送响应会将 dom 序列化为 json，由于 dom 对象的循环结构，这可能会导致错误。
彼得，正确，因此您需要以可转移的格式传递它。
考虑到 DOM 对象不可序列化，这个答案获得如此高的投票似乎很奇怪。确实，您可以序列化实际的 html，但这不是 OP 所要求的。据我所知，您无法从后台/弹出脚本访问 DOM 对象。你必须注入一个内容脚本来操作 DOM。
chrome.tabs.getSelected Deprecated since Chrome 33; chrome.tabs.sendRequest Deprecated since Chrome 33; chrome.extension.onRequest Deprecated since Chrome 33.

【解决方案2】：

这是最新的修复：

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
      console.log(response.farewell);
  });
});

（注意：上面的console.log(response.farewell)是针对popup.html的，不是你当前的tab）

contentscript.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

来源：https://developer.chrome.com/extensions/messaging

【讨论】：

【解决方案3】：

这个答案似乎不适用于最新的 API。这是一个工作示例。

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var tab = tabs[0];
    console.log(tab.url, tab.title);
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(msg) {
            msg = msg || {};
            console.log('onResponse', msg.farewell);
        });
    });
});

getDescription.js：

window.onload = function() {
    chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) {
        console.log('onMessage', msg);
        if (msg.greeting == "hello") {
            sendResponse({farewell: "goodbye"});
        } else{
           sendResponse({});
        }
    });
};

manifest.json 的相关部分：

{
  "permissions": [
      "tabs"
  ],

  "content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["getDescription.js"]
    }
   ]
}

【讨论】：