Chrome扩展中用JS获取当前浏览器URL仅返回popup的index.html路径怎么办

window.location.href获取的是代码当前运行环境的页面地址，Chrome扩展的popup是独立于浏览器标签页的运行上下文，本身属于扩展的内部页面，所以只能拿到popup页面的自身路径，无法直接获取浏览器激活标签页的URL。

• 第一步：配置扩展权限
  打开你的manifest.json文件，添加tabs权限：
  若使用当前主流的Manifest V3版本，参考配置：

  {
    "manifest_version": 3,
    "name": "你的扩展名称",
    "version": "1.0",
    "permissions": ["tabs"],
    "action": {
      "default_popup": "popup.html"
    }
  }
  

  若使用旧版Manifest V2版本，参考配置：

  {
    "manifest_version": 2,
    "name": "你的扩展名称",
    "version": "1.0",
    "permissions": ["tabs"],
    "browser_action": {
      "default_popup": "popup.html"
    }
  }
  

• 第二步：修改popup对应的JS代码
  调用Chrome扩展官方提供的chrome.tabs.queryAPI获取当前激活标签页的URL，示例代码：

  // 查询当前窗口下处于激活状态的标签页
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    const currentTabUrl = tabs[0].url;
    // 替换为你页面中用于展示URL的div元素id
    document.getElementById('target-div').textContent = currentTabUrl;
  });
  

内容的提问来源于stack exchange，提问作者Anonymous Person