Cum facem extensia de chrome interactiva?

Pana acum am vazut care este structura unei extensii de chrome, cum adaugam un mic text si cum putem sa o incarcam in browser. In acest articol vreau sa discutam despre cum putem face aceasta extensie putin mai interactiva.

Acest lucru putem sa il obtinem folosind javascript.

Primul lucru pe care trebuie sa il facem este un fisier nou, pe care eu am sa il numesc popup.js si sa il includem in popup.html chiar sub tag-ul title:

<script src="popup.js"></script>

Acum, pentru a ne usura viata putin am sa includ si jQuery in aceasta extensie de chrome, desi se poate scrie si javascript nativ.

Intram pe jquery.com si apasam butonul de Download, pe pagina de download apasam pe butonul  Download the compressed, production jQuery 3.3.1.

O data ce am descarcat libraria o copiem in folder-ul extensiei de chrome si o includem in fisierul popup.html

<script src="jquery-3.3.1.min.js"></script>

Pentru acest exemplu am sa fac un imput care preia numele utilizatorului si il afiseaza.

Primul lucru pe care am sa il fac este sa imi creez un input de tip text sub h2-ul din popup.html

<input type="text" id="name">

Acum hai sa scriem codul javascript in fisierul popup.js.

Aici pur si simplu preluam valoarea din input la keyup si o afisam in h2:

$(function(){
    $('#name').keyup(function(){
        $('#hello').text('Salutari '+$('#name').val());
    });
});

Am uitat sa mentionez, cand schimbam codul extensiei nu trebuie sa o incarcam din nou.