如何从Google Chrome扩展程序中获取当前选项卡的URL？

Question

我在使用Google Chrome扩展程序时感到非常有趣，我想知道如何将当前标签页的URL存储在变量中？

- Axiol

Answer 1

使用chrome.tabs.query()的方法如下：

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

你需要在你的扩展清单中请求tabs或activeTab权限：

"permissions": [ ...
   "tabs"
]

或者

"permissions": [ ...
   "activeTab"
]

如果您的代码在用户明确调用扩展之后（点击其图标或上下文菜单项，或按下其chrome.commands热键）使用chrome.tabs.query，请优先选择activeTab权限，因为安装扩展时该权限不会添加任何警告，而tabs权限会添加“读取您的浏览历史”警告，可能会吓到一些用户。

重要的是要注意，根据您的扩展需求，“当前选项卡”的定义可能会有所不同。

在查询中设置lastFocusedWindow: true适用于当您想要访问用户焦点窗口（通常是最顶层的窗口）中的当前选项卡时。

设置currentWindow: true允许您获取当前正在执行您的扩展代码的窗口中的当前选项卡。例如，如果您的扩展创建了一个新的窗口/弹出窗口（改变了焦点），但仍然希望从运行扩展的窗口中访问选项卡信息，则这可能很有用。

在这个例子中，我选择使用lastFocusedWindow: true，因为Google指出了currentWindow可能不总是存在的情况。

你可以根据这里定义的任何属性进一步优化你的标签查询：chrome.tabs.query。

- thauburger

---

为什么 URL 总是未定义的？ - nnm

如果url未定义，请尝试从Chrome://extensions重新加载您的扩展程序。这将重新加载扩展的配置并应用新添加的“tabs”权限。 - flashbackzoo

url未定义，因为https://dev59.com/Sl4b5IYBdhLWcg3wsDl3（答案：关闭您的开发工具窗口或更改为currentWindow而不是lastFocusedWindow） - kspearrin

当我的开发工具窗口未停靠时，我得到了未定义的错误。将其停靠解决了未定义的问题。 - Fisu

这不会将变量url返回给调用者。我想要一个简单的函数url=GetCurrentTabUrl()，它将当前选项卡的URL返回给调用者。在这里，变量位于回调函数内部。我可以将其传递给另一个函数，但这会使代码结构变得笨拙。我也想避免使用全局变量。有什么建议吗，@thauburger？ - Thierry Dalon

Answer 2

其他答案认为你想要从弹出窗口或后台脚本中了解它。

如果您想要从内容脚本中了解当前URL，则适用标准JS方法：

window.location.toString()

您可以使用window.location的属性来访问URL的各个部分，例如host、protocol或path。

- Xan

---

很好的答案。我想要的只是 window.location.host 来查看我是否在 "stackoverflow.com" 上。 - Salyangoz

这实际上就是我要找的内容。我太专注于扩展机制，以至于忘记了你可以使用 window.location.href 获取页面的 URL。 - felwithe

这需要在 content_script 部分使用 match:"<all_urls>"，但 Chrome 不建议使用 <all_urls>。 - mcan

@Tahtakafa 不，它并不假定内容脚本已经在运行（无论是通过页面的主机权限还是activeTab）。 - Xan

请确保在contentScript.js中运行此代码，而不是在background.js中运行。只需将您从URL中过滤出的任何数据传递到消息中以发送到background.js。例如： let message = { type: "fetchVideoDate", id: getVideoId() }; 其中getVideoId()包含对window.location.toString()的执行。 否则，您将获得一些chrome://temp_background_file.html数据。 还要注意，有时将message称为request。 - DavidHulsman

Answer 3

警告！chrome.tabs.getSelected已经被弃用，请使用其他答案中展示的chrome.tabs.query。

---

首先，您需要在manifest.json中设置API权限：

"permissions": [
    "tabs"
]

用于存储URL：

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

- Axiol

---

之所以仅限于弹出窗口（页面操作，浏览器操作）是因为您在第一参数中输入了“null”。 http://code.google.com/chrome/extensions/tabs.html#method-getSelected文档说明第一个参数是 windowId，请在选项或后台页面中使用该 ID，否则将获得当前正在查看的标签，而这些选项未被定义。 - Mohamed Mansour

是的，它可以工作，但不确定为什么在参考文档中找不到chrome.tabs.getSelected方法。 - swimmingfisher

chrome.tabs.getSelected 方法已被弃用，正确的方法在这个回答中列出。 - Rob W

而且，如何获取所有打开标签页的链接 - Idrizi.A

我想在 main.js 中获取当前 URL，有什么指导吗？ - Tahir Yasin

Answer 4

问题在于chrome.tabs.getSelected是异步的。以下代码通常不会按预期工作。当写入到控制台时，'tablink'的值仍将是未定义的，因为getSelected尚未调用重置该值的回调函数：

var tablink;
chrome.tabs.getSelected(null,function(tab) {
    tablink = tab.url;
});
console.log(tablink);

解决方法是将使用该值的代码包装在一个函数中，并通过getSelected调用该函数。这样，您可以保证始终设置一个值，因为在执行代码之前，您的代码必须等待该值的提供。尝试像下面这样做：

尝试将代码包装在一个函数中，在该函数中使用该值，并由getSelected调用该函数。这样可以确保在执行代码之前始终设置一个值，因为您的代码必须等待提供该值。尝试如下所示：

chrome.tabs.getSelected(null, function(tab) {
    myFunction(tab.url);
});

function myFunction(tablink) {
  // do stuff here
  console.log(tablink);
}

- Nyk Cowham

---

感谢您提供的代码，它对我很有帮助。在 manifest.json 文件中，需要将 "tabs" 添加到权限列表中，如下所示："permissions": [ "tabs" ] - Doug Molineux

这也像魔法一样奏效：在弹出窗口中获取当前窗口（Google Chrome扩展） - chemark

而且，如何获取所有打开标签页的链接 - Idrizi.A

我尝试了这个，但是得到了URL未定义的错误，为什么会这样？ - nnm

Answer 5

这是一种非常简单的方法

window.location.toString();  

你可能需要在内容脚本中完成这个操作，因为它具有网页上的js文件可以拥有的所有功能以及更多。

- unixGeek

---

你也可以在网页中使用JavaScript来实现这个。 - unixGeek

Answer 6

你好，这是一份Google Chrome示例，可以将当前页面发送给朋友。其基本思路是获取页面内容（对您来说不是很有趣），然后获取URL。此外，它还是一个良好的工作代码示例，我更喜欢这种方式而不是阅读文档。

可以在这里找到： 发送此页电子邮件

- bastianneu

Answer 7

async function getCurrentTabUrl () {
  const tabs = await chrome.tabs.query({ active: true })
  return tabs[0].url
}

您需要在您的清单文件中添加"permissions": ["tabs"]。

- vdegenne

Answer 8

这个解决方案已经过测试。

在manifest.json中为API设置权限。

"permissions": [ ...
   "tabs",
    "activeTab",
    "<all_urls>"
]

在首次加载时调用函数。https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {  
  sendCurrentUrl()
})

当发生变化时调用函数。https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
  sendCurrentUrl()
})

获取URL的函数。

function sendCurrentUrl() {
  chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url
    console.log(tablink)
  })

- Non404

Answer 9

对于那些使用上下文菜单API的人来说，文档并不立即清楚如何获取选项卡信息。

  chrome.contextMenus.onClicked.addListener(function(info, tab) {
    console.log(info);
    return console.log(tab);
  });

https://developer.chrome.com/extensions/contextMenus

- lfender6445

Answer 10

你需要检查一下this。

HTML

<button id="saveActionId"> Save </button>

manifest.json

  "permissions": [
    "activeTab",
    "tabs"
   ]

JavaScript
以下代码将在按钮点击时将当前窗口中所有网址保存到JSON对象中。

var saveActionButton = document.getElementById('saveActionId');
saveActionButton.addEventListener('click', function() {
    myArray = [];
    chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
    function (array_of_Tabs) {  //Tab tab
        arrayLength = array_of_Tabs.length;
        //alert(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            myArray.push(array_of_Tabs[i].url);
        }
        obj = JSON.parse(JSON.stringify(myArray));
    });
}, false);

- Kanagavelu Sugumar

---

我用于保存活动窗口URL的Chrome扩展程序是https://chrome.google.com/webstore/detail/tabstore-plugin/jngplpdonggccbjlmbphlbancacmpmpp - Kanagavelu Sugumar