Extension didn't change style of specific classes

I created a Chrome extension to highlight Google Tasks with dates in the past, today, tomorrow, and up to a week ahead.

I don’t know if this is the problem, but the extension’s code apparently runs before the tasks are loaded, which prevents the new style from being applied.

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"]
    }
  ]
}

content.js

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

    const dateToCheck = new Date(dateString);

    return dateToCheck < nextWeek;
}

const ksmsgDivs = document.querySelectorAll('.KSMGS');

ksmsgDivs.forEach(ksmsg => {
    const mnEwWdDivs = ksmsg.querySelectorAll('.MnEwWd');

    var header = "";
    mnEwWdDivs.forEach(div => {
        const dataType = div.getAttribute('data-type');
        
        if (dataType === '1') {
            const divText = div.innerText.toUpperCase();
            header = divText;
        }
        else if (dataType === '0') {
            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) {
                div.querySelector(':first-child').style.backgroundColor = taskColor;
            }
        
        }
    });
});

You need to sign in to view this answers

Related Post