Как да създадете просто разширение за Chrome

Въведение

Написах за „как създадох разширение за Chrome само за един ден“ — сега ще ви покажа техническите подробности и частите за кодиране. Разширението, което създадох, имаше функции get, post(upload) и del. Създадох тези функции само с няколко реда JS код, така че не се притеснявайте. Една добра част от разработването на Chrome е съхранението – не е необходимо да използвате база данни за мини функции. Chrome има свой пакет за локално съхранение (chrome.storage)

Моето първо приложение:

Всъщност първото ми разширение не беше за начинаещи (започнах с трудно). Потокът на разширението беше като.

Отворете и активирайте разширението
Кликнете върху знака — изскачащият прозорец ще се появи на екрана
Въведете думата, която не знаете, в полето за въвеждане
Въведете значението
Запазване (Можете също да запазвате думи, като просто ги маркирате на уеб страници с ContextMenus)
Ако искате - редактирайте или изтрийте
Това е всичко

примерно изображение

Защо ви показах първото си разширение и защо е важно. Важно е да знаете колко големи проекти можете да създадете само за няколко седмици.

В следващите части ще разгледаме manifest.json,изскачащ HTML файл и пакети за Chrome. Така че нека започнем

Какво е Manifest.json

За всяко разширение на Chrome се изисква файл manifest.json. Файлът manifest.json съдържа информация, която дефинира разширението. Форматът на информацията във файла е JSON.

{"manifest_version": 3,"name":"App","version":"1.0.0","description":"Nothing","icons":{"128":"./icons/logo_128.png","32":"./icons/logo_32.png","16":"./icons/logo_16.png"},"action":{"default_icon":"./icons/logo_16.png","default_popup":"./popup.html"},"permissions": ["contextMenus",]}

Какво е изскачащ HTML

Това е основен HTML файл, който е свързан с manifest.json. Изскачащият HTML файл се появява, когато щракнете върху иконата на приложението

<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1><p>My first paragraph.</p></body>
</html>

Хахаха, това е всичко!😎

Какво е chrome.storage

Описание:

Използвайте chrome.storage API за съхраняване, извличане и проследяване на промените в потребителските данни.

зададено с .sync:

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

или местно:

chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

вземете с .sync:

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

или местно:

chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

Какво е chrome.contextMenus

Описание:

Използвайте chrome.contextMenus API, за да добавите елементи към контекстното меню на Google Chrome. Можете да изберете към какви типове обекти да се прилагат вашите добавки в контекстното меню, като изображения, хипервръзки и страници.

chrome.contextMenus.create(
 createProperties: object,
 callback?: function,
)

Как да започнете

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

За грешки и повече посетете https://developer.chrome.com/docs/extensions/mv3/getstarted/

Затваряне

Това беше всичко, не забравяйте да ме последвате в LinkedIn и Medium!

Как да създадете просто разширение за Chrome — с примери за код