Розширення браузера – це не що інше, як плагіни, які покращують функціональність браузера. Іншими словами, вони додають більше функцій до основної функціональності браузера.
Але чому розширення корисніше веб-програми? Тому що розширення може отримати доступ до всіх API браузера, що дає вам більше контролю над браузером.
За допомогою розширення ви можете:
✅ Налаштуйте інтерфейс користувача браузера та вкладок.
✅ Додайте нові ярлики для дій у браузері.
✅ Уважно стежте за браузером і Інтернетом.
У Google Chrome також є веб-магазин, у якому ви можете розмістити свої розширення Chrome для будь-кого. Ви можете подумати, що створення розширення Chrome — це складне завдання, але насправді це лише HTML, CSS і JavaScript.
Так, ви можете створити розширення Chrome за допомогою простих веб-технологій, таких як JavaScript, і ось навчальний посібник із цього!
Створення розширення Chrome
У цьому посібнику ви дізнаєтесь, як створити розширення Chrome, яке аналізує історію вашого веб-переглядача та показує її вам у спливаючому вікні.
Необхідні файли
Єдиним необхідним файлом для створення розширення Chrome є файл manifest.json. В іншому все, що ви кодуєте, ідентично створенню веб-додатку.
Створення файлу Manifest.json
Цей конкретний файл визначає конфігурацію та функції розширення. Ось приклад того, як зазвичай виглядає файл маніфесту:
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
Остання версія файлу маніфесту на момент написання – v3, яка, згідно з Chromeудосконалює безпеку, конфіденційність і продуктивність розширень і дозволяє розширенням використовувати відкриті веб-технології, такі як сервіс-воркери та обіцянки.
Ви також можете побачити властивість дії у файлі маніфесту. Він визначає, який файл HTML ви хочете відкрити у спливаючому вікні, коли користувач клацає піктограму розширення. Існує також властивість default_icon, яка дозволяє визначити піктограму розширення за умовчанням, яка буде відображатися.
Створення програми
Настав час створити програму, яка буде показана кінцевому користувачеві у вигляді спливаючого вікна. Це не має нічого спільного з розширеннями. Швидше, це звичайний веб-додаток.
По-перше, вам потрібно створити файл запису, який можна вказати у властивості default_popup маніфесту. Я створив index.html як точку входу для цього розширення.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome Extension</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
<h2>Browsing History</h2>
<ul class="list"></ul>
<script src="./app.js"></script>
</body>
</html>
Я зв’язав таблицю стилів, щоб створити гарний вигляд сторінки у спливаючому вікні. Окрім цього, існує також файл javascript, пов’язаний із функцією розширення.
function searchHistory() {
chrome.history.search({
text: '',
startTime: new Date("2023-10-01").getMilliseconds()
}, (results) => {
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
})
}
document.addEventListener("DOMContentLoaded", () => {
searchHistory()
})
Цей файл використовує API історії Chrome щоб запитати історію браузера та відобразити її у спливаючому вікні. Коли користувач натискає піктограму розширення, запускається подія DOMContentLoaded, яка викликає функцію searchHistory, яка містить фактичний код.
Метод пошуку в API історії приймає обов’язковий текст параметра, який є текстом пошуку, на основі якого ви хочете відфільтрувати історію. Якщо ви залишите його як порожній рядок, то історія буде повернена без будь-яких фільтрів.
Іншим корисним параметром є параметр startTime. Він фільтрує результати історії на основі часу, що минув від часу початку. Наприклад, якщо ви вкажете час початку в один тиждень, тоді буде отримано лише історію за минулий тиждень. Це необов’язковий параметр, і за замовчуванням він вказує на останні 24 години.
Щоб отримати результати, API надає функцію зворотного виклику, яка містить результати в масиві. Ви можете прокрутити масив і створити з нього список.
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
Тепер для API історії в Chrome потрібен дозвіл на «історію», який потрібно визначити в нашому файлі маніфесту.
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Запуск розширення
Це найпростіший крок для створення та виконання розширення Chrome. Натисніть на три крапки на панелі дій Chrome і перейдіть до «Керування розширеннями» в розділі «Розширення». Ви також можете перейти безпосередньо за цим посиланням chrome://extensions/.
Увімкніть режим розробника, якщо він не включений.
Потім натисніть «Завантажити розпаковане», а потім виберіть папку проекту, у якій ви щойно створили розширення. Зробивши це, ви зможете побачити своє розширення у списку.
Щоб запустити розширення, перейдіть на панель дій Chrome і натисніть своє розширення для списку.
Це воно; ви щойно створили просте розширення Chrome. Якщо ви хочете більше прикладів, ви можете перевірити більше Зразки розширень Chrome в офіційному репозиторії Google Chrome.
Якщо ви хочете опублікувати своє розширення Chrome у веб-магазині Chrome, ви можете виконайте ці дії і сплатіть одноразову комісію, щоб ваше розширення було зареєстровано в магазині.
Заключні слова
Створити розширення Chrome дуже просто, якщо ви знаєте основи будь-якої веб-програми. Потрібно лише створити файл маніфесту, і ваша програма перетворюється на розширення.
Тепер, коли ви знаєте, як створити розширення Chrome, перегляньте найкращі розширення Chrome, щоб допомогти розробникам.