Chrome扩展无法为特定类修改样式问题排查

问题根源 #

Google Tasks采用动态加载方式渲染任务内容，你的内容脚本在页面初始DOM加载完成后就执行了，此时任务元素还未被注入到页面中，导致document.querySelectorAll('.KSMGS')找不到目标元素，高亮样式无法生效。

解决方案 #

使用MutationObserver监听DOM变化，一旦任务相关元素被添加到页面，立即执行高亮逻辑。同时封装高亮函数，避免重复处理已添加样式的元素。

修改后的代码 #

1. manifest.json（保持原配置即可）

{
  "manifest_version": 3,
  "name": "Highlighted Google Tasks",
  "version": "1.0",
  "description": "Highlight Google Tasks with dates for today, tomorrow, and up to a week ahead.",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["https://calendar.google.com/calendar/u/0/r/tasks"],
      "js": ["scripts/content.js"]
    }
  ]
}

2. content.js（核心修改）

function isBeforeNextWeek(dateString) {
    const today = new Date();
    const nextWeek = new Date();
    nextWeek.setDate(today.getDate() + 7);

    // 修正日期解析：假设格式为MM/DD/YYYY，若你的地区是DD/MM格式，需调整day和month的顺序
    const [month, day, year] = dateString.split('/');
    const dateToCheck = new Date(year, month - 1, day);

    return dateToCheck < nextWeek;
}

function highlightTasks() {
    // 只处理未标记过的任务容器
    const ksmsgDivs = document.querySelectorAll('.KSMGS:not(.processed)');
    
    ksmsgDivs.forEach(ksmsg => {
        // 标记已处理的容器，避免重复执行
        ksmsg.classList.add('processed');
        
        const mnEwWdDivs = ksmsg.querySelectorAll('.MnEwWd');
        let header = "";
        
        mnEwWdDivs.forEach(div => {
            const dataType = div.getAttribute('data-type');
            
            if (dataType === '1') {
                header = div.innerText.toUpperCase();
            } else if (dataType === '0') {
                const taskElement = div.querySelector(':first-child');
                // 跳过已高亮的任务
                if (taskElement.classList.contains('task-highlighted')) return;
                
                let taskColor = "";
                if (header.includes('PREVIOUS')) {
                    taskColor = "#dcdcdc";
                } else if (header.includes('TODAY')) {
                    taskColor = "#FFCA1A";
                } else if (header.includes('TOMORROW')) {
                    taskColor = "#FFE880";
                } else {
                    const possibleDate = header.match(/\d{2}\/\d{2}\/\d{4}/);
                    if (possibleDate && isBeforeNextWeek(possibleDate[0])) {
                        taskColor = "#FFFFCC";
                    }
                }  
                
                if (taskColor) {
                    taskElement.style.backgroundColor = taskColor;
                    taskElement.classList.add('task-highlighted');
                }
            }
        });
    });
}

// 页面初始化时先执行一次
highlightTasks();

// 监听DOM变化，任务加载后自动触发高亮
const observer = new MutationObserver((mutations) => {
    // 防抖处理，避免频繁触发
    clearTimeout(window.highlightTimeout);
    window.highlightTimeout = setTimeout(highlightTasks, 100);
});

// 监听body下的所有子元素变化，可根据实际DOM结构缩小监听范围
observer.observe(document.body, {
    childList: true,
    subtree: true
});

关键修改点说明 #

• 封装高亮逻辑：将原本的一次性执行代码封装为highlightTasks()，方便重复调用。
• 标记已处理元素：给任务容器和任务元素添加专属类，避免重复添加样式，提升性能。
• 修正日期解析：原代码直接用new Date(dateString)可能因地区格式差异出错，改为手动拆分年月日构造日期对象。
• DOM变化监听：通过MutationObserver捕获动态加载的任务元素，配合防抖逻辑减少不必要的执行。

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