de Erika Tan

Cum se creează o extensie Chrome

Cum se creeaza o extensie Chrome

În acest articol, vă voi învăța cum să faceți acest lucru creați-vă propria extensie Chrome. Îl bazez pe lecțiile învățate în timp ce creez Vorbește-mi, o extensie Chrome care ajută persoanele cu deficiențe de vedere prin citirea conținutului site-ului web și navigarea către alte pagini web.

Voi acoperi elementele de bază ale configurării extensiei dvs., inclusiv:

  • Configurarea fișierelor pentru configurare
  • Pregătirea pentru a fi introdusă în magazinul Chrome

Nu voi acoperi cum să gestionez funcțiile audio, cum ar fi gestionarea permisiunilor microfonului. Acest lucru a fost acoperit Acest articol de către prietenul meu Palash și folosește și Vorbește-mi extensie ca exemplu.

Configurarea fișierelor pentru configurare

Mai întâi, mergi la chrome: // extensii în browserul dvs. sau pur și simplu faceți clic pe „Mai multe instrumente” și „Extensii” din meniul Chrome. Acest lucru ar trebui să vă conducă la pagina Extension Management, unde puteți activați modul dezvoltator (ar trebui să fie în colțul din dreapta sus).

Apoi, va trebui să faceți un manifest.json fișier într-un director nou pentru extensia dvs. Acest fișier oferă informații importante pentru funcționarea extensiei dvs., cum ar fi permisiunile și fișierele script la care veți conecta proiectul. Așa ar trebui să arate conținutul manifestului dvs.:

{    "name": "Chrome Extension Example",    "version": "1.0",    "description": "Build an Extension!",    "manifest_version": 2}

Pentru a încărca directorul dvs. în pagina de gestionare a extensiei, faceți clic pe butonul „Încărcați neambalat” și selectați directorul. Aceasta va conecta fișierele dvs. la interfața de utilizare bazată pe web.

Un alt fișier important pe care va trebui să îl configurați este background.js, care este scriptul de fundal al proiectului dvs.

Un exemplu de script de fundal are acest tip de structură:

chrome.runtime.onInstalled.addListener(function() {    // add an action here});

Va rula întotdeauna în timp ce extensia dvs. este activată și este utilă pentru ascultarea diferitelor evenimente, cum ar fi apăsarea tastaturii sau pentru a naviga la diferite pagini.

Puteți avea chiar și mai multe scripturi de fundal. Trebuie doar să le înregistrați mai întâi în fișierul dvs. manifest. Pentru a face acest lucru, pur și simplu structurați manifest.js așa cum arată fișierul manifest al extensiei noastre:

{    "name": "Chrome Extension Example",    ...
    "background": {        "scripts": [            "js/es6-promise.auto.min.js",            "js/defaults.js",            "js/speech.js",            "js/document.js",            "js/events.js",            "js/stt.js",            "js/listen.js"        ],        "persistent": false    }}

Acum, veți avea nevoie de un fișier nu numai pentru funcția extensiei dvs., ci și pentru interfața de utilizare. Pentru a face acest lucru, creați un fișier numit popup.html. Fereastra pop-up este o fereastră mică care apare după ce se face clic pe pictograma extensiei dvs. De exemplu, iată fereastra pop-up pentru extensia Firefox Cookie Manager.

Cum se creeaza o extensie Chrome

popup.html fișierul poate fi destul de simplu. Mai jos este un cod pentru a crea un popup cu un singur buton. Este la fel de ușor ca adăugarea etichetelor de buton de deschidere și închidere în corpul documentului și câteva reguli de stil.

<!DOCTYPE html>  <html>    <head>      <style>        button {          height: 30px;          width: 30px;          outline: none;        }      </style>    </head>;    <body>      <button></button>    </body>  </html>

Desigur, popup.html codul pentru extensia noastră are mult mai multe componente decât acesta. Simțiți-vă liber să adăugați mai multe butoane, foi de stil și orice altceva considerați potrivit pentru ideea dvs. de extensie.

Este timpul să configurați codul popup și pictograma. Cu toate acestea, pentru pictogramă va trebui să adăugați cod în două locuri, „default_icon” și „pictograme”. Proprietatea „default_icon” este utilizată pentru pictogramele barei de instrumente, iar „pictogramele” este utilizată pentru imaginile afișate pe pagina de gestionare a extensiei.

Intoarce-te la manifest.json și adăugați următoarele linii de cod, înlocuind căile de imagine pentru pictograma implicită cu propriile imagini. De asemenea, puteți pune aceleași imagini atât pentru „default_icon”, cât și pentru „pictograme”. Și tu nu nevoie pentru a pune imagini cu aceleași dimensiuni ca cele specificate mai jos. De exemplu, dacă aveți doar imagini de 16 x 16 și 48 x 48, nu ezitați să ștergeți celelalte două linii care specifică 32 și 128 de pixeli.

{   "name": "Chrome Extension Example",    ...
    "page_action": {        "default_popup": "popup.html",        "default_icon": {            "16": "images/img16.png",            "32": "images/img32.png",            "48": "images/img48.png",            "128": "images/img128.png"        }    },    "icons": {        "16": "images/img16.png",        "32": "images/img32.png",        "48": "images/img48.png",        "128": "images/img128.png"    }}

Deci, acestea sunt fișierele esențiale în construirea unei extensii Chrome:

  • un fișier manifest,
  • scripturi de fundal și
  • un fișier popup

Unele alte fișiere pe care ați putea dori să le configurați sunt:

  • options.html și
  • options.js

options.js va oferi utilizatorilor dvs. o varietate mai largă de opțiuni atunci când vine vorba de utilizarea extensiei dvs. Se va ocupa de aspectul paginii dvs. de opțiuni (este foarte similar cu popup.html), in timp ce options.js se va ocupa de funcționalitate.

Aceste fișiere sunt opționale, dar dacă decideți să le adăugați, nu uitați să le configurați options.html în manifest și conectați-vă options.js fișier adăugând <script src=”options.js”><; / script> chiar înainte de eticheta HTML finală.

{    "name": "Chrome Extension Example",    ...    "options_page": "options.html"}

Pentru a vedea extensia în acțiune, salvați toate fișierele și faceți clic pe „Reîncărcați” în timp ce vă aflați pe pagina de gestionare a extensiei. Ar trebui să vă vedeți pictograma în bara de instrumente. Pentru a vizualiza pagina cu opțiuni, puteți face clic și pe „Detalii” sub extensie și să derulați în jos până unde apare „Opțiuni de extensie”.

Publicarea proiectului dvs. în magazinul web

Așa că v-ați dezvoltat și testat extensia. Acum trebuie să-l distribuiți!

Pentru a începe încărcarea proiectului, convertiți-l mai întâi într-un fișier .zip. Fișierul trebuie să conțină cel puțin fișierul manifest.json fişier. Apoi, asigurați-vă că aveți un cont de dezvoltator accesând pagina Tabloul de bord pentru dezvoltatori Chrome Webstore.

Faceți clic pe butonul „Adăugați un element nou” și ar trebui să vă permită să încărcați .zip depune acolo. Dacă nu doriți să înregistrați plăți pentru aplicația dvs., puteți sări peste pasul privind configurarea unui sistem de plăți. Cu toate acestea, va trebui să plătiți o taxă unică de 5 USD pentru dezvoltator atunci când vă puneți proiectul pe magazinul web.

De asemenea, nu uitați să includeți o descriere detaliată și imagini ale extensiei dvs., astfel încât utilizatorii potențiali să știe exact ce face proiectul dvs.!

Odată ce toate acestea sunt finalizate, veți primi un ID de aplicație și un simbol OAuth. ID-ul aplicației este utilizat pentru a face cereri către API-urile Google, în timp ce simbolul OAuth este utilizat pentru efectuarea plăților în magazinul web.

Felicitări, acum ți-ai publicat extensia! ?

Dacă ți-a plăcut această postare, verifică următorul articol. Vom aprofunda modul de configurare a funcțiilor audio din extensia dvs. Chrome, la fel cum am făcut pentru TalkToMe.