Chrome Web кеңейтімі - алдын ала кодтау тәжірибесі қажет емес: 6 қадам

2025 Автор: John Day | [email protected]. Соңғы өзгертілген: 2025-01-23 14:51

Chrome кеңейтімдері - бұл пайдаланушылардың шолу тәжірибесін жақсарту үшін жасалған шағын бағдарламалар. Хром кеңейтімдері туралы қосымша ақпарат алу үшін https://developer.chrome.com/extensions сайтына өтіңіз.

Chrome Web Extension жасау үшін кодтау қажет, сондықтан төмендегі веб -сайтта HTML, JavaScript және CSS -ті қарау өте пайдалы:

www.w3schools.com/default.asp (w3 мектептері ресурстарды кодтауға арналған жақсы веб -сайт)

Сіз кодтауды білмейсіз бе? Уайымдамаңыз, бұл нұсқаулық сізге жол көрсетуге көмектеседі.

Chrome кеңейтімдерінің ең жақсы жағы - оларды баптауға болады. Бұл нақты бір нәрсе емес, сондықтан шығармашылықпен айналысыңыз.

Жабдықтар

Қажетті жабдықтар төменде:

• Мәтіндік редакторы бар компьютер (мен Блокнотты қолданамын)
• Google Chrome

Және бұл бәрі!

1 -қадам: Анықтамалықты жасаңыз

Алдымен барлық файлдарды сақтайтын қалта жасаңыз және оны «кеңейтім» деп атаңыз. Қаласаңыз, атауды кейін өзгертуге болады.

2 -қадам: Манифест файлын жасаңыз және оны кодтаңыз

Манифест файлы - кеңейтімнің өте маңызды бөлігі. Ол кеңейтуге не істеу керектігін дәл айтады. Манифест файлдары JSON -да пішімделеді. Бірінші қадам - мәтіндік редакторды ашу және жаңа файлды 'manifest.json' ретінде сақтау.

Содан кейін төмендегі сценарийді теріңіз:

{

«name»: «Бірінші кеңейтім», «нұсқа»: «1.0», «сипаттамасы»: «Мен кеңейтімді кодтай аламын», «manifest_version»: 2, «browser_action»: {«default_title»: «Бірінші кеңейтім»}}

Мәндерден кейін үтірді есте сақтаңыз!

Бұл терілгеннен кейін, манифест файлын сақтап, chrome: // extensions бөліміне өтіңіз (бұл үшін браузер ретінде Chrome қолданылуы керек). Chrome: // extensions -те болғаннан кейін әзірлеуші режимін қосыңыз. Осыдан кейін «Орауды жүктеу» түймесін басып, «кеңейтім» қалтасын таңдаңыз.

барабан ролигін өтінемін …

Алақай! Бұл кеңейту, тек… оның скучно. Бұл дәл қазір ештеңе жасамайды, бірақ жақын арада бұл керемет болады.

3 -қадам: Белгішелерді жасаңыз және Манифестті жаңартыңыз

Белгішелерді салу үшін жақсы жұмыс істейтін веб -сайт - https://www.piskelapp.com/. Қолдануға болатын басқа сурет салу бағдарламалары бар. Белгішелер төртбұрышты болуы керек. Бұл жоба 16x16, 32x32, 48x48 және 128x128 белгішелерін қолданады. Белгіше жасалғаннан кейін кеңейту қалтасында «кескіндер» деп аталатын қалта жасаңыз және белгішені сол қалтаға салыңыз. Суреттің көлеміне қарай атау беру жақсы болар еді. Мысалы, 'icon32.png'. Жаңа код төменде:

{

«name»: «Бірінші кеңейтім», «нұсқа»: «1.0», «сипаттамасы»: «Мен кеңейтімді кодтай аламын», «manifest_version»: 2, «browser_action»: {«default_title»: «Бірінші кеңейтім», « default_icon «: {» 16 «:» images/icon16-p.webp

Манифест кодына сілтеме алу үшін https://developer.chrome.com/extensions/manifest сайтына өтіңіз.

4 -қадам: Қалқымалы терезені қосыңыз

Бұл кеңейтімде қалқымалы терезе болады. Қалқымалы терезе HTML (гипермәтінді белгілеу тілі) файлы болып табылады, сондықтан алдымен HTML, CSS және JavaScript негіздерін үйрену жақсы.

Алдымен құжатты кеңейту қалтасында 'popup.html' файлы ретінде сақтаңыз.

Содан кейін, манифест файлын басқан кезде 'popup.html' көрсету үшін оны өңдеңіз. Жаңа код төменде:

{

«name»: «Бірінші кеңейтім», «нұсқа»: «1.0», «сипаттамасы»: «Мен кеңейтімді кодтай аламын», «manifest_version»: 2, «browser_action»: {«default_title»: «Бірінші кеңейтім», « default_icon «: {» 16 «:» images/icon16-p.webp

Үтірді ұмытпаңыз!

Енді, егер келесі HTML коды popup.html -ге қосылса, онда ол басылғанда 'Сәлем әлемі' көрсетіледі.

Сәлем Әлем

5 -қадам: Оны жақсы етіп көрсетіңіз және оны интерактивті етіңіз

Егер негізгі HTML жолы жазылса, онда ол ең аз мөлшерде орындалады. Егер CSS (Cascading Style Sheets) қосылса, ол салқын көрінеді, ал егер JavaScript қосылса, онда ол интерактивті болады. Бұл оқулық HTML, JavaScript және CSS түсіндіруге егжей -тегжейлі кірмейді, бірақ Интернетте көптеген ресурстар бар. Төменде қарапайым «Сәлем әлемі» бағдарламасының коды, содан кейін сәйкесінше түрлі -түсті бағдарлама:

Сәлем Әлем

Сәлем Әлем

#сәлем {фон түсі: #000000; түсі: #ff0000; шекара: 8px басы #86a3b2; шекара радиусы: 50 пиксель; түрлендіру: айналдыру (57 градус); толтыру: 10 пиксель; пайдаланушы таңдауы: жоқ; курсор: айқас кесте; ауысу: 2с түрлендіру; } #сәлем: апару {түрлендіру: айналдыру (-417дег); }

Бұл екінші мысал жаңадан бастаушы үшін өте түсініксіз болуы мүмкін. Бірақ бұл сізге CSS -тің бағдарлама/кеңейтім үшін қаншалықты маңызды екенін көрсету үшін еді. Енді үзіліс жасап, HTML5 кодтауды үйренуге және сілтеме жасау үшін developer.chrome.com қолдануға жақсы уақыт болар еді. Бұл біраз уақытты алуы мүмкін, бірақ керемет кеңейтуге болады.

6 -қадам: оны Chrome интернет -дүкенінде жариялау

Егер біреу шынымен керемет кеңейтім жасаған болса және оны әлеммен бөліскісі келсе, онда оны жариялай алады. Яғни, ақыр соңында, ұзарту нүктесі. Бұл оқулық тек манифест файлын және оны қалай қолдануға болатынын түсіндіруге тырысты, және оның «Сәлем әлемі» бағдарламасы бар.

Кеңейтімді жалпыға қолжетімді ету үшін бірінші нәрсе - кеңейту қалтасын zip файлына айналдыру. Екінші нәрсе - https://chrome.google.com/webstore/category/extensions сайтына кіріп, Google есептік жазбасына кіру. Содан кейін параметрлердің беріліс түймесін, содан кейін «әзірлеушілердің бақылау тақтасын» нұқыңыз. ZIP файлын жүктеу үшін 'New Item' түймесін басыңыз. Ол жерде дүкендердің тізімін, құпиялылығын және бағасын өзгерту қажет. Ұзартуды қарау үшін ұсынылған жағдайда оңай жариялауға болады.

Енді кеңейтім аяқталғаннан кейін кодтауды жалғастырыңыз!