Prymitywna wtyczka do Firefoxa napisana przez GitHub Copilot AI

Spis treści

Całkiem sporo korzystam z YouTube. Najczęściej ze strony z filmami od twórców, których subskrubuje. Jak coś obejrzę to często nie wracam już do takiego filmu i lubię mieć porządek.

YouTube daje nam taką opcję poprzez funkcję “ukryj”. Niestety przy każdym filmie jest ona ukryta pod menu kontekstowym a więc jak chce się zrobić porządek z większą ilością filmów to zajmuje to kilka minut dłużej.

Nie jest to nie wiadomo ile czasu więc temat zawsze olewałem.

Github Copilot (2 min)
#

Chciałem sprawdzić czy w ciągu 30 minut jestem uda mi się zautomatyzować taką małą rzecz przy użyciu AI i zaoszczędzić te kilka minut klikania 😁

Chciałbym stworzyć wtyczkę do przeglądarki Firefox. Działałaby tylko na stronie youtube.com/feed/subscriptions. Jej zadaniem byłoby wyświetlenie bezpośrednio przy filmiku przycisku, który aktualnie jest dostępny po kliknięciu trzech kropek o nazwie “Ukryj” miałby dokładnie wykonywać tą sama akcję.

Od trenerów AI na pewno nie dostałbym nagrody za prompt engineering 😛

Odpowiedź AI + utworzenie projektu (5 min)
#

Copilot bardzo dobrze zrozumiał założenia. Otrzymałem w odpowiedzi strukturę plików, poprawny plik manifest.json a także skrypt JS.

my-extension/
├── manifest.json
└── content.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{
  "manifest_version": 2,
  "name": "YouTube Hide Button",
  "version": "1.0",
  "description": "Adds a hide button directly to YouTube subscription feed videos.",
  "permissions": [
    "activeTab",
    "https://www.youtube.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/feed/subscriptions"],
      "js": ["content.js"]
    }
  ]
}

Skrypt JS wyglądał całkiem dobrze łącznie z selektorami i przyciskiem, którego tak bardzo chciałem.

Kod wrzuciłem lokalnie do swojego Firefoxa, aby zweryfikować czy będzie to działało…

W zasadzie działało, ale przyciski były w dziwnym miejscu a sama akcja nie ukrywała filmu na liście tylko dodawała go do kolekcji.

Poprawki (9 min)
#

Na szczęście nie było tak dobrze i umiejętności kodowania były potrzebne 🫡

Na poprawki zeszło trochę więcej czasu z czego w większości walczyłem ze swoją przeglądarką, ale poprawki opierały się w zasadzie na zmianie selektorów, ustawieniu przycisków w normalnym miejscu i szybkim uporządkowaniem kodu.

Firefox Add-ons (3 min)
#

Na koniec chciałem opublikować wtyczkę, ale tutaj niestety wymagana recaptcha nie chciała ze mną współpracować mimo, że jestem człowiekiem… może domyślała się, że to AI napisało wtyczkę? 🤔