Напишете просто разширение на хром

Това беше една малка задача да извършва, като кликнете върху определен бутон функция на страницата. Както всичко ще се оправи, но това общуване между разширението и страницата се извършва доста изолиран, с много ограничени механизми за обмен. Така че, за да изпълни сценария на продължението на страницата да вмъкнете скрипт на страницата. В същото време, за да го извършат, ще трябва да използвате съобщения и събития.

Сега малко по-надолу към земята.
Създайте папка с разширение, например myclickbtn
Той създаде файл manifest.json, информация за този файл е описан в много източници. Съдържание:

"Manifest_version": 2
"Име": "Моята щракнете върху бутона",
"Описание": "Моята Click Описание на бутон",
"Версия": "1.0",

"Browser_action": икона "icon.png", //: "default_icon"
"Default_popup": "popup.html" // джаджа самия код, ще лежи там
>
"Разрешения": [
// разрешения
"ActiveTab", "Debugger", "раздели", "pageCapture"
]
// изпълнява скрипта в кода на страницата.
// инициализира, че ще слушате входящи съобщения
// ако вземем правилното послание, ние ще се изпълнява нашата функция
"Content_scripts": [ "съвпадения": [ ""] // мач URL Не, можете да използвате регулярни изрази
// таг Това предполага, че ние ще се вгради код на всички страници
"Js": [ "init.js"], се // файл (а), който е (д) се добавя в страницата
"Run_at": "document_end", // вмъкнете в края на документа
"All_frames": фалшива
>]
>

// добавите манипулатор за получаване на съобщения
chrome.runtime.onMessage.addListener (
функция (молба, подател, sendResponse) console.log (sender.tab?
"От скрипт съдържание:" + sender.tab.url:
"От разширяването");
ако (request.greeting == "здравей")
// изпълнява функцията
SayHello ();
// Изпращане отговора
sendResponse ();
>);

Добави към списъка с приятели

// хванем обработка натискане на бутона в приспособлението
document.getElementById ( "hotnkclickaddfriends"). addEventListener ( "клик",
функция () // Изберете активното раздела
chrome.tabs.query (, функция (раздели) // скрие бутона и показване зареждане на изображението
. document.getElementById ( "hotnkclickaddfriends") style.display = "Няма";
. Document.getElementById ( "спинер") style.display = "блок";
// изпратите съобщението на страницата
chrome.tabs.sendMessage (раздели [0] .id ,, функция (отговор) console.log (response.farewell);
// след изпращане на съобщението и получаване на отговор
// покаже бутонът и да се скрият товарача
. document.getElementById ( "hotnkclickaddfriends") style.display = "блок";
. Document.getElementById ( "спинер") style.display = "никой";
>);
>);
>, False);

Всички едно и също, а дори и повече може да се намери в документацията.
Това е всичко. =)

• Уеб развитие

Че може да бъде забавно!