Show TickTick countdowns above your todo list

I’ve been using TickTick as my todo list and it’s been working nicely. Recently, they added the countdown feature, which is great but it’s also off in its own tab so hidden away. I personally find the presence of the numbers to be a great motivator so I wanted to place them above my todo list so it could help me focus and prioritise what needed to be worked on before the milestone dates come to pass.

To achieve this, I’m running a TamperMonkey script which allows me to run additional Javascript on the page. It inserts an iFrame with a second instance of TickTick above the task list. It’s a janky solution but I didn’t feel the need to refine it any further, especially as I hope that TickTick will continue to add enhancements to the countdowns themselves so that the script is not necessary.

I have submitted feature requests to TickTick to have countdowns above the task list officially incorporated and suggest that you also contact them if you think this is a useful feature!

Instructions

Install TamperMonkey:
https://www.tampermonkey.net/

Add a new script to TamperMonkey:

From the TamperMonkey extension menu choose “Create a new script…”

Paste the below code into the editor

// ==UserScript==
// @name         TickTick Countdown View
// @namespace    http://tampermonkey.net/
// @version      2025-05-12
// @description  Display countdowns above the task list
// @author       You
// @match        https://ticktick.com/webapp
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ticktick.com
// @grant        window.onurlchange
// @noframes
// @run-at       document-idle
// ==/UserScript==

// Add an iframe to the page to open the TickTick countdown page
const countdownFrame = document.createElement("iframe");
countdownFrame.id = "countdown-frame";
// Appearance settings
countdownFrame.style.zoom = "0.5";
countdownFrame.style.height = "280px";

(function () {
  "use strict";

  addCountdownFrame();

  // Listen for navigation and add the countdown frame when navigation occurs.
  if (window.onurlchange === null) {
    window.addEventListener("urlchange", (info) => {
      addCountdownFrame();
    });
  }
})();

function addCountdownFrame() {
  if (countdownFrame?.src !== 'https://ticktick.com/webapp#countdown') {
    countdownFrame.src = "https://ticktick.com/webapp#countdown";
  }
  // Only add the countdown frame to the tasks page, above the task list view
  if (window.location.hash.endsWith("/tasks")) {
    // wait for the task-list-view to be available
    const interval = setInterval(() => {
      const taskListView = document.querySelector("#task-list-view");
      if (taskListView) {
        clearInterval(interval);
        const firstChild = taskListView.firstChild;

        // add countdownFrame as first child of task-list-view
        if (firstChild?.tagName !== "IFRAME") {
          // add countdownFrame as first child of task-list-view
          taskListView.insertBefore(countdownFrame, firstChild);
        }
      }
    }, 1000);
  }
}

Limitations

Sometimes the countdowns don’t load when you first visit the page, clicking between lists should cause it to show.