Chrome插件监听changeInfo.status为complete后获取.title元素textContent报错如何解决

• Chrome扩展的background运行在独立的后台执行环境，和当前打开的网页上下文完全隔离，你在background中直接访问document对象拿到的是后台自身页面的DOM，不是目标网页的DOM，自然找不到类为title的元素，document.querySelector(".title")直接返回null，访问null的textContent属性就触发了这个报错。
• 就算你是在内容脚本中执行这段代码，也可能出现目标元素还没渲染完成、或者页面本身不存在该类元素的情况，直接访问属性也会触发同类型报错。
• 你当前的判断逻辑存在问题：String.prototype.search()方法匹配不到内容时返回-1，而-1在if判断中属于真值，会导致你判断逻辑完全反向。

步骤1：调整扩展执行逻辑，通过注入内容脚本访问网页DOM #

Manifest V3版本写法（background中代码） #

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url) {
    // 过滤chrome内部页面等不需要执行的地址
    if (tab.url.startsWith('chrome://')) return
    try {
      // 注入脚本到目标标签页执行DOM查询逻辑
      const [scriptResult] = await chrome.scripting.executeScript({
        target: { tabId: tabId },
        func: () => {
          // 此处代码运行在目标网页上下文
          const titleEl = document.querySelector(".title")
          // 先判断元素是否存在，避免空值报错
          if (!titleEl) return false
          // 简单子串匹配优先用includes，直接返回布尔值更适合判断
          return titleEl.textContent.includes('65')
        }
      })
      const has65 = scriptResult.result
      // 拿到结果后在background执行后续逻辑
      if (has65) {
        // 此处写你需要执行的后续操作
        console.log('页面title包含65')
      }
    } catch (e) {
      console.error('执行脚本出错', e)
    }
  }
})

Manifest V2版本写法（background中代码） #

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url) {
    if (tab.url.startsWith('chrome://')) return
    chrome.tabs.executeScript(tabId, {
      code: `
        const titleEl = document.querySelector(".title")
        titleEl ? titleEl.textContent.includes('65') : false
      `
    }, (results) => {
      if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError)
        return
      }
      const has65 = results[0]
      if (has65) {
        console.log('页面title包含65')
      }
    })
  }
})

步骤2：配置扩展权限 #

Manifest V3 配置示例（manifest.json） #

{
  "manifest_version": 3,
  "name": "标题检测工具",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["<all_urls>"]
}

Manifest V2 配置示例（manifest.json） #

{
  "manifest_version": 2,
  "name": "标题检测工具",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["tabs", "<all_urls>"]
}

额外优化点 #

• 如果你要匹配的元素是页面异步渲染的（比如JS动态生成的元素），就算监听了complete事件也可能未加载完成，此时可以加轮询检测逻辑，或者使用MutationObserver监听元素加载。
• 简单子串匹配优先使用includes方法，返回布尔值更适合直接做判断，不需要额外处理search返回的索引值。

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