Chrome扩展获取页面邮箱报错：Cannot read properties of null

问题背景 #

开发Chrome扩展时，需要从自有网站特定div区域抓取邮箱地址，目标HTML结构如下：

<div class="ContactView_data__+QQmF">
  <svg xmlns="http://www.w3.org/2040/svg" viewBox="0 0 512 512" fill="currentColor" class="Icon_icon__rqEEN ContactView_solidIcon__v5Fuh" role="img" width="16px" height="16px" focusable="false">
    <title>E-mail address</title>
    <path d="M464 64c26.5 0 48 21.46 48 48 0 15.1-7.1 29.3-19.2 38.4L275.2 313.6a32.1 32.1 0 0 1-37.4 0L19.2 150.4C7.113 141.3 0 127.1 0 112c0-23.51 21.49-48 48-48h416zM217.6 339.2a63.9 63.9 0 0 0 76.8 0L512 176v208c0 33.3-28.7 64-64 64H64c-35.31 0-64-28.7-64-64V176l217.6 163.2z"></path>
  </svg>
  <a class="Normalize_normalize__5biS5 Link_root__FUNP5 Link_fontStyling__+NQdw ContactView_contactData__fQo58" href="mailto:hobik@gmail.com" rel="noopener noreferrer" role="link" target="_self" title="hobik@gmail.com" data-testid="EV_contactperson-email">hobik@gmail.com</a>
</div>

编写的抓取函数运行时控制台报错：

caught TypeError: Cannot read properties of null (reading 'querySelector')
    at scrapeEmailsFromPage (<anonymous>:8:37)

错误出现在const emailElement = divElement.querySelector('a.ContactView_contactData__fQo58');这一行，因为divElement为null。

报错原因 #

1. 类名特殊字符未转义：目标div的类名ContactView_data__+QQmF里的+是CSS选择器特殊字符，直接使用会被解析为相邻兄弟选择器，导致无法匹配元素。
2. 缺少元素存在性检查：页面元素可能未加载完成，querySelector返回null后，后续调用会触发报错。
3. 动态类名不稳定：类名中的随机后缀（如+QQmF）通常是框架生成的动态类名，会随版本或构建变化，导致选择器失效。

解决方案 #

方案1：转义特殊字符并添加存在性检查 #

修改抓取函数，转义类名中的+为\+，同时增加元素存在判断：

function scrapeEmailsFromPage(){
    // 转义类名中的+号
    const divElement = document.querySelector('div.ContactView_data__\\+QQmF');
    if (!divElement) {
        console.log("目标div未找到");
        return;
    }
    const emailElement = divElement.querySelector('a.ContactView_contactData__fQo58');
    if (!emailElement) {
        console.log("邮箱元素未找到");
        return;
    }
    const email = emailElement.textContent.trim();
    console.log(email);
    chrome.runtime.sendMessage({email});
}

方案2：使用更稳定的data-testid选择器 #

目标a标签带有data-testid="EV_contactperson-email"，该属性通常为测试设置，不会轻易变化，直接用它定位更可靠：

function scrapeEmailsFromPage(){
    const emailElement = document.querySelector('[data-testid="EV_contactperson-email"]');
    if (!emailElement) {
        console.log("邮箱元素未找到");
        return;
    }
    const email = emailElement.textContent.trim();
    console.log(email);
    chrome.runtime.sendMessage({email});
}

方案3：处理动态加载的情况 #

如果页面内容是动态渲染的，需要等待元素加载完成后再抓取，可使用MutationObserver监听DOM变化：

function scrapeEmailsFromPage(){
    function checkForEmail() {
        const emailElement = document.querySelector('[data-testid="EV_contactperson-email"]');
        if (emailElement) {
            const email = emailElement.textContent.trim();
            console.log(email);
            chrome.runtime.sendMessage({email});
            observer.disconnect(); // 找到元素后停止监听
        }
    }

    // 立即检查一次
    checkForEmail();

    // 监听DOM变化，直到找到目标元素
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            checkForEmail();
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}

完整扩展代码调整 #

以方案2为例，修改后的完整扩展代码：

let scrapeEmails = document.getElementById('scrapeEmails');

// 接收来自内容脚本的邮箱数据
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    let email = request.email;
    alert(email);
});

scrapeEmails.addEventListener("click", async () => {
    // 获取当前激活标签页
    let [tab] = await chrome.tabs.query({active: true, currentWindow: true});
    // 执行内容脚本
    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        func: scrapeEmailsFromPage,
    });
});

// 抓取邮箱的函数
function scrapeEmailsFromPage(){
    const emailElement = document.querySelector('[data-testid="EV_contactperson-email"]');
    if (!emailElement) {
        console.log("邮箱元素未找到");
        return;
    }
    const email = emailElement.textContent.trim();
    console.log(email);
    chrome.runtime.sendMessage({email});
}

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