Chrome扩展如何获取当前标签页标题？弹窗显示及动态更新问题

核心问题分析 #

你的代码存在三个关键问题：

• 异步函数getCurrentTab仅被赋值给theTitle，但未执行调用，直接将函数对象赋值给DOM的innerHTML，自然无法显示标签页标题。
• 获取标签页的逻辑放在了background的service_worker中，但弹窗的DOM操作必须在弹窗自身的脚本里完成，service_worker无法直接访问弹窗DOM。
• 缺少标签页切换、页面刷新时的事件监听，无法自动更新标题。

修复步骤 #

1. 修正manifest.json配置 #

添加action字段指定弹窗页面，确保弹窗能被正确加载：

{
  "name": "Price Comparing Tool",
  "version": "0.1.0",
  "description": "Immediate notification on potential savings!",
  "permissions": ["tabs"],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "script.js"
  }
}

（注：当前需求无需依赖background service_worker，若暂时用不到可直接移除该字段）

2. 弹窗HTML（popup.html） #

保留原有结构，同时引入弹窗专属脚本文件：

<h3 id="grabedTitle"></h3>
<script src="popup.js"></script>

3. 弹窗脚本（popup.js）实现标题获取与自动更新 #

// 获取当前标签页标题并更新DOM
async function updateTabTitle() {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  if (tab?.title) {
    document.getElementById("grabedTitle").textContent = tab.title;
  }
}

// 弹窗打开时立即获取一次标题
document.addEventListener('DOMContentLoaded', updateTabTitle);

// 监听标签页切换事件，实时更新标题
chrome.tabs.onActivated.addListener(updateTabTitle);

// 监听当前标签页刷新/加载完成事件，更新标题
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.active) {
    updateTabTitle();
  }
});

关键说明 #

• 使用currentWindow: true替代lastFocusedWindow: true，确保获取的是当前浏览器窗口的激活标签页，更贴合弹窗使用场景。
• 用textContent替代innerHTML，避免XSS风险，纯文本内容优先使用textContent。
• 通过DOMContentLoaded触发初始获取，同时监听tabs.onActivated（标签页切换）和tabs.onUpdated（页面加载完成）事件，实现标题自动更新。

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