Creați o extensie simplu pentru crom

A fost o sarcină mică pentru a efectua făcând clic pe un anumit buton funcție pe pagină. La fel ca totul ar fi bine, dar comunicarea între extinderea și pagina în sine are loc destul de izolat, cu mecanisme de schimb foarte limitate. Deci, să-și îndeplinească script-ul pe extensia pagina ar trebui să inserați un script pe pagină. În același timp, să-l efectueze va trebui să folosească mesaje și evenimente.

Acum, un pic mai mult în jos pe pământ.
Creați un dosar cu extensia, de exemplu, myclickbtn
Acesta a crea fișier manifest.json, informații despre acest fișier este descris în mai multe surse. Conținut:

"Manifest_version": 2
„Nume“: „Faceți clic pe butonul meu“,
"Descriere": "My click Descriere buton",
"Versiune": "1.0",

"Browser_action": pictograma "icon.png", //: "default_icon"
„Default_popup“: „popup.html“ // cod widget se va afla acolo
>
"Permisiuni": [
// permisiuni
"ActiveTab", "depanator", "file", "pageCapture"
]
// implementa script-ul în codul paginii.
// inițializarea va asculta mesajele primite
// daca vom primi mesajul corect, vom rula funcția noastră
"Content_scripts": [ "se potrivește": [ "„] // meci URL Nu, puteți utiliza expresii regulate
// tag- Aceasta sugerează că vom încorpora cod pe toate paginile
"Js": [ "init.js"], // fișierul în sine (e) care este (e) se introduce în pagină
„Run_at“: „document_end“, // se introduce în capătul documentului
"All_frames": fals
>]
>

// adăugați un handler pentru a primi mesaje
chrome.runtime.onMessage.addListener (
funcție (cerere, expeditor, sendResponse) console.log (sender.tab?
"De la un script de conținut:" + sender.tab.url:
„Din extensia“);
în cazul în care (request.greeting == "hello")
// executa funcția
SayHello ();
// trimite răspunsul
sendResponse ();
>);

Adaugă la prieten Lista

// ne prinde procesarea apăsând butonul din widget
document.getElementById ( "hotnkclickaddfriends"). addEventListener ( "click",
Funcția () // Selectați fila activă
chrome.tabs.query (, funcția (file) // ascunde butonul și a afișa încărcătorul de imagine
. document.getElementById ( "hotnkclickaddfriends") style.display = 'none';
. Document.getElementById ( "spinner") style.display = 'bloc';
// trimite mesajul la pagina
chrome.tabs.sendMessage (file [0] .id ,, funcția (răspuns) console.log (response.farewell);
// după trimiterea mesajului și primirea unui răspuns
// afișa butonul și ascunde încărcătorul
. document.getElementById ( "hotnkclickaddfriends") style.display = 'bloc';
. Document.getElementById ( "spinner") style.display = 'none';
>);
>);
>, Fals);

Tot la fel, și chiar mai pot fi găsite în documentație.
Asta e tot. =)

• Web-dezvoltare

Că poți fi, de asemenea, distractiv!