I made myself a bookmarklet for the NYT Connections game. It allows you to set the colors of the squares as you are working out the solution. Kind of feels like cheating – part of the game is keeping it all in your head, so I probably won’t use it – but with AI, it took me all of 5 minutes to make!
To install it drag this link to your bookmark bar – then just click it when you have the puzzle open.
And the code:
javascript: (function () {
const colors = {
Yellow: "#f9df6d",
Green: "#a0c35a",
Blue: "#b0c4ef",
Purple: "#ba81c5",
Clear: null,
};
function showMenu(e, square) {
e.preventDefault();
e.stopPropagation();
const menu = document.createElement("div");
menu.style.cssText = `position:fixed;top:${e.clientY}px;left:${e.clientX}px;background:white;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.2);z-index:10000;min-width:120px`;
const items = ["Yellow", "Green", "Blue", "Purple", "Clear"];
items.forEach((color) => {
const item = document.createElement("div");
item.textContent = color;
item.style.cssText = `padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee`;
item.onmouseover = () => (item.style.backgroundColor = "#f0f0f0");
item.onmouseout = () => (item.style.backgroundColor = "white");
item.onclick = (e) => {
e.stopPropagation();
square.style.backgroundColor = colors[color] || "";
menu.remove();
};
menu.appendChild(item);
});
menu.lastChild.style.borderBottom = "none";
document.body.appendChild(menu);
setTimeout(() => {
const closeMenu = () => {
menu.remove();
document.removeEventListener("click", closeMenu);
};
document.addEventListener("click", closeMenu);
}, 0);
}
const squares = document.querySelectorAll('[data-testid="card-label"]');
let count = 0;
squares.forEach((square) => {
square.addEventListener("contextmenu", (e) => showMenu(e, square));
square.style.cursor = "context-menu";
count++;
});
if (count === 0) {
alert("Could not find game squares.");
}
})();