如何从两个浏览器标签页获取DOM信息并发送单条桌面通知？

1. 先搞定「Undefined」问题：正确获取标签页文本 #

你现在显示undefined，大概率是选择器不对，或者没正确注入脚本拿内容。比如维基百科的标题在span#firstHeading，先把获取单个标签页内容的函数写对：

async function getTabText(tabId) {
  try {
    const [result] = await chrome.scripting.executeScript({
      target: { tabId: tabId },
      func: () => {
        // 这里替换成你要抓的span的选择器，比如维基百科用span#firstHeading
        const span = document.querySelector('span#firstHeading');
        return span ? span.innerText : '拿不到内容';
      }
    });
    return result.result;
  } catch (err) {
    console.error('抓内容失败:', err);
    return '获取失败';
  }
}

2. 合并两个标签页内容，只发一条通知 #

别分开发通知，用Promise.all等两个页面的内容都拿到手，再组装成一条发出去：

async function fetchAndNotify() {
  // 先筛选出你要的标签页，比如所有维基百科页面
  const tabs = await chrome.tabs.query({ url: '*://*.wikipedia.org/*' });
  if (tabs.length < 2) {
    new Notification('提示', { body: '没找到足够的维基百科标签页' });
    return;
  }

  // 同时抓两个标签页的内容
  const [title1, title2] = await Promise.all([
    getTabText(tabs[0].id),
    getTabText(tabs[1].id)
  ]);

  // 发合并后的通知
  new Notification('双页面标题', {
    body: `页面1: ${title1}\n页面2: ${title2}`
  });
}

3. 每小时自动执行：用Chrome Alarms API #

别用setInterval，后台休眠时会失效，用Chrome官方的alarms API更靠谱。

首先在manifest.json加权限：

{
  "permissions": ["scripting", "tabs", "alarms", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  // 其他配置...
}

然后在background.js里写定时逻辑：

// 扩展安装时初始化每小时闹钟
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('hourlyCheck', { periodInMinutes: 60 });
});

// 闹钟触发时执行任务
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'hourlyCheck') {
    fetchAndNotify();
  }
});

// 把之前的getTabText和fetchAndNotify也放到background.js里

4. 调整Popup按钮逻辑（如果需要） #

如果你的Popup按钮是用来开页面并手动触发一次检查，改成这样：

// popup.js里的按钮点击事件
document.getElementById('openTabsBtn').addEventListener('click', async () => {
  // 打开两个维基页面
  await chrome.tabs.create({ url: 'https://en.wikipedia.org/wiki/Main_Page' });
  await chrome.tabs.create({ url: 'https://zh.wikipedia.org/wiki/Main_Page' });
  // 等2秒让页面加载完再抓内容
  setTimeout(fetchAndNotify, 2000);
});

几个要注意的点 #

• 权限必须加全：scripting（注入脚本）、tabs（查标签页）、alarms（定时）、notifications（发通知）。
• 你的目标span选择器一定要准确，别写错了，不然还是会拿不到内容。
• 用Promise.all并行抓内容，比一个个等快，而且能确保两个结果都拿到再发通知。
• 后台脚本要用Service Worker（Chrome扩展V3的标准），别用旧的background_page。

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