Salutări pentru tine Maultalkovtsy # 33;
Așa că am decis să "marchez" întoarcerea la acest forum și să scriu un "mic manual" bazat pe propria mea experiență, să creez extensii pentru browserele populare care să vă ajute în promovarea și popularizarea proiectelor dvs.
Unul dintre proiectele mele se trece prin vremuri grele și a decis că a trebuit să cumva „inveseli“, și să facă un cuplu de trei „servicii online“ de pe subdomeniile ( „servicii online“ - a spus cu voce tare, desigur, dar să le numim asa).
Primul (și până la ultimul) este un generator de parole simplu, dar util, genpass.hyperione.com.
Scrisul generatorului a fost comandat. Js, designul a fost desenat pe genunchi (bazat pe site-ul principal), aspectul a fost realizat și, așa cum se spune, în cale. Dar trebuie să aducem și mai multe beneficii oamenilor, am crezut, și am comandat o versiune "desktop" a generatorului și, după ce n-am găsit niciun executor normal, sa decis să fac o extensie pentru browserele principale pe cont propriu.
De fapt, vă voi spune în detaliu despre dezvoltarea acestei extensii și, pe această bază, vă puteți crea propria extensie pentru site-ul dvs. preferat.
Partea 1. Cum să alegi - pentru ce browser să creezi o extensie?
Există 4 browsere principale pentru PC-uri bazate pe Windows - Ghrome, Ya Browzer, Mozilla și Opera, aceste date fiind preluate din statisticile aceleași, LiveInternet
Bine, acum un pic despre browserele înșiși - dacă o să permiteți, va exista un mic copyist de la Wiki.
Dacă citiți cu atenție descrierea browserelor, atunci v-a devenit clar că vom scrie o extensie pentru browserele Chrome, Opera și J.Browser, deoarece acestea sunt dezvoltate pe un singur motor.
Dar există o mică nuanță - din cele de mai sus, numai browser-ul Opera ne va ajuta să creăm o extensie cu adevărat "corectă", deoarece dispune de instrumentele pentru testarea extensiilor la etapa de dezvoltare și moderatori, există oameni foarte buni, dar mai mult pe aceasta.
Dacă nu ați instalat încă Opera, continuați și instalați-o și voi continua munca.
Partea 2. Bazele extensiilor sau ce sunt acestea?
Câmpul "versiune" este numărul versiunii curente a extensiei dvs., este publicat atât în magazinul de extensii, cât și în extensia de extensie.
Câmpul "manifest_version" este versiunea manifestului (există 2, 1 și respectiv 2). Pentru a nu se îngropa în aceste informații (nu este atât de important pentru dvs.) - puteți citi diferența lor pe același Habr. Merită să înțelegem un lucru, versiunea reală a manifestului pentru noi este a doua.
Câmpul "default_locale" - acest câmp este necesar pentru a putea specifica în extensiile magazinului - pentru care țări această extensie este creată (din nou - acest lucru ne concentrăm puțin mai târziu).
Câmpul "icoane" este un set de pictograme pentru extensia dvs., care vor fi afișate în managerul de extensii. Vă puteți limita la o pictogramă cu dimensiunea maximă, dar să mergem la principiu și să desenați icoane de toate dimensiunile
Câmpul "browser_action" este setările principale ale extensiei noastre, care indică modul în care extensia va interacționa cu browserul:
"default_title" este o sugestie care apare atunci când plasați cursorul peste pictograma extensiei.
"default_popup" - spune browser-ului că este necesar să deschidem pagina noastră .html cu extensia când faceți clic pe pictograma extensie.
Câmpul "permisiuni" este lista de permisiuni necesare pentru funcționarea extensiei noastre - acest câmp este obligatoriu dacă extensia dvs. va interacționa cumva cu PC-ul utilizatorului sau cu browser-ul acestuia, pe lângă afișarea informațiilor simple despre site-ul dvs.
Aceasta este pagina obișnuită .html, care este baza extensiei noastre și este afișată de utilizator în browser - așa arată cum se arată în extensia mea.
Pe această pagină și fișierele legate de ea (stil.css și genPass.js), nu ne vom opri în detaliu, deoarece nu există nimic special acolo.
Da, da, acest nume ar trebui să fie în acest dosar "_locales" - conține fișiere de localizare și în rusă - fișiere care traduc extensia noastră în alte limbi.
Dosarul ru cu fișierul messages.json din dosarul _locales
Ei bine, dacă în directorul "ru" totul ar trebui să fie clar (există un singur fișier), apoi pe fișierul messages.json voi fi puțin întârziat.
"extensionName" # 58; "mesaj" # 58; "GenPass - Generator de parole inteligente"
>
"extensionDescription" # 58; "mesaj" # 58; "GenPass este un generator de parole care vă permite să creați o parolă complexă, care este ușor de memorat în același timp".
>
>
Acest fișier este necesar pentru afișarea corectă a "Nume" și "Descrierea" extensiei dvs. în managerul de extensii din browser (de exemplu, în magazinul Chrome), în conformitate cu setările de limbă ale browserului.
Pe măsură ce scrieți în fișierul messages.json "nume" și "descriere" - astfel încât acesta va fi afișat, acest dosar și fișier sunt mai necesare atunci când se adaugă la magazinul Opera - fără el, pur și simplu nu veți putea umple descrierea în limba rusă; propuneți să completați limba engleză și dacă completați limba engleză în loc de engleză ... Despre asta, cumva mai târziu
Pe asta ca totul - un pic cam haotic ca sa dovedit? Bine, să facem mai multă claritate.
Pregătiți toate fișierele pentru extensia dvs. și treceți la următorul element.
Partea 3. Testarea extensiei și a "ambalajului" acesteia.
Amintiți-vă, undeva printre bug-urile de mai sus, am spus că vom folosi browserul Opera pentru a crea și testa extensia dvs., deci - deschisă
Accesați meniul browserului din "Extensii" - "Gestionați extensiile". vă aflați în managerul add-on-urilor.
A funcționat? Cool # 33;
Acum avem 2 moduri:
- Dacă folosim în extensia .js - este necesar de a testa pentru erori (aka rău moderator unchiul Oper'y - nu-l pierdeți în directorul) - pentru a face acest lucru, faceți clic pe caseta de selectare „Collect erori“ și pur și simplu testați toate funcțiile expansiunii sale - în cazul în care nu ieși din greșeli - Cool # 33; Continuăm și mai departe.
- Dacă nu folosim extensia .js în extensia noastră, putem trece cu ușurință la pasul următor - ambalajul extensiei noastre.
Pentru a obține extensia dvs. în formularul gata de descărcare, faceți clic pe butonul "Extensie pachet" și indicați spre dosarul cu extensia dvs. - pe ieșire veți obține același fișier .nex, pe care va trebui să îl descărcați la magazinul Opera.
De fapt, asta-i tot - extensia ta este gata # 33;
Și apoi spui - SHAME # 33; CHARLOTAN # 33; Atât de mult împreună și ce alte broșuri și multilingvă # 33; # 33; # 33;
Partea 4. Localizarea extensiei sau modul în care să crească în mod legal numărul de instalații.
Dorit vreodată să facă un pic cu rezerve - dacă faci o extensie simplă, care va afișa, unele informații despre site-ul dvs. sau de pe site-ul dvs. - sări peste acest pas - multilingvistic pentru extensia nu va aduce dividend special - legătura sa cu magazinele pe care asa ca.
Ei bine, dacă faceți o extensie care aduce pace și bunătate utilizatorilor - WELCOM # 33;
Deci, amintiți-vă, am creat dosarul "_locales" care conține dosarul "ru" și fișierul messages.json în el?
Este timpul să o umpleți cu șirul # 33; Ei bine, asta este completați-l cu limbile la care vom traduce extinderea.
Mai mult, toate sunt simple - au ales limba pentru transfer, au creat tatal corespunzator si un fisier messages.json in el.
De exemplu, am ales franceza - asta înseamnă că în folderul "_locales" creăm dosarul "fr" și are un nou fișier messages.json.
Acum totul va fi dificil
Trebuie să traducă extensia noastră în alte limbi, în cazul în care traducerea însăși nu ar trebui să provoace probleme (ordine, întrebați-vă prietenii sau dvs. însuți POLYGLOT), apoi cu partea tehnică - pot apărea probleme ...
Dar nu cu mine # 33;
Am petrecut destul timp pe căutarea unei soluții și a constatat că github.com - există un script js simplu care înlocuiește elementele statice ale paginilor .html (pentru a fi mai precis - text) pe elementele de siguranță ale fișierelor messages.json.
Cumva nu am înțeles, nu-i așa? Luați în considerare exemplul ...
window.addEventListener # 40; 'load', funcția # 40; # 41; funcția translator # 40; html # 41; var i,
lungime,
attrs_to_check = # 91; "title", "alt", "substituent", "valoare", "href" # 93 ;;
dacă # 40; html.attributes # 41; funcția attrs_to_check.forFiecare # 40; # 40; dacă # 40; html.attributes # 91; el # 93; # 41; html.attributes # 91; el # 93; .value = înlocuitor # 40; html.attributes # 91; el # 93; .value # 41 ;;
>
> # 41 ;;
>
dacă # 40; html.nodeType === 3 # 41; html.data = înlocuitor # 40; html.data # 41 ;;
> altfel pentru # 40; i = 0, lungime = html.childNodes.length; eu
>
>
și conectați acest script pe pagina index.html.
Acum, selectați textul care se va schimba pe pagina dvs. index.html în funcție de setările de limbă ale browserului, de exemplu:
Suplimentul meu este foarte cool și aduce beneficii oamenilor.
Aici vom schimba cuvântul "clasic".
Înlocuiți-l după cum urmează ->. unde klass este id-ul său condiționat.
Deschideți acum fișierul messages.json și adăugați următoarea intrare:
"klass" # 58; "mesaj" # 58; "Iată traducerea cuvântului tău"
>
Ca rezultat, fișierul dvs. messages.json ar trebui să arate astfel:
"extensionName" # 58; "mesaj" # 58; "Numele add-on-ului tău"
>
"extensionDescription" # 58; "mesaj" # 58; "Descrierea add-on-ului tău."
>
"klass" # 58; "mesaj" # 58; "Iată traducerea cuvântului tău"
>
>
Prin acest principiu, puteți traduce toate elementele de text necesare ale extensiei dvs.
Oh da ... aproape că am uitat ...
Amintiți-vă la început, când am discutat dosarul manifest.json în câmpul meu „numele“ și valorile „descriere“ au fost „__MSG_extensionName__“ și „__MSG_extensionDescription__“, respectiv?
Deci - modificați fișierul manifest în același mod - acestea sunt id-ul standard pentru aceste câmpuri, care sunt necesare pentru traducerea câmpurilor corespunzătoare.
Ca totul. Cu multilanguage ne-am dat seama ...
Partea 5. Pe scurt despre alte browsere.
Ei bine, teoretic, aveți pe desktop o extensie gata pentru browser-ul Opera, poate că l-ați descărcat deja în director și ați primit mylinii de instalare ... Dar cum ar fi alte browsere, în special Chrome și J.Brauser?
Ei bine, cu Chrome totul este simplu, mergeți direct la magazinul de extensii și descărcați acolo arhiva .zip cu fișierele extensiei dvs., având plătit înainte de aceasta 5 # 036; la trezorerie ....
Desigur, atunci când se adaugă extensii la magazine, există propriile lor nuanțe și subtilități, dar despre asta mai târziu ...