在弹出窗口中获取 chrome 扩展中的当前选项卡 url - Javascript (1)

📌 相关文章

📜 在弹出窗口中获取 chrome 扩展中的当前选项卡 url - Javascript (1)

📅 最后修改于: 2023-12-03 14:51:26.742000 🧑 作者: Mango

在弹出窗口中获取 Chrome 扩展中的当前选项卡 URL - JavaScript

简介

当开发 Chrome 扩展时，有时候需要从当前选项卡中获取 URL 信息。在弹出窗口中获取当前选项卡的 URL 是一种常见的需求，本文将介绍如何使用 JavaScript 在 Chrome 扩展中实现该功能。

步骤

以下是实现在弹出窗口中获取当前选项卡 URL 的步骤：

创建一个弹出窗口的 HTML 文件。

<!DOCTYPE html>
<html>
<head>
  <title>弹出窗口</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>当前选项卡 URL 是: <span id="url"></span></h1>
</body>
</html>

在扩展的 popup.js 文件中，使用 Chrome 扩展的 API 来获取当前选项卡 URL。

// 在页面加载完成后执行以下代码
document.addEventListener('DOMContentLoaded', function() {
  // 使用 chrome.tabs API 获取当前选项卡
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    // 获取当前选项卡的 URL
    var url = tabs[0].url;
    
    // 将 URL 设置到弹出窗口中对应的元素中
    var urlElement = document.getElementById('url');
    urlElement.textContent = url;
  });
});

解释

上述代码中，我们首先在弹出窗口的 HTML 文件中引入了一个名为 popup.js 的 JavaScript 文件。然后，在 popup.js 文件中，我们通过使用 chrome.tabs.query API，查询当前活跃的选项卡，并以 currentWindow: true 的参数来指定当前窗口。这样我们就能获取到这个活跃选项卡的信息。

获取到选项卡信息后，通过访问 tabs[0].url 属性，我们可以获取到当前选项卡的 URL。然后，将 URL 设置到弹出窗口 HTML 文件中指定的元素 (<span id="url"></span>) 中，以便在页面上显示出来。

注意事项

在 Chrome 扩展中使用 JavaScript 获取当前选项卡 URL，需要在清单文件 (manifest.json) 中添加 tabs 权限。
chrome.tabs.query 是异步方法，使用回调函数来获取结果。所以在获取 URL 之前，需要确保对应的回调函数被执行。

以上是使用 JavaScript 在弹出窗口中获取 Chrome 扩展中的当前选项卡 URL 的方法。此方法非常实用，可以帮助开发人员在扩展中获取所需的 URL 信息。