Уеб разширение за Chrome - не е необходим предишен опит в кодирането: 6 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:50

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

За да направите уеб разширение за Chrome, е необходимо кодиране, така че е много полезно да прегледате HTML, JavaScript и CSS на уебсайта по -долу:

www.w3schools.com/default.asp (w3 училищата са добър уебсайт за кодиране на ресурси)

Не знаете как да кодирате? Не се притеснявайте, този урок ще ви помогне да насочите пътя.

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

Консумативи

Необходимите консумативи са по -долу:

• Компютър с текстов редактор (използвам Notepad)
• Google Chrome

И това е всичко!

Стъпка 1: Създайте директорията

Първо създайте папка, в която да се съхраняват всички файлове, и я наречете „разширение“. При желание името може да бъде променено по -късно.

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

Файлът на манифеста е много важна част от разширението. Той казва на разширението точно какво да прави и да бъде. Манифестните файлове са форматирани в JSON. Първата стъпка е да отворите текстов редактор и да запазите нов файл като 'manifest.json'.

След това въведете скрипта по -долу:

{

"name": "First Extension", "version": "1.0", "description": "Мога да кодирам разширение", "manifest_version": 2, "browser_action": {"default_title": "Първо разширение"}}

Запомнете запетаите след стойностите!

След като въведете това, запазете файла с манифеста и отидете на chrome: // extensions (Chrome трябва да се използва като браузър за това). Веднъж в chrome: // extensions, включете режима за програмисти. След това натиснете бутона „Заредете разопаковано“и изберете папката „разширение“.

барабанен рол моля …

Да! Това е разширение, с изключение на … скучно. В момента не прави буквално нищо, но скоро ще стане супер готино.

Стъпка 3: Създайте иконите и актуализирайте манифеста

Един уебсайт, който работи добре за рисуване на икони, е https://www.piskelapp.com/. Има и други програми за рисуване, достъпни за използване. Иконите трябва да са квадратни. Този проект ще използва икони 16x16, 32x32, 48x48 и 128x128. След като иконата е направена, направете папка, наречена „изображения“в разширението и поставете иконата в тази папка. Може да е добра идея да дадете име на изображението според неговия размер. Например „icon32.png“. Новият код е по -долу:

{

"name": "Първо разширение", "version": "1.0", "description": "Мога да кодирам разширение", "manifest_version": 2, "browser_action": {"default_title": "Първо разширение", " default_icon ": {" 16 ":" images/icon16-p.webp

За справка относно кода на манифеста отидете на

Стъпка 4: Добавете изскачащ прозорец

Това разширение ще има изскачащ прозорец. Изскачащият прозорец е HTML (Hypertext Markup Language) файл, така че е добре първо да научите основите на HTML, CSS и JavaScript.

Първо, запазете документ като „popup.html“файл в папката с разширение.

След това редактирайте файла на манифеста, за да показва „popup.html“, когато се кликне върху него. Новият код е по -долу:

{

"name": "Първо разширение", "version": "1.0", "description": "Мога да кодирам разширение", "manifest_version": 2, "browser_action": {"default_title": "Първо разширение", " default_icon ": {" 16 ":" images/icon16-p.webp

Не забравяйте запетаята!

Сега, ако следният HTML код е добавен към popup.html, той ще покаже „Hello World“, когато щракнете върху него.

Здравей свят

Стъпка 5: Направете го да изглежда добре и го направете интерактивен

Ако е въведен основен HTML ред, той постига нужния минимум. Ако се добави CSS (Cascading Style Sheets), тогава той ще изглежда по -готин, а ако се добави JavaScript, той може да бъде по -интерактивен. Този урок няма да навлиза подробно в обясняването на HTML, JavaScript и CSS, но има много ресурси онлайн. По -долу е кодът за простата програма „Hello World“, след това за по -цветната програма, съответно:

Здравей свят

Здравей свят

#здравей {background-color: #000000; цвят: #ff0000; граница: 8px начало #86a3b2; рамка-радиус: 50px; трансформиране: завъртане (57 градуса); подложка: 10px; потребителски избор: няма; курсор: кръст; преход: преобразуване 2s; } #hello: hover {transform: rotate (-417deg); }

Този втори пример може да бъде много объркващ за начинаещ. Но това трябваше да ви покаже колко е важен CSS за програма/разширение. Сега би било подходящ момент да си починете и да научите малко HTML5 кодиране и да използвате developer.chrome.com за справка. Може да отнеме известно време, но може да се направи голямо разширение.

Стъпка 6: Публикувайте го в уеб магазина на Chrome

Ако някой е направил наистина страхотно разширение и иска да го сподели със света, тогава може да го публикува. В крайна сметка това е смисълът на разширението. Този урок само се опита да обясни файла на манифеста и как можете да го използвате, а той просто имаше програма „Hello World“.

Първото нещо, което трябва да направите, за да направите разширението публично, е да направите папката с разширение в zip файл. Второто нещо, което трябва да направите, е да отидете на https://chrome.google.com/webstore/category/extensions и да влезете в акаунт в Google. След това щракнете върху бутона със зъбни колела за настройки и след това върху „таблото за разработчици“. Натиснете бутона „New Item“, за да качите zip файла. Веднъж там, е необходимо да редактирате обявата в магазина, поверителността и ценообразуването. Разширението може да бъде публикувано лесно, ако е изпратено за преглед.

Сега, когато разширението е завършено, продължете да кодирате!