Vanil JavaScript-də sadə bir Chrome uzantısı necə yaradılır
Bu gün sizə vanil JavaScript-də bir Chrome uzantısı necə yaradacağımı göstərəcəyəm - yəni React, Angular və ya Vue kimi əlavə çərçivələr olmadan sadə JavaScript.
Chrome uzantısını qurmaq çətin olmur. Bir proqramçı kimi ilk ilimdə iki uzantı buraxdım və hər ikisini yalnız HTML, CSS və sadə JavaScript istifadə edərək yaratdım. Bu yazıda, bunu necə edəcəyimi bir neçə dəqiqə ərzində izah edəcəyəm.
Sıfırdan sadə bir Chrome uzantı panelini necə yaratacağımı göstərəcəyəm. Bununla birlikdə, bir uzantı barədə öz fikriniz varsa və yalnız Chrome-da işləmələri üçün mövcud layihə sənədlərinizə nə əlavə ediləcəyini bilmək istəyirsinizsə, öz manifest.json dosyanızı və öz sənədlərinizi fərdiləşdirmə bölməsinə keçin. Rəmz.
Chrome uzantıları haqqında məlumat əldə edin
Chrome uzantısı mahiyyətcə Google Chrome brauzeri ilə təcrübənizi fərdiləşdirmək üçün istifadə edə biləcəyiniz bir qrup sənəddir. Bir neçə növ Chrome uzantısı var. Bəziləri müəyyən bir şərt yerinə yetirildikdə aktivləşdirilir, məsələn. B. Bir çıxış səhifəsində olduğunuzda. Bəziləri yalnız bir nişanı vurduğunuzda göstərilir. və bəziləri hər dəfə yeni bir nişan açanda görünür. Bu il buraxdığım iki genişləndirmə yeni nişanlar üçün genişləndirmələrdir. Birincisi, işlər siyahısını ehtiva edən və istifadəçini tərifləyən bir panel olan Compliment Dash, ikincisi Liturgical.li adlı bir keşiş vasitəsidir. Sadə bir veb saytın kodlaşdırılmasını bilirsinizsə, bu cür uzantını çox çətinlik çəkmədən kodlaya bilərsiniz.
tələblər
İşləri sadə saxlamaq istəyirik. Bu dərsdə yalnız HTML, CSS və bir neçə əsas JavaScript elementlərindən istifadə edəcəyik və aşağıda göstərilən manifest.json faylını fərdiləşdirəcəyik. Chrome uzantıları mürəkkəbliyə görə dəyişir. Beləliklə, bir Chrome uzantısı yaratmaq istədiyiniz qədər sadə və ya mürəkkəb ola bilər. Artıq burada əsasları öyrəndiniz və daha mürəkkəb bir şey yaratmaq üçün öz bacarıqlarınızdan istifadə edə bilərsiniz.
Fayllarınızı qurmaq
Bu dərslikdə istifadəçini adından salamlayan sadə bir tablosu yaradacağıq. Əlavəmizə "Sadə Salamlama Tablosu" deyək.
Əvvəlcə üç fayl yaratmalısınız: index.html, main.css və main.js. Bunu öz qovluğuna qoyun. Sonra, HTML sənədini əsas HTML sənəd quraşdırma ilə doldurun və CSS və JS sənədləri ilə birləşdirin:
Sadə qarşılama paneli================================= // ->Sadə qarşılama paneli </ title></pre><pre> <link rel = "stylesheet" type = "text / css" media = "screen" href = "main.css" /></pre><pre></ head></pre><pre><body></pre><pre> <! - Mein Code wird hier abgelegt -></pre><pre> <script src = "main.js"> </ script></pre><pre></ body></pre><pre></ html></pre><h3>Manifest.json dosyanızı fərdiləşdirin</h3><p>Bu sənədlər layihənizin Chrome uzantısı kimi istifadə edilməsi üçün kifayət deyil. Bunu etmək üçün uzantımızla əlaqəli bəzi əsas məlumatlarla uyğunlaşdırdığımız manifest.json sənədinə ehtiyacımız var. Bu faylı google geliştirici portalından yükləyə və ya aşağıdakı sətirləri kopyalayıb yeni bir fayla əlavə edə və manifest.json olaraq qovluğunuza saxlaya bilərsiniz:</p><pre>{"name": "Başlanğıc Nümunəsi", "version": "1.0", "description": "Extension Build!", "manifest_version": 2}</pre><p>İndi uzantımız haqqında bir az daha çox məlumat ilə nümunə sənədini yeniləyək. Bu kodun ilk üç dəyərini dəyişdirmək istəyirik: ad, versiya və təsvir. Adımızı və bir sətirli təsviri daxil edin. Bu, ilk versiyamız olduğundan bu dəyəri 1.0 səviyyəsində saxlayırıq. Manifest_version nömrəsi eyni qalmalıdır.</p><p>Sonra Chrome-a bu uzantı ilə nə edəcəyini izah etmək üçün bir neçə sətir əlavə edəcəyik.</p><pre>{"name": "Simple Greeting Dashboard", "version": "1.0", "description": "Bu Chrome uzantısı hər dəfə yeni bir nişan açıldıqda istifadəçini salamlayır.", "manifest_version": 2</pre><pre>"incognito": "split", "chrome_url_overrides": {"newtab": "index.html"}, "permissions": ["activeTab"],</pre><pre>"ikonlar": {"128": "icon.png"}}</pre><p>"Gizli": "bölün" dəyəri, Chrome-a gizli rejimdə olduqda bu uzantı ilə nə edəcəyini izah edir. Brauzer gizli olduğu təqdirdə "split" ilə uzantı ayrı bir müddətdə həyata keçirilə bilər. Daha çox seçim üçün Chrome geliştirici sənədlərinə baxın.</p><p>Yəqin ki, gördüyünüz kimi, chrome_url_overrides, Chrome'a yeni bir nişan açıldığında index.html açmasını söyləyir. "İcazələr" dəyəri istifadəçiyə bu uzantının yükləməyə çalışdıqları təqdirdə yeni nişanın üzərinə yazılacağını bildirən bir pop-up verir.</p><p>Nəhayət, Chrome-a nəyi favikon kimi göstərəcəyini söyləyirik: 128. 128 piksel ölçülü icon.png adlı bir fayl.</p><h3>Nişan yaradın</h3><p>Hələ ikon faylı olmadığından, növbəti Sadə Salamlama Daşı üçün bir işarə düzəldək. Aşağıda bunu etməkdən çəkinməyin. Özünüzü etmək istəyirsinizsə, Photoshop və ya Canva kimi pulsuz bir xidmətdən istifadə edərək asanlıqla edə bilərsiniz. Ölçülərin 128 x 128 piksel olduğundan və bunları HTML, CSS, JS və JSON sənədlərinizlə eyni qovluqda icon.png olaraq saxladığınızdan əmin olun.</p><img alt="Sadə Salamlama Dash 128x128 nişanı" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153068239.png" /><h3>Fayllarınızı yükləyin (öz səhifənizi kodlayırsınızsa)</h3><p>Yeni Chrome nişanı uzantısını yaratmaq üçün yuxarıda göstərilən məlumatlar həqiqətən bilmək lazımdır. Artıq manifest.json dosyanızı fərdiləşdirdiyiniz üçün HTML, CSS və JavaScript-də hər hansı bir yeni nişan dizayn edə və aşağıda göstərildiyi kimi yükləyə bilərsiniz. Bununla birlikdə, bu sadə idarəetmə lövhəsinin necə yaradıldığını görmək istəyirsinizsə, "Ayarlar Menyusunu Yaradın" a keçin.</p><p>Yeni nişanınızı dizayn etməyi bitirdikdən sonra, Chrome uzantınız Chrome'a yüklənməyə hazırdır. Özünüz yükləmək üçün brauzerinizdə chrome: // extensions / saytına gedin və sağ üst hissədə geliştirici rejimini aktivləşdirin.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153069171.png" /><p>Səhifəni yeniləyin və "Yüklənməmiş yüklə" düyməsinə vurun.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153070239.png" /><p>Sonra HTML, CSS, JS və manifest.json sənədlərinizi və icon.png dosyanızı saxlayacağınız qovluğu seçin və yükləyin. Uzatma hər dəfə yeni bir nişan açanda işləməlidir!</p><p>Uzatma ilə işinizi bitirdikdən və özünüz sınadıqdan sonra bir geliştirici hesabı yaradıb Chrome uzantı mağazasında əldə edə bilərsiniz. Genişləndirmənin necə yayımlanacağına dair bu təlimat kömək etməlidir.</p><p>Hal-hazırda özünüzə məxsus bir uzantı inşa etmirsinizsə və yalnız Chrome uzantıları ilə nəyin mümkün olduğunu görmək istəyirsinizsə, çox sadə bir salamlama panelini necə quracağınızı oxuyun.</p><h3>Ayarlar menyusu yaradın</h3><p>Uzatma üçün etmək istədiyim ilk şey istifadəçimin adını əlavə edə biləcəyi bir giriş yaratmaqdır. Bu girişin hər zaman görünməsini istəmədiyim üçün "Ayarlar" adlı div-ə qoydum, onu yalnız Ayarlar düyməsini basdıqda görünə bilərəm.</p><pre><button id = "settings-button">Parametrlər</button></ button></pre><pre><div class = "settings" id = "settings"></pre><pre> <form class = "name-form" id = "name-form" action = "#"></pre><pre> <input class = "name-input" type = "text" id = "name-input" placeholder = "Geben Sie hier Ihren Namen ein ..."></pre><pre><button type = "submit" class = "name-button">Əlavə et</button></ button></pre><pre> </ form></pre><pre></ div></pre><p>Bu anda parametrlərimiz belə görünür:</p><img alt="Çox gözəl!" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153071439.png" /><p>... buna görə sizə əsas CSS stilləri verəcəyəm. Düyməni daxil edib həm məsafəni, həm də konturu daxil edəcəyəm. Sonra parametrlər və forma arasında bir az boşluq qoydum.</p><pre>.ayarlar {</pre><pre>Ekran: Flex;</pre><pre>Flex istiqaməti: sıra;</pre><pre>Məzmunu düzəldin: orta;</pre><pre>}</pre><pre>Giriş {</pre><pre>Dolgu: 5px;</pre><pre>Şrift ölçüsü: 12px;</pre><pre>En: 150px;</pre><pre>Boy: 20 piksel;</pre><pre>} </pre><pre>Açar {</pre><pre>Boy: 30 piksel;</pre><pre>Genişlik: 70 piksel;</pre><pre>Arxa fon: yox; / * Bu, standart fonu silər * /</pre><pre>Rəng: # 313131;</pre><pre>Kənar: 1px davamlı # 313131;</pre><pre>Kənar radius: 50px; / * Bu, düyməmizə yuvarlaq kənarları verir * /</pre><pre>Şrift ölçüsü: 12px;</pre><pre>İmlec: göstərici;</pre><pre>}</pre><pre>forma {</pre><pre>Dolgu qabığı: 20px;</pre><pre>}</pre><p>İndi parametrlərimiz bir az daha yaxşı görünür:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153078213.png" /><p>Bununla birlikdə, istifadəçi Ayarları tıklamamışsa, onları gizli saxlayaq. Bunu etmək üçün ad parametrlərini ekranın kənarında yox edəcək olan ayarlara.</p><pre>çevirmək: translateX (-100%);</pre><pre>Keçid: 1s çevirmək;</pre><p>İndi istifadəçi Ayarlar düyməsini basdıqda JavaScript-də açaraq söndürdüyümüz settings-open adlı bir sinif yaradaq. Ayarlar-Açma Ayarlara əlavə edildikdə, ona heç bir dəyişiklik tətbiq olunmur. Yalnız normal vəziyyətdə görünür.</p><pre>.settings-open.settings {</pre><pre>çevirmək: yox;</pre><pre>}</pre><p>Sinifi JavaScript-də dəyişək. OpenSettings () adlı bir funksiya yaradacağam ki, sinif parametrlərinin açılmasını açar və ya söndürər. Bu məqsədlə əvvəlcə "ayarlar" identifikatorunu istifadə edərək elementi alıram və sonra "settings-open" sinifini əlavə etmək üçün classList.toggle istifadə edirəm.</p><pre>Funksiya openSettings () {</pre><pre>document.getElementById ("ayarlar"). classList.toggle ("settings-open");</pre><pre>}</pre><p>İndi Ayarlar düyməsini basdıqda funksiyanı işə salacaq bir hadisə dinləyicisi əlavə edəcəyəm.</p><pre>document.getElementById ("settings-button"). addEventListener ('kliklə', openSettings)</pre><p>Bu, Parametrlər düyməsini basdığınız zaman parametrlərinizi göstərəcək və ya gizlədəcəkdir.</p><h3>Şəxsi salamlama yaradın</h3><p>Sonra xoş gəlmisiniz mesajını yaradacağıq. HTML-də boş bir h2 yaradırıq və sonra JavaScript-də internalHTML ilə doldururuq. H2-yə bir id verəcəyəm, daha sonra əldə edə biləcəyəm və mərkəzə salamlama qabı deyilən bir divara qoydum.</p><pre><div class = "greeting-container"></pre><pre> <h2 class = "greeting" id = "greeting"> </ h2></pre><pre></ div></pre><p>İndi JavaScript-də sadə bir istifadəçi adı təbriki yaradacağam. Əvvəlcə adını ehtiva edən bir dəyişən düzəldəcəyəm, onu hələlik boş qoyub sonra əlavə edəcəm.</p><pre>var userName;</pre><p>İstifadəçi adı boş olmasa da, istifadəçi adını HTML-də salamlama şəklində qoysam başqa bir iclasda açsam Chrome eyni adı istifadə etməz. Chrome'un şəxsiyyətimi xatırladığından əmin olmaq üçün yerli yaddaş ilə işləməliyəm. Buna görə saveName () adlı bir funksiyanı yerinə yetirirəm.</p><pre>SaveName () funksiyası {</pre><pre>localStorage.setItem ('returnName', userName);</pre><pre>}</pre><p>LocalStorage.setItem () funksiyası iki arqument götürür: birincisi, məlumatı daha sonra əldə etmək üçün istifadə edə biləcəyim bir söz, ikincisi isə yadda saxlamalı olduğu məlumat. bu halda istifadəçi adı. Bu saxlanan məlumatları userName dəyişənini yeniləmək üçün istifadə edəcəyim localStorage.getItem vasitəsilə alacağam.</p><pre>var userName = localStorage.getItem ('acceptName');</pre><p>Bunu formada bir hadisə dinləyicisinə bağlamadan əvvəl, Chrome-a adımı hələ təqdim etmədimsə, mənə necə zəng edəcəyini söyləmək istəyirəm. Bunu bir if ifadəsi ilə edirəm.</p><pre>əgər (userName == sıfır) {</pre><pre>userName = "dost";</pre><pre>}</pre><p>İndi də istifadəçi adı dəyişənimizi formumuza bağlayırıq. Bunu bir funksiyanın içərisində etmək istəyirəm ki, ad yeniləndikdə həmin funksiyanı çağıra bilərəm. ChangeName () funksiyasını çağıraq.</p><pre>Funksiya changeName () {</pre><pre>userName = document.getElementById ("ad-giriş"). dəyər;</pre><pre>saveName ();</pre><pre>}</pre><p>Bu funksiyaya hər dəfə kimsə formadan bir ad daxil etdikdə zəng etmək istəyirəm. Bunu changeName () funksiyasını çağırdığım bir hadisə dinləyicisi ilə edirəm və ayrıca bir forma təqdim edildikdə səhifənin standart olaraq yenilənməsinin qarşısını alıram.</p><pre>document.getElementById ("ad forması"). addEventListener ('təqdim', funksiya (e) {</pre><pre>e.preventDefault ()</pre><pre>Adı dəyişdirin ();</pre><pre>});</pre><p>Nəhayət, salamlarımızı yaradaq. Bunu da bir funksiyaya qoyacağam ki, səhifə yeniləndikdə və changeName () baş verəndə zəng edə biləcəm. Budur funksiya:</p><pre>GetGreeting () funksiyası {</pre><pre>document.getElementById ("təbrik"). innerHTML = `Salam, $ {userName}. Günün xoş keçsin! ';</pre><pre>}</pre><pre> getGreeting ()</pre><p>İndi changeName () funksiyamda getGreeting () çağırıram və bir gün çağırıram!</p><h3>Nəhayət, səhifənizi dizayn edin</h3><p>İndi son nöqtələri qoymağın vaxtıdır. Başlığı Flexbox ilə mərkəzləşdirəcəyəm, böyüdəcək və CSS-də mətnin gövdəsinə bir gradient fon əlavə edəcəyəm. Düymə və h2 gradientə sıçrayacaq şəkildə onları ağ edərəm.</p><pre>.greeting-container {</pre><pre>Ekran: Flex;</pre><pre>Əsaslandırma məzmunu: orta;</pre><pre>Məzmunu düzəldin: orta;</pre><pre>}</pre><pre>. salamlaşma {</pre><pre>Yazı növü ailəsi: sans serif;</pre><pre>Şrift ölçüsü: 60 piksel;</pre><pre>Rəng: #fff;</pre><pre>}</pre><pre>Bədən {</pre><pre>Arxa fon rəngi: # c670ca;</pre><pre>Arxa fon şəkli: xətti gradyan (45 dərəcə, # c670ca 0%, # 25a5c8 52%, # 20e275 90%);</pre><pre>}</pre><pre>html {</pre><pre>Boy: 100%;</pre><pre>}</pre><p>Və bu qədər! Səhifəniz belə olacaq:</p><img alt="Öz Chrome uzantınız!" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569153079418.png" /><p>Çox deyil, ancaq öz Chrome panellərinizi yaratmaq və dizayn etmək üçün əla bir əsasdır. Zəhmət olmasa suallarınızı bizə bildirin və @saralaughed səhifəsində Twitter-də mənə müraciət edin.</p></div><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/question/how-to-replace-ignition-lock-cylinder-chevy-cavalier/" title="alovlanma kilidi silindrli chevy cavalierin necə dəyişdiriləcəyi">alovlanma kilidi silindrli chevy cavalierin necə dəyişdiriləcəyi</a><a href="/question/how-to-be-successful-in-pharmaceutical-sales/" title="dərman satışlarında necə uğurlu olmaq">dərman satışlarında necə uğurlu olmaq</a><a href="/question/how-to-go-from-beginner-to-intermediate-guitar/" title="başlanğıcdan orta gitaraya necə getmək olar">başlanğıcdan orta gitaraya necə getmək olar</a><a href="/question/how-to-remove-camera-from-mobile-and-use-it/" title="kameranı mobil cihazdan necə çıxarmaq və istifadə etmək">kameranı mobil cihazdan necə çıxarmaq və istifadə etmək</a><a href="/question/how-to-say-night-in-french/" title="gecəni fransızca necə demək olar">gecəni fransızca necə demək olar</a><a href="/question/how-to-get-rid-of-a-unibrow-on-a-child/" title="bir uşağa bir qarışıqdan necə qurtarmaq olar">bir uşağa bir qarışıqdan necə qurtarmaq olar</a><a href="/question/how-to-fix-missing-textures-in-minecraft/" title="minecraftda itkin dokuları necə düzəltmək olar">minecraftda itkin dokuları necə düzəltmək olar</a><a href="/question/how-to-disassemble-a-lorcin-380/" title="lorcin 380 necə sökülə bilər">lorcin 380 necə sökülə bilər</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/article/how-to-write-an-api-in-3-lines-of-code-with-django-rest-framework-63f757/" title="Django REST çərçivəsini istifadə edərək 3 sətirdə bir API necə yazılır">Django REST çərçivəsini istifadə edərək 3 sətirdə bir API necə yazılır</a><a href="/article/chapter-9-how-to-build-a-google-home-app-with-dialogflow-fulfillment-via-inline-editor-7ef253/" title="Fəsil 9: DialogFlow ilə Google Home Tətbiqi yaratmaq | Satır daxilində redaktor vasitəsilə yerinə yetirmə">Fəsil 9: DialogFlow ilə Google Home Tətbiqi yaratmaq | Satır daxilində redaktor vasitəsilə yerinə yetirmə</a><a href="/article/how-to-write-better-tests-for-drag-and-drop-operations-in-the-browser-afb556/" title="Brauzerdə sürüklə və burax əməliyyatları üçün daha yaxşı testlər necə yazılır">Brauzerdə sürüklə və burax əməliyyatları üçün daha yaxşı testlər necə yazılır</a><a href="/article/how-to-talk-the-talk-in-front-of-hundreds-717cf9/" title="Necə danışmaq olar (yüz illər əvvəl)">Necə danışmaq olar (yüz illər əvvəl)</a><a href="/article/how-to-get-better-sleep-not-just-more-sleep-fa6b21/" title="Beləliklə, daha çox yuxu deyil, daha yaxşı yuxu alırsınız">Beləliklə, daha çox yuxu deyil, daha yaxşı yuxu alırsınız</a><a href="/article/how-to-pick-a-skill-invocation-name-36dbc4/" title="Bir bacarıq zəng adı necə seçilir">Bir bacarıq zəng adı necə seçilir</a><a href="/article/how-to-deal-with-a-panic-attack-at-work-10a7fe/" title="İşdəki çaxnaşma hücumuyla necə davranmaq olar">İşdəki çaxnaşma hücumuyla necə davranmaq olar</a><a href="/article/the-problem-with-goals-and-how-to-improve-them-d33ca3/" title="Məqsədlərlə bağlı problem. Və bunu necə yaxşılaşdırmaq olar.">Məqsədlərlə bağlı problem. Və bunu necə yaxşılaşdırmaq olar.</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="is flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="in flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-a-simple-chrome-extension-in-vanilla-javascript-d7883d/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>