点击浏览器扩展图标时获取当前标签页URL并在弹窗显示的最优方案

你的问题其实出在对浏览器扩展不同上下文的理解上，咱们先拆解下之前方法的问题：

• Content Scripts不稳定：Content Script是注入到网页中的，和Popup属于完全独立的上下文，要让它更新Popup的DOM需要用消息通信，完全没必要绕这个弯，因为Popup本身就属于扩展上下文，有权限直接调用Tabs API。
• chrome.browserAction.onClicked不生效：当你在manifest.json里设置了default_popup后，点击扩展图标会直接打开Popup，这个事件就不会触发了——这是浏览器的默认行为。
• window.onload的问题：Popup被浏览器缓存时，多次点击图标可能不会重新触发window.onload，导致代码不执行，改用DOM加载完成的事件会更可靠。

实现步骤（已经满足你的权限要求） #

你已经在manifest.json里申请了tabs权限，这就够了，接下来只需要调整Popup的脚本逻辑：

1. 调整Popup.html的脚本顺序

把jQuery放在前面，确保依赖加载完成再执行你的脚本：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="js_src/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js_src/script7.js"></script>
</head>
<body>
  <div>
    <span id="cu" class="cu">Default</span>
    <button id="cub" class="cub">Get URL</button>
  </div>
</body>
</html>

2. 重写script7.js的逻辑

用更可靠的DOM就绪事件，封装复用的获取URL函数，同时增加错误处理：

// 等待DOM完全加载后执行逻辑
$(document).ready(function() {
  // 打开Popup时自动获取当前标签URL
  fetchCurrentTabUrl();

  // 绑定按钮点击事件，重新获取URL
  $('#cub').on('click', fetchCurrentTabUrl);
});

// 封装获取当前标签URL的函数
function fetchCurrentTabUrl() {
  // 查询当前窗口的活跃标签页
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
    // 处理异常情况：比如没有获取到标签
    if (tabs && tabs.length > 0) {
      $('#cu').text(tabs[0].url);
    } else {
      $('#cu').text('无法获取当前URL');
    }
  });
}

为什么这是最优方案？ #

• 高效稳定：直接在Popup上下文调用Tabs API，不需要跨上下文通信，避免了Content Script带来的不稳定问题。
• 符合扩展生命周期：$(document).ready()会在Popup每次打开时触发（即使被缓存，DOM重建后也会执行），比window.onload更可靠。
• 代码复用：把获取URL的逻辑封装成函数，既可以在Popup加载时自动执行，也可以绑定到按钮点击事件，减少重复代码。
• 错误处理：增加了对tabs数组为空的判断，避免出现未定义错误。

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