如何用AngularJS/JavaScript获取浏览器已打开标签页URL？解决相关报错

嘿，这个报错我太熟悉了！本质就是你的代码找不到chrome.windows这个API，大概率是两个原因：权限没配置或者代码跑错了地方，咱们一步步来修复：

1. 先检查你的manifest.json权限 #

Chrome扩展的API不是随便就能用的，必须先在manifest.json里声明对应的权限才能访问chrome.windows和chrome.tabs。

如果你用的是Manifest V3（现在推荐的版本），更新你的manifest.json：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["tabs", "windows"],
  "background": {
    "service_worker": "background.js"
  }
}

要是还在用Manifest V2，改成这样：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["tabs", "windows"],
  "background": {
    "scripts": ["background.js"]
  }
}

添加"tabs"和"windows"权限是关键，这样扩展才有资格访问标签页和窗口相关的API。

2. 确保代码运行在正确的环境里 #

chrome.*系列API只能在扩展的后台脚本（background script）、弹出页（popup）或者选项页里用，绝对不能直接写在网页的内容脚本（content script）或者普通网页里——这些地方根本找不到chrome.windows对象！

示例1：放在后台脚本里（background.js） #

把你的函数放在后台脚本里，扩展启动后就能自动执行：

function list_session(callback) {
  chrome.windows.getAll({ populate: true }, function(window_list) {
    const tabList = [];
    // 遍历所有窗口，收集标签页
    window_list.forEach(window => {
      tabList.push(...window.tabs);
    });
    console.log('所有标签页数据:', tabList);
    if (callback) callback(tabList);
  });
}

// 调用函数，提取所有标签页的URL
list_session(tabList => {
  const urls = tabList.map(tab => tab.url);
  console.log('所有标签页URL:', urls);
});

示例2：放在弹出页里（popup.js） #

如果想点击扩展图标时获取标签页，就把代码放在弹出页的JS里，记得要等DOM加载完成再执行：

document.addEventListener('DOMContentLoaded', () => {
  function list_session(callback) {
    chrome.windows.getAll({ populate: true }, function(window_list) {
      const tabList = [];
      window_list.forEach(window => tabList.push(...window.tabs));
      if (callback) callback(tabList);
    });
  }

  // 获取URL并显示在弹出页里
  list_session(tabList => {
    const urlContainer = document.getElementById('url-container');
    tabList.forEach(tab => {
      const urlItem = document.createElement('div');
      urlItem.textContent = tab.url;
      urlContainer.appendChild(urlItem);
    });
  });
});

对应的popup.html可以这样写：

<!DOCTYPE html>
<html>
<head>
  <style>body { width: 300px; padding: 10px; }</style>
</head>
<body>
  <h3>打开的标签页URL</h3>
  <div id="url-container"></div>
  <script src="popup.js"></script>
</body>
</html>

最后验证一下 #

修改完manifest和代码后，记得在Chrome扩展管理页面（chrome://extensions/）重新加载你的扩展，然后打开控制台（后台脚本的控制台可以在扩展管理页面点击“查看视图”→“服务工作者”或者“背景页”），就能看到正常输出的标签页数据了！

内容的提问来源于stack exchange，提问作者its me