Chrome扩展：从弹出窗口获取当前选项卡

Question

我正在编写一个Chrome扩展程序，其中一部分需要在弹出页面上单击按钮时获取当前标签页的标题和URL。

我之前已经使用过Chrome的消息传递系统，并且尝试了很多次才使它正常运行。然而，我从未使用它们与弹出页面一起使用，并且据我所知，这样做要困难得多。

到目前为止，我设想的时间线是这样的：

1. popup.html / popup.js:    单击按钮
2. popup.html / popup.js:    发送请求/消息到内容脚本
3. contentScript.js:           接收来自弹出页面的请求/消息
4. contentScript.js:           将当前标签页的标题和URL存储在变量中
5. contentScript.js:           将2个变量作为字符串化的响应发送
6. popup.html / popup.js:    从响应中解析出2个变量

通常情况下，我可以解决这个问题，但是我读到了一些事情，让我有些犯难，例如：

• chrome.tabs.getSelected只能在后台页面/脚本中使用。这是否意味着根本不需要使用内容脚本？
• 无法直接从内容脚本向弹出窗口发送消息，它们必须通过后台页面传递
• 必须确认弹出窗口已存在，然后才能将该消息传递给它（尽管我认为我知道如何做到这一点）

我已经觉得Chrome的消息传递系统很难理解，但这个就完全让我困惑了。因此，写下了这篇文章。

- mythofechelon

Answer 1

chrome.tabs.getSelected已经停用。您应该使用chrome.tabs.query代替。

chrome.tabs.query需要两个参数：一个查询对象和一个回调函数，该函数将结果选项卡的数组作为参数。

您可以通过查询当前活动且在当前窗口中的所有选项卡来获取“当前选项卡”。

var query = { active: true, currentWindow: true };

由于此查询将返回一个包含当前标签页的 Tab 数组，因此请确保在回调函数中获取第一个元素。

function callback(tabs) {
  var currentTab = tabs[0]; // there will be only one in this array
  console.log(currentTab); // also has properties like currentTab.id
}

就这样：

chrome.tabs.query(query, callback);

- fny

---

谢谢这个提示...我一直在努力获取弹出窗口的URL。必须设置一个timeOut...当页面正在加载并且我正在寻找页面信息时，我发现我经常使用timeOuts。 - denikov

如果您想使用currentTab.url属性，则必须在manifest.json文件中包含url权限，例如："permissions": ["tabs", ...]。 - Martin Capodici

这里有一个演示代码，可以返回当前选项卡！ - fny

@fny，你能解释一下查询对象中currentWindow和lastFocusedWindow参数的区别吗？文档并没有很好地澄清这个问题。我问这个问题是因为我希望避免出现有时将DevTools窗口视为活动选项卡而没有URL的情况。 - kano

最好使用lastFocusedWindow。参考：https://dev59.com/GWMl5IYBdhLWcg3wZWSD#29151677 - Gangula

Answer 2

另一种方法是从弹出窗口向内容脚本发送消息，然后返回URL window.location.href

- GorvGoyl