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;
}
}
});
});