Primul pas - HTML-ul si incarcarea extensiei in Google Chrome

Extensii de Google Chrome | Stefanescu Mihai | 2020-10-11

In articolul precendent am discutat despre structura unei extensii si despre manifest-ul acesteia.

Dupa cum am spus si acolo, o extensie de chrome este formata din manifest, html, css si javascript. In acest articol o sa discutam despre partea de HTML si cum putem incarca extensia in browser.

Pentru inceput, eu mi-am definit proiectul si am urmatoarele fisiere in el:

Am pus 3 iconite cu logo-ul invata-programare si am definit manifest.json care are structura din primul articol si popup.html care momentan este gol.

In popup.html va trebui sa avem o pagina standard de html, iata cum arata la mine:

<!DOCTYPE html>
<html>
<head>
	<title>Invata-Programare</title>
</head>
<body>
	<h2>Invata-Programare</h2>
</body>
</html>

Acum, pentru a incarca aceasta extensie in google chrome navigam la URL-ul chrome://extensions unde trebuie sa activam Developers Mode din partea dreapta sus.

Acum ne-au aparut butoanele Load unpacked si Pack extension, daca facem click pe Load unpacked si selectam folder-ul extensiei.

Dupa cum vedeti am incarcat extensia, iar acum daca fac click pe iconita imi este afisat continutul fisierului popup.html



Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.
       

Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.

🗝ïļ Login 🌟 Register

🔖 Bookmarks ⊞
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord ⊞

Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.

⮆ïļ