Как да създадете свое собствено разширение за Google Chrome

Случвало ли ви се е да сте недоволни от функциите, които идват с вашия уеб браузър? Дори с часове претърсване на уеб магазина на Google под колана ви, не винаги е лесно да натиснете „изтегляне“, за да подобрите изживяването си при сърфиране в мрежата.

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

Какво е разширение за Google Chrome?

Модерен уеб браузъри като Google Chrome идват с набор от функции, които ги правят лесни за използване и могат да отговорят на нуждите на повечето потребители. Разширяването на тези функции обаче може да доведе до множество различни предимства. Ето защо разработчиците на браузъри обикновено правят възможно създаването на разширения, добавки и плъгини за тях.

Google Chrome предлага тази функция, което улеснява всеки с опит в уеб разработката да създаде свои собствени разширения за Chrome. Можете да направите разширение с помощта на HTML, JavaScript и CSS, точно като много уебсайтове.

За разлика от уебсайт, разширенията могат да работят във фонов режим, докато сърфирате, понякога дори да взаимодействат със сайтовете, които посещавате.

Какво ще направи нашето разширение за Google Chrome?

Ще изградим просто разширение за Chrome, което ще ви позволи да посетите уебсайта Make Use Of и да извършите произволно търсене въз основа на категориите статии, намерени на сайта. Това е бърз и лесен проект, но все пак ще научите много.

Ще научите как да

• Създайте разширение за Google Chrome
• Вмъкнете персонализиран код в уеб страници с помощта на разширение за Chrome
• Създавайте слушатели на събития и симулирайте кликвания
• Генерирайте произволни числа
• Работете с масиви и променливи

Създаване на ваше собствено разширение за Chrome, направи си сам

Google направи изненадващо лесно да създадете свой собствен Разширения за Chrome, така че няма да отнеме много време, преди нещо да работи. Следването на стъпките по-долу ще отнеме само 10 до 15 минути, но ви препоръчваме да експериментирате и със собствения си код.

Стъпка 1: Създаване на файловете

Можете да съхранявате разширението си на собствената си локална машина, когато не планирате да го разпространявате. Трябва само да създадем четири различни файла, за да създадем нашето разширение; HTML файл, CSS файл, JavaScript файл и JSON файл.

Нарекохме нашите файлове index.html, style.css, script.js и manifest.json. Файлът на манифеста трябва да има това име, за да работи правилно, но можете да дадете на другите всякакви имена, които искате, стига съответно да промените кода си.

Трябва да поставите тези файлове в една и съща основна папка.

Стъпка 2: Изграждане на манифестния файл

Файлът на манифеста идва с всяко разширение на Google Chrome. Той предоставя информация за разширението на Chrome, като същевременно поставя някои основни настройки. Този файл трябва да съдържа име, номер на версията, описание и версия на манифеста. Също така сме включили разрешения и действие, което се зарежда index.html като изскачащ прозорец, който се показва за разширението.

{
"име": "Автоматично търсене на MakeUseOf.com",
"версия": "1.0.0",
"описание": "Инструмент за търсене за намиране на интересни статии",
"манифест_версия": 3,
"автор": "Самюел Гарбет",
"разрешения": ["съхранение", "declarativeContent", "активен раздел", "скриптиране"],
"host_permissions": [""],
"действие":{
"default_popup": "index.html",
"заглавие по подразбиране": "MUO автоматично търсене"
 }
}

Стъпка 3: Създаване на HTML и CSS

Преди да можем да започнем да пишем нашия скрипт, трябва да създадем основен потребителски интерфейс, използвайки HTML и CSS. Можете да използвате a CSS библиотека като Bootstrap за да избегнем създаването на свой собствен, но имаме нужда само от няколко правила за нашето разширение.

Нашият файл index.html включва html, head и body тагове. Тагът head съдържа заглавие на страница и връзка към нашата таблица със стилове, докато тялото е дом на етикет h1, a бутон, който ви отвежда до MakeUseOf.com, и друг бутон, който ще използваме като тригер за a скрипт. Таг за скрипт точно в края на документа включва script.js файл.

<html>
<глава>
<заглавие>MUO автоматично търсене</title>
<мета charset="utf-8">
<връзка rel="стилова таблица" href="style.css">
</head>
<тяло>
<h1>MUO автоматично търсене</h1>
<a href="https://www.makeuseof.com/" цел ="_празен"><бутон ID="бутон Едно">Отидете на MakeUseOf.com</button></a>
<бутон ID="бутонДва">Стартирайте произволно търсене</button>
</body>
<скрипт src="script.js"></script>
</html>

Нашият CSS файл е дори по-прост от нашия HTML, променяйки стила само на пет елемента. Имаме правила за нашите html и body тагове, както и за h1 тагове и двата ни бутона.

html {
 ширина: 400px;
}
тяло {
 семейство шрифтове: Helvetica, sans-serif;
}
h1 {
 подравняване на текста: център;
}
#buttonOne {
 радиус на границата: 0px;
 ширина: 100%;
 допълване: 10px 0px;
}
#buttonTwo {
 радиус на границата: 0px;
 ширина: 100%;
 допълване: 10px 0px;
 margin-top: 10px;
}

Стъпка 4: Изграждане на JavaScript

Като последна стъпка в този процес е време да изградим нашия файл script.js.

Първата функция в този файл, наречена insertScript(), е на място за вмъкване на другата функция (автоматично търсене()) в текущата страница. Това ни позволява да манипулираме страницата и да използваме функциите за търсене, които вече присъстват на сайта MakeUseOf.com.

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

В автоматично търсене() функцията е малко по-сложна. Започва с масив, съдържащ 20 от категориите на уебсайта на MUO, което ни дава добра извадка, от която да черпим, когато правим нашите произволни търсения. След това използваме Math.random() функция за генериране на произволно число между 0 и 19, за да изберете запис от нашия масив.

С нашия термин за търсене в ръка, сега трябва да симулираме щракване на бутон, за да отворим лентата за търсене MUO. Първо използваме конзолата за разработчици на Chrome, за да намерим идентификатора на бутона за търсене и след това добавяме това към нашия JavaScript код с щракни () функция.

Подобно на бутона за търсене, ние също трябва да намерим идентификатора на лентата за търсене, която се показва, което ни позволява да вмъкнем произволната дума за търсене, която сме избрали. След като това приключи, е лесно да изпратите формуляра, за да извършим нашето търсене.

// Тази функция вмъква нашата функция за автоматично търсене в кода на страницата
функцияinsertScript() {
// Това избира фокусирания раздел за операцията и предава функцията за автоматично търсене
 chrome.tabs.query({активен: вярно, CurrentWindow: вярно}, раздели => {
хром.скриптиране.executeScript({цел: {tabId: tabs[0].документ за самоличност}, функция: автоматично търсене})
 })
// Това затваря изскачащия прозорец за разширение, за да изберете лентата за търсене на уебсайта
прозорец.близо();
}
// Това е слушател на събитие, който открива щраквания върху нашия "Започнете Случаен Търсене" бутон
document.getElementById('бутонДва').addEventListener('щракнете', insertScript)
// Тази функция избира произволна тема от масив и 
функцияавтоматично търсене() {
// Това е масив за съхраняване на нашите думи за търсене
 const searchTerms = ["Компютър и мобилен телефон", "начин на живот", "Хардуер", "Windows", "Mac",
"Linux", "Android", "Apple", "интернет", "Сигурност",
"Програмиране", "Забавление", "производителност", "Кариера", "Творчески",
"игри", "Социална медия", "Умен дом", "Направи си сам", "Преглед"];
// Това генерира произволно число между 0 и 19
позволявам селекторНомер = математика.етаж(математика.random() * 20);
// Това използва произволното число, за да избере запис от масива
позволявам селекция = searchTerms[селекторНомер];
// Това симулира щракване върху иконата за търсене на уебсайт MUO
 document.getElementById("js-търсене").щракнете ();
// Това задава лентата за търсене на уебсайта MUO като променлива
вар лента за търсене = документ.getElementById("js-search-input");
// Това вмъква нашата произволна дума за търсене в лентата за търсене
 searchBar.value = searchBar.value + селекция;
// Това завършва процеса чрез активиране на формуляра на уебсайта
 document.getElementById("формуляр за търсене 2").Изпращане();
}

Стъпка 5: Добавяне на вашите файлове към Chrome://extensions

След това е време да добавите файловете, които току-що създадохте, към страницата с разширения на Chrome. След като направите това, разширението ще бъде достъпно в Chrome и ще се актуализира, когато правите промени във вашите файлове.

Отворете Google Chrome, отидете на chrome://extensions и се уверете, че плъзгачът за режим на програмист в горния десен ъгъл е във включено положение.

Щракнете върху Заредете разопаковано в горния ляв ъгъл, след това изберете папката, в която сте запазили вашите разширения, и щракнете Изберете Папка.

Сега, когато разширението ви е заредено, можете да щракнете върху иконата на парче пъзел в горния десен ъгъл и да закрепите разширението си към основната лента на задачите за по-лесен достъп.

Вече трябва да имате достъп до завършеното разширение във вашия браузър. Струва си да имате предвид, че това разширение ще работи само на уебсайта на MUO или на уебсайтове със същия идентификатор за бутона и лентата за търсене.

Създаване на разширение за Google Chrome

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

Разширенията за Chrome могат да ви помогнат да повишите нивото на сърфирането си, но се опитайте да стоите далеч от някои от известните сенчести разширения на Chrome за безопасно и сигурно сърфиране.

6 сенчести разширения за Google Chrome, които трябва да деинсталирате възможно най-скоро

Прочетете Следващото

За автора