Chrome扩展开发问题：无法从网页提取指定文本内容

问题原因 #

弹窗的JavaScript运行在独立的隔离上下文里，和当前打开的网页DOM完全分离。你当前的代码是在弹窗自身的DOM中查找.name类元素，自然找不到目标，代码抛出错误后无法执行更新内容的逻辑，导致弹窗一直停留在“Loading...”状态。

修复方案 #

利用Chrome扩展的脚本注入能力，向当前活跃标签页注入脚本获取网页DOM内容，再将结果传回弹窗。修改后的popup.js代码如下：

document.addEventListener('DOMContentLoaded', async function () {
  const popupContent = document.getElementById('popup-content');
  try {
    // 获取当前活跃标签页ID
    const activeTab = await chrome.tabs.query({ active: true, currentWindow: true });
    // 向目标标签页注入脚本，提取.name元素文本
    const [executionResult] = await chrome.scripting.executeScript({
      target: { tabId: activeTab[0].id },
      func: () => {
        const nameElement = document.querySelector('.name');
        return nameElement ? nameElement.textContent.trim() : '未找到目标元素';
      }
    });
    // 更新弹窗显示内容
    popupContent.textContent = executionResult.result;
  } catch (err) {
    popupContent.textContent = `获取失败：${err.message}`;
  }
});

关键说明 #

• 你的manifest.json已经声明了activeTab权限，满足脚本注入的权限要求
• 注入的func函数会在当前网页的上下文执行，能直接访问网页的DOM结构
• 加入try/catch捕获异常，避免因网页无目标元素或权限问题导致弹窗一直加载
• 使用textContent替代innerHTML更安全，避免XSS风险

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