Мікроавтоматизація без SaaS: створюємо bookmarklet для YouTube, який додає десятки відео в чергу однією кнопкою

Коли треба переглянути 20–50 відео по темі, ручне додавання кожного ролика в YouTube queue починає дратувати набагато сильніше, ніж здається на старті. Начебто це всього кілька кліків: навівся, відкрив меню, натиснув потрібний пункт. Але на серії роликів ця дрібна рутина вже коштує часу, уваги й фокусу. Особливо якщо ви не “дивитесь YouTube”, а працюєте: аналізуєте конкурентів, збираєте креативи, готуєте добірку для команди або формуєте собі навчальну чергу на вечір.

Тут і з’являється хороша ідея мікроавтоматизації: не будувати окремий сервіс, не писати розширення, не тягнути SaaS-ланцюжок, а просто прибрати зайві кліки там, де вони реально повторюються.

Що таке bookmarklet і чому це взагалі працює

Bookmarklet — це звичайна закладка браузера, в якій замість URL збережено JavaScript-код. Коли ви натискаєте таку закладку, браузер виконує код на поточній сторінці. На відміну від Chrome extension, тут немає окремого пакета, маніфеста, дозволів і публікації в магазині розширень: це легка клієнтська дія прямо у вашому браузері.

У контексті YouTube це зручно саме тому, що функція черги вже є в desktop-інтерфейсі: відео можна додати через hover-оверлей або через меню “More”. Але сама платформа не дає нормального “масового режиму”, а черга не зберігається як постійний список після закриття браузера. Тобто інструмент є, а от швидкого сценарію для серійного додавання — ні.

Чому це не “злом”, а нормальна браузерна автоматизація

Тут важливо одразу провести межу. Такий скрипт не обходить авторизацію, не б’є в приватне API, не робить серверний скрапінг і не ламає логіку платформи. Він просто повторює клієнтські дії, які ви і так можете зробити руками у відкритому інтерфейсі браузера.

Тобто bookmarklet у цьому випадку — це маленький “мікросервіс без сервера”. Одна кнопка. Один запуск. Одна прикладна задача. Саме тому я й люблю такі сценарії: вони показують, що автоматизація — це не завжди великий контур. Іноді це просто уважність до повторюваної дії, яку можна акуратно прибрати.

Де це реально корисно в роботі

Такий сценарій добре лягає на кілька дуже приземлених бізнес-задач:

• маркетолог швидко збирає в чергу ролики конкурентів перед аналізом креативів;
• SEO-фахівець формує пакет відео для ресерчу ніші;
• team lead готує добірку демо або навчальних роликів для внутрішнього перегляду;
• контент-команда складає пул джерел для майбутньої статті, сценарію чи AI-конспектування.

Особливо це корисно там, де відео — не кінцева точка, а вхідний матеріал для наступної обробки. Якщо далі у вас уже є складніший пайплайн на кшталт AI Lead Gen на Puppeteer + OpenAI API, то така дрібна підготовка джерел стає ще ціннішою: ви економите час ще до того, як починається серйозний аналіз.

Як працює логіка скрипта

Суть проста:

• скрипт знаходить видимі карточки відео на сторінці;
• прокручує їх у viewport;
• спочатку шукає пряму кнопку Add to queue на overlay;
• якщо її немає або вона неактивна — переходить до fallback-сценарію через меню;
• проходить по карточках послідовно і між діями дає короткі затримки.

Тут немає сенсу жорстко вчіплюватися в один CSS-селектор і робити вигляд, що “тепер усе стабільно”. У YouTube DOM-структура й атрибути можуть змінюватися, а тексти кнопок залежать від локалізації. Тому більш життєвий підхід — шукати кілька типів карточок, перевіряти aria-label і innerText, а також мати fallback через меню, якщо hover-кнопка не відпрацювала.

Затримки тут теж не декоративні. scrollIntoView() потрібен, щоб довести картку до видимої області, а setTimeout() або обгортка з Promise дає інтерфейсу час домалювати кнопки, меню та стани між кліками. Без цього такі мікросценарії часто працюють “через раз”.

Чому bookmarklet краще спочатку тестувати в DevTools

Це одна з найпрактичніших порад. Спочатку перевіряйте логіку в DevTools console, а вже потім перетворюйте її на bookmarklet.

Причина проста: у консолі легше дебажити селектори, дивитися, які елементи реально знаходяться, і швидко міняти умови пошуку. Якщо ж ви одразу зліпите все в javascript:-рядок, то будь-яка крива лапка, зайвий перенос або невдалий спецсимвол зроблять вам не “інструмент”, а важкочитаний клубок. Саме тому URL-encoding у bookmarklet часто ламає код не через магію, а через банальні символи, які браузер інтерпретує не так, як ви очікували.

Версія для запуску в DevTools console

Починайте з такого варіанта:

(async () => {
  const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
  const cards = [...document.querySelectorAll("ytd-rich-item-renderer, ytd-video-renderer")];

  const isQueueText = (value) =>
    /add to queue|додати в чергу|добавить в очередь/i.test(value || "");

  for (const card of cards) {
    card.scrollIntoView({ block: "center" });
    await wait(250);

    const directQueueButton = [...card.querySelectorAll("button")]
      .find((btn) =>
        isQueueText(
          btn.getAttribute("aria-label") ||
          btn.innerText ||
          btn.textContent
        )
      );

    if (directQueueButton) {
      directQueueButton.click();
      await wait(250);
      continue;
    }

    const menuButton = card.querySelector("ytd-menu-renderer button, #menu button");
    if (menuButton) {
      menuButton.click();
      await wait(300);

      const menuItem = [...document.querySelectorAll("ytd-menu-service-item-renderer, tp-yt-paper-item")]
        .find((el) =>
          isQueueText(el.innerText || el.textContent)
        );

      if (menuItem) {
        menuItem.click();
        await wait(250);
      }

      document.body.click();
      await wait(150);
    }
  }

  console.log("Готово");
})();

Це не “вічний” скрипт і не офіційний API-метод. Це акуратна фронтенд-автоматизація поверх поточної сторінки. Саме тому код написаний м’яко: без агресивного темпу, без спроб одночасно натискати все підряд і без жорсткої прив’язки до одного сценарію.

Скорочена версія у форматі bookmarklet

Коли логіка вже перевірена в консолі, її можна згорнути в bookmarklet-формат:

javascript:(async()=>{const w=ms=>new Promise(r=>setTimeout(r,ms));const ok=t=>/add to queue|додати в чергу|добавить в очередь/i.test(t||"");const cards=[...document.querySelectorAll("ytd-rich-item-renderer,ytd-video-renderer")];for(const card of cards){card.scrollIntoView({block:"center"});await w(250);const direct=[...card.querySelectorAll("button")].find(btn=>ok(btn.getAttribute("aria-label")||btn.innerText||btn.textContent));if(direct){direct.click();await w(250);continue}const menu=card.querySelector("ytd-menu-renderer button,#menu button");if(menu){menu.click();await w(300);const item=[...document.querySelectorAll("ytd-menu-service-item-renderer,tp-yt-paper-item")].find(el=>ok(el.innerText||el.textContent));if(item){item.click();await w(250)}document.body.click();await w(150)}}console.log("Готово")})();

Якщо після вставки в закладку щось “мовчить”, поверніться на крок назад і ще раз перевірте DevTools-версію. У bookmarklet найчастіше ламається не сама ідея, а форматування рядка.

Як створити закладку і вставити код

Схема проста:

• створіть нову закладку в браузері;
• у поле URL вставте код bookmarklet;
• відкрийте сторінку YouTube зі списком роликів;
• натисніть закладку.

Це і є весь деплой. Саме тут bookmarklet виграє у розширення: поріг входу практично нульовий. Але як тільки вам потрібні налаштування, стабільне збереження стану, робота з кількома вкладками або серйозніший контроль над браузером, bookmarklet починає закінчуватись.

Коли bookmarklet достатньо, а коли вже час на інший інструмент

Bookmarklet достатньо, коли задача:

• одноразова або часто повторювана, але локальна;
• запускається вручну;
• працює в межах однієї сторінки;
• не вимагає складного стану, фонової роботи чи прав браузера.

Якщо ж вам уже треба стабільно взаємодіяти з багатьма сторінками, обробляти навігацію, збирати дані, працювати з авторизацією, чергами або складними бізнес-процесами, тоді логічно переходити на інший рівень. Для серверної та інтеграційної логіки це можуть бути мікросервіси на Node.js для Google Workspace. Для серйознішої браузерної автоматизації — Puppeteer-скрипти для парсингу даних та перевірки посилань.

І це, мабуть, головна думка всієї статті: не кожну задачу потрібно одразу розв’язувати через extension, SaaS або окремий backend. Іноді найкраща автоматизація — це маленька кнопка, яка прибирає 30 зайвих дій на день.

Обмеження, про які краще сказати прямо

Щоб не перебільшувати можливості такого підходу, важливо зафіксувати межі:

• працює тільки в desktop-версії браузера;
• працює лише з видимими на сторінці відео;
• чутливий до змін DOM-структури YouTube;
• залежить від локалізації інтерфейсу;
• YouTube queue — тимчасовий список, а не постійне сховище.

У фронтенд-автоматизації це нормальна реальність. Нестабільний DOM — не ознака “поганого коду”, а властивість живих веб-інтерфейсів. Тому такі сценарії треба писати спокійно: з fallback’ами, затримками і без агресивного тиску на інтерфейс.

Практичний підсумок

Автоматизація не починається з великого бюджету. Вона починається з моменту, коли ви помічаєте дію, яку робите десятки разів поспіль, і ставите собі просте питання: чи можна це прибрати без зайвого цирку?

Bookmarklet для YouTube — саме про це. Не магія. Не “система майбутнього”. Просто маленький інженерний лайфхак, який економить час тут і зараз. А якщо таких дрібних сценаріїв у команді накопичується багато, це вже хороший сигнал: можливо, настав час проектувати свої внутрішні інструменти або переходити до складніших контурів автоматизації.