Y6z さんのトリックツリーで、トリックが成功したかどうかを保存する UserScript

y6z_user_script.js

// ==UserScript==
// @name         Save whether I have succeeded the trick
// @version      0.1
// @description  Save whether I have succeeded the trick
// @match        https://tricklab.deca.jp/*
// @grant        none
// ==/UserScript==

(() => {
  'use strict';

  document.querySelectorAll('.node').forEach(node => {
    const trickName = node.innerText;

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    // 動画の id (e.g. https://www.youtube.com/embed/EljqabGqqbM の EljqabGqqbM の部分) を checkbox の id とする。
    // また、この id をキーにして localStorage にチェックボックスの値を保存する。
    const id = new URL(node.dataset.video).pathname.split('/').pop();
    checkbox.id = id;
    // localStorage には true/false が文字列で保存される。
    const checked = localStorage.getItem(id) == 'true' || false;
    checkbox.checked = checked;
    checkbox.onclick = (e) => {
      localStorage.setItem(e.currentTarget.id, e.currentTarget.checked);
      // チェックボックスのクリック時は動画を開かないようにする。
      e.stopPropagation();
    };

    const label = document.createElement('label');
    label.htmlFor = id;
    label.innerText = trickName;
    label.onclick = () => {
      // ラベルのクリック時はチェックボックスの ON/OFF ではなく、通常通り動画を開く。
      return false;
    };

    node.innerText = null;
    node.append(checkbox, label);
  });

  const style = document.createElement('style');

  style.textContent = `
    .node {
      flex-direction: row; /* チェックボックスとラベルを横並びにする。 */
    }
    .node input[type=checkbox] {
      transform: scale(1.5); /* チェックボックスのサイズを大きくする。 */
      margin-right: 10px;
    }
    .node:has(input[type="checkbox"]:checked) {
      filter: grayscale(60%) brightness(80%); /* チェックされたノードの背景色を暗くする。 */
    }
  `;

  document.head.appendChild(style);
})();

📝 Y6z

• https://tricklab.deca.jp/tricktree.html

ユーザスクリプトは Chrome の Tampermonkey などの拡張機能で動かすことが可能です。