![Уеб разширение за Chrome - не е необходим предишен опит в кодирането: 6 стъпки Уеб разширение за Chrome - не е необходим предишен опит в кодирането: 6 стъпки](https://i.howwhatproduce.com/images/002/image-5763-j.webp)
Съдържание:
- Консумативи
- Стъпка 1: Създайте директорията
- Стъпка 2: Създайте файла с манифеста и го кодирайте
- Стъпка 3: Създайте иконите и актуализирайте манифеста
- Стъпка 4: Добавете изскачащ прозорец
- Здравей свят
- Стъпка 5: Направете го да изглежда добре и го направете интерактивен
- Здравей свят
- Здравей свят
- Стъпка 6: Публикувайте го в уеб магазина на Chrome
2025 Автор: John Day | [email protected]. Последно модифициран: 2025-01-23 12:57
![Уеб разширение за Chrome - не е необходим предишен опит в кодирането Уеб разширение за Chrome - не е необходим предишен опит в кодирането](https://i.howwhatproduce.com/images/002/image-5763-1-j.webp)
Разширенията на Chrome са малки програми, създадени за подобряване на сърфирането на потребителите. За повече информация относно разширенията на chrome посетете
За да направите уеб разширение за Chrome, е необходимо кодиране, така че е много полезно да прегледате HTML, JavaScript и CSS на уебсайта по -долу:
www.w3schools.com/default.asp (w3 училищата са добър уебсайт за кодиране на ресурси)
Не знаете как да кодирате? Не се притеснявайте, този урок ще ви помогне да насочите пътя.
Най -хубавото при разширенията за Chrome е, че те могат да бъдат персонализирани. Не може да се направи само едно конкретно нещо, затова бъдете креативни.
Консумативи
Необходимите консумативи са по -долу:
- Компютър с текстов редактор (използвам Notepad)
- Google Chrome
И това е всичко!
Стъпка 1: Създайте директорията
![Създайте директорията Създайте директорията](https://i.howwhatproduce.com/images/002/image-5763-2-j.webp)
Първо създайте папка, в която да се съхраняват всички файлове, и я наречете „разширение“. При желание името може да бъде променено по -късно.
Стъпка 2: Създайте файла с манифеста и го кодирайте
![Създайте файла с манифеста и го кодирайте Създайте файла с манифеста и го кодирайте](https://i.howwhatproduce.com/images/002/image-5763-3-j.webp)
![Създайте файла с манифеста и го кодирайте Създайте файла с манифеста и го кодирайте](https://i.howwhatproduce.com/images/002/image-5763-4-j.webp)
Файлът на манифеста е много важна част от разширението. Той казва на разширението точно какво да прави и да бъде. Манифестните файлове са форматирани в JSON. Първата стъпка е да отворите текстов редактор и да запазите нов файл като 'manifest.json'.
След това въведете скрипта по -долу:
{
"name": "First Extension", "version": "1.0", "description": "Мога да кодирам разширение", "manifest_version": 2, "browser_action": {"default_title": "Първо разширение"}}
Запомнете запетаите след стойностите!
След като въведете това, запазете файла с манифеста и отидете на chrome: // extensions (Chrome трябва да се използва като браузър за това). Веднъж в chrome: // extensions, включете режима за програмисти. След това натиснете бутона „Заредете разопаковано“и изберете папката „разширение“.
барабанен рол моля …
Да! Това е разширение, с изключение на … скучно. В момента не прави буквално нищо, но скоро ще стане супер готино.
Стъпка 3: Създайте иконите и актуализирайте манифеста
![Създайте иконите и актуализирайте манифеста Създайте иконите и актуализирайте манифеста](https://i.howwhatproduce.com/images/002/image-5763-5-j.webp)
Един уебсайт, който работи добре за рисуване на икони, е 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: Добавете изскачащ прозорец
![Добавете изскачащ прозорец Добавете изскачащ прозорец](https://i.howwhatproduce.com/images/002/image-5763-6-j.webp)
![Добавете изскачащ прозорец Добавете изскачащ прозорец](https://i.howwhatproduce.com/images/002/image-5763-7-j.webp)
Това разширение ще има изскачащ прозорец. Изскачащият прозорец е 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: Направете го да изглежда добре и го направете интерактивен
![Направете го да изглежда добре и го направете интерактивен Направете го да изглежда добре и го направете интерактивен](https://i.howwhatproduce.com/images/002/image-5763-8-j.webp)
![Направете го да изглежда добре и го направете интерактивен Направете го да изглежда добре и го направете интерактивен](https://i.howwhatproduce.com/images/002/image-5763-9-j.webp)
Ако е въведен основен 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
![Публикуването му в уеб магазина на Chrome Публикуването му в уеб магазина на Chrome](https://i.howwhatproduce.com/images/002/image-5763-10-j.webp)
![Публикуването му в уеб магазина на Chrome Публикуването му в уеб магазина на Chrome](https://i.howwhatproduce.com/images/002/image-5763-11-j.webp)
Ако някой е направил наистина страхотно разширение и иска да го сподели със света, тогава може да го публикува. В крайна сметка това е смисълът на разширението. Този урок само се опита да обясни файла на манифеста и как можете да го използвате, а той просто имаше програма „Hello World“.
Първото нещо, което трябва да направите, за да направите разширението публично, е да направите папката с разширение в zip файл. Второто нещо, което трябва да направите, е да отидете на https://chrome.google.com/webstore/category/extensions и да влезете в акаунт в Google. След това щракнете върху бутона със зъбни колела за настройки и след това върху „таблото за разработчици“. Натиснете бутона „New Item“, за да качите zip файла. Веднъж там, е необходимо да редактирате обявата в магазина, поверителността и ценообразуването. Разширението може да бъде публикувано лесно, ако е изпратено за преглед.
Сега, когато разширението е завършено, продължете да кодирате!
Препоръчано:
Пазарувайте автоматичен превключвател Vac (не е необходим Arduino): 7 стъпки
![Пазарувайте автоматичен превключвател Vac (не е необходим Arduino): 7 стъпки Пазарувайте автоматичен превключвател Vac (не е необходим Arduino): 7 стъпки](https://i.howwhatproduce.com/images/002/image-4736-j.webp)
Автоматичен превключвател Shop Vac (не е необходим Arduino): Както много любители на дърводелци, аз имам вакуум в магазина, прикрепен към масата ми и всеки път, когато искам да извърша рязане, трябва да го включа, преди да включа триона. Това може да изглежда глупаво, но е болка в шията да включваш и изключваш вакуумната лампа колкото се може повече
Неуспешен опит - Symfonisk (Sonos Play 1) до 3 ома субуфер: 5 стъпки
![Неуспешен опит - Symfonisk (Sonos Play 1) до 3 ома субуфер: 5 стъпки Неуспешен опит - Symfonisk (Sonos Play 1) до 3 ома субуфер: 5 стъпки](https://i.howwhatproduce.com/images/007/image-18271-j.webp)
Неуспешен опит - Symfonisk (Sonos Play 1) до 3 Ohm субуфер: Това беше предназначен да бъде проект за разширяване на някои други проекти и разкъсвания, които бях виждал онлайн, за да използвам Ikea Symfonisk / Sonos Play 1 като безжичен драйвер за субуфер . Други проекти са използвали Symfonisk за създаване на безжични високоговорители
Използвайте повторно модул за уеб камера HP WebCam 101 Aka 679257-330 като обща USB уеб камера: 5 стъпки
![Използвайте повторно модул за уеб камера HP WebCam 101 Aka 679257-330 като обща USB уеб камера: 5 стъпки Използвайте повторно модул за уеб камера HP WebCam 101 Aka 679257-330 като обща USB уеб камера: 5 стъпки](https://i.howwhatproduce.com/images/006/image-17049-7-j.webp)
Използвайте повторно модул на уеб камера HP WebCam 101 Aka 679257-330 като обща USB уеб камера: Искам да подправя 14-годишния си Panasonic CF-18 с чисто нова уеб камера, но Panasonic вече не поддържа тази прекрасна машина, затова трябва да използвайте сивото вещество за нещо по -лесно от b & b (бири и бургери). Това е първата част
Урок за IO на уеб драйвер Използване на уеб сайт на живо и примери за работа: 8 стъпки
![Урок за IO на уеб драйвер Използване на уеб сайт на живо и примери за работа: 8 стъпки Урок за IO на уеб драйвер Използване на уеб сайт на живо и примери за работа: 8 стъпки](https://i.howwhatproduce.com/images/002/image-4556-56-j.webp)
Урок за IO на уеб драйвер Използване на уеб сайт на живо и примери за работа: Урок за IO на уеб драйвер Използване на уеб сайт на живо и работещи примери Последна актуализация: 26.07.2015 г. (Проверявайте често, докато актуализирам тези инструкции с повече подробности и примери) Предистория интересно предизвикателство ми беше представено. Трябваше да
Получаване на NES роми на Jailbroken IPhone/iPod Touch без компютър (необходим е Wi-Fi) .: 4 стъпки
![Получаване на NES роми на Jailbroken IPhone/iPod Touch без компютър (необходим е Wi-Fi) .: 4 стъпки Получаване на NES роми на Jailbroken IPhone/iPod Touch без компютър (необходим е Wi-Fi) .: 4 стъпки](https://i.howwhatproduce.com/preview/how-and-what-to-produce/10962544-getting-nes-roms-on-a-jailbroken-iphoneipod-touch-without-a-computer-wi-fi-is-needed-4-steps-j.webp)
Получаване на NES роми на Jailbroken IPhone/iPod Touch без компютър (необходим е Wi-Fi) .: Това ръководство ще ви даде начин да изтеглите 69 rom на вашия iPhone/iPod touch! Необходима е версия 2.0+