Chrome扩展技术问题：无法搜索页面H1标题，需定义H1变量

我帮你排查了代码里的几个关键问题，咱们一步步来修复，同时把H1内容存为预定义变量：

原代码里的核心问题 #

• 变量拼写错误：你在display_h1函数里把结果赋值给了h1，但最后插入DOM时用的是未定义的h，这是导致无法显示的直接原因。
• 变量未声明：直接写h1 = results会创建全局变量，容易引发命名冲突，建议用let/const声明变量。
• 缺少容错处理：如果当前页面没有H1标签，document.querySelector("h1")会返回null，调用textContent会直接报错。
• 忽略了API结果格式：chrome.tabs.executeScript的回调参数是一个数组，要取第一个元素才是实际的返回值。

修正后的完整代码 #

// 预定义全局变量存储H1内容，方便后续复用
let pageH1 = "";

function display_h1(results) {
  // 从executeScript的结果数组中取出H1内容，赋值给预定义变量
  pageH1 = results[0];
  // 处理页面没有H1的情况，避免显示空内容
  const displayText = pageH1 ? pageH1 : "当前页面未找到H1标题";
  document.querySelector("#id1").innerHTML = displayText;
}

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  const activeTab = tabs[0];
  chrome.tabs.executeScript(
    activeTab.id,
    {
      // 注入的脚本先判断H1是否存在，存在则返回文本，否则返回空字符串
      code: 'document.querySelector("h1") ? document.querySelector("h1").textContent : ""'
    },
    display_h1
  );
});

关键改动说明 #

1. 预定义H1变量：我们在顶部声明了pageH1变量，专门用来存储页面的H1内容，你后续在其他函数里也可以直接调用这个变量。
2. 修正变量拼写与结果格式：把原代码里的h改成了pageH1，同时用results[0]获取executeScript返回的实际内容（因为这个API的回调参数是数组格式）。
3. 添加容错逻辑：不管是注入脚本里还是显示函数里，都做了H1不存在的判断，避免报错和空内容。
4. 完善标签查询条件：加上currentWindow: true，确保获取的是当前窗口的活跃标签，避免跨窗口的意外问题。

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