Chrome Extension v Angulari

Zhrnutie prednášky

Prednáška sa venuje tvorbe Chrome rozšírenia s využitím Angularu na programovanie jeho grafického rozhrania. Vysvetľuje architektúru Chrome extension – background script bežiaci na pozadí, content script integrovaný do každej navštívenej stránky a možnosti ich vzájomnej komunikácie cez chrome.runtime.sendMessage. Ukazuje praktický postup: vytvorenie Angular projektu, background.js a background.html, konfiguráciu manifest.json vrátane permissions a povolenia spúšťania Angularu, úpravu build procesu tak, aby sa manifest kopíroval do výstupného adresára, a načítanie rozbaleného rozšírenia do Chromu v developer móde. Následne demonštruje komunikáciu medzi Angular aplikáciou a konkrétnym content scriptom pomocou ID tabky, na príklade zobrazenia aktuálnej URL adresy stránky pomocou Angular service a RxJS observable.

• - Chrome extension pozostáva z background scriptu (beží stále na pozadí) a content scriptu (vkladá sa do každej navštívenej stránky)
• - Komunikácia medzi content scriptom, background scriptom a oknami rozšírenia prebieha cez chrome.runtime.sendMessage
• - Manipulácia s DOM stránky je možná len z content scriptu, komunikácia s prehliadačom len z background scriptu alebo otvorených okien
• - Manifest.json definuje konfiguráciu rozšírenia (permissions, background stránka, browser action) a musí byť súčasťou buildu
• - Angular projekt sa buildí cez ng build a výsledný dist adresár sa načíta ako rozbalené rozšírenie v Chrome developer móde
• - Cielené odosielanie správy konkrétnej tabke vyžaduje poznať jej ID, čo umožňuje interagovať len s aktívnou stránkou
• - V Angulari sa na komunikáciu s content/background scriptom vytvára service, ktorý vracia dáta cez RxJS observable

Zhrnutie pripravené s pomocou AI z prepisu videa.