የ Chrome ድር ቅጥያ - ምንም ቀዳሚ ኮድ ተሞክሮ አያስፈልግም - 6 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:29

የ Chrome ቅጥያዎች የተጠቃሚዎችን የአሰሳ ተሞክሮ ለማሻሻል የተገነቡ ትናንሽ ፕሮግራሞች ናቸው። ስለ chrome ቅጥያዎች ተጨማሪ መረጃ ወደ https://developer.chrome.com/extensions ይሂዱ።

የ Chrome ድር ቅጥያ ለማድረግ ፣ ኮድ መስጠት ያስፈልጋል ፣ ስለሆነም ኤችቲኤምኤልን ፣ ጃቫስክሪፕትን እና ሲኤስኤስን ከዚህ በታች ባለው ድር ጣቢያ መገምገም በጣም ጠቃሚ ነው -

www.w3schools.com/default.asp (w3 ትምህርት ቤቶች ሀብቶችን ኮድ ለማድረግ ጥሩ ድር ጣቢያ ነው)

እንዴት ኮድ ማድረግ እንደሚችሉ አታውቁም? አይጨነቁ ፣ ይህ መማሪያ መንገዱን ለመምራት ይረዳል።

ስለ Chrome ቅጥያዎች በጣም ጥሩው ነገር እነሱ ሊበጁ የሚችሉ መሆናቸው ነው። ሊሠራ የሚችለው አንድ የተወሰነ ነገር ብቻ አይደለም ፣ ስለሆነም ፈጠራ ይሁኑ።

አቅርቦቶች

የሚያስፈልጉት ዕቃዎች ከዚህ በታች ቀርበዋል።

• የጽሑፍ አርታኢ ያለው ኮምፒተር (ማስታወሻ ደብተር እጠቀማለሁ)
• ጉግል ክሮም

እና ያ ብቻ ነው!

ደረጃ 1 ማውጫውን ይፍጠሩ

በመጀመሪያ ሁሉንም ፋይሎች ለመያዝ አቃፊ ይፍጠሩ እና ‹ቅጥያ› ብለው ይሰይሙት። ከተፈለገ ስሙ በኋላ ሊለወጥ ይችላል።

ደረጃ 2 - የማኒፌል ፋይልን ይፍጠሩ እና ኮድ ያድርጉት

አንጸባራቂ ፋይል የቅጥያው በጣም አስፈላጊ አካል ነው። ምን ማድረግ እና መሆን እንዳለበት ለቅጥያው በትክክል ይነግረዋል። አንጸባራቂ ፋይሎች በ JSON ውስጥ ተቀርፀዋል። የመጀመሪያው እርምጃ የጽሑፍ አርታዒን መክፈት እና አዲስ ፋይል እንደ 'manifest.json' ማስቀመጥ ነው።

ቀጥሎ የሚከተለውን ስክሪፕት ይተይቡ

{

"name": "First Extension", "version": "1.0", "description": "አንድ ቅጥያ ኮድ ማድረግ እችላለሁ", "manifest_version": 2, "browser_action": {"default_title": "First Extension"}}

ከእሴቶቹ በኋላ ኮማዎችን ያስታውሱ!

ይህ ከተየበተ በኋላ አንጸባራቂውን ፋይል ያስቀምጡ እና ወደ chrome: // extensions ይሂዱ (Chrome ለዚህ እንደ አሳሽ ጥቅም ላይ መዋል አለበት)። አንዴ በ chrome: // ቅጥያዎች ላይ ፣ የገንቢ ሁነታን ያብሩ። ከዚያ በኋላ አዝራሩን ተጭነው ‹ያልተከፈተ ጫን› እና ‹ቅጥያ› አቃፊውን ይምረጡ።

ከበሮ ጥቅል እባክዎን…

እይ! ይህ ዓይነት … አሰልቺ ካልሆነ በስተቀር ቅጥያ ነው። በአሁኑ ጊዜ ቃል በቃል ምንም አያደርግም ፣ ግን ብዙም ሳይቆይ በጣም አሪፍ ይሆናል።

ደረጃ 3: አዶዎቹን ይፍጠሩ እና መግለጫውን ያዘምኑ

አዶዎችን ለመሳል በደንብ የሚሰራ አንድ ድር ጣቢያ https://www.piskelapp.com/ ነው። ለአጠቃቀም የሚገኙ ሌሎች የስዕል ፕሮግራሞችም አሉ ፣ እንዲሁ። አዶዎቹ ካሬ መሆን አለባቸው። ይህ ፕሮጀክት 16x16 ፣ 32x32 ፣ 48x48 እና 128x128 አዶዎችን ይጠቀማል። አንዴ አዶው ከተሰራ ፣ በቅጥያው አቃፊ ውስጥ ‹ምስሎች› የሚባል አቃፊ ያዘጋጁ እና አዶውን በዚያ አቃፊ ውስጥ ያስቀምጡ። እንደ መጠኑ መጠን አንድ ምስል መሰየም ጥሩ ሀሳብ ሊሆን ይችላል። ለምሳሌ ፣ ‹icon32.png›። አዲሱ ኮድ ከዚህ በታች ነው

{

"name": "First Extension", "version": "1.0", "description": "አንድ ቅጥያ ኮድ ማድረግ እችላለሁ", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" ምስሎች/icon16-p.webp

በአንጸባራቂው ኮድ ላይ ለማጣቀሻ ወደ https://developer.chrome.com/extensions/manifest ይሂዱ።

ደረጃ 4: ብቅ ባይ ያክሉ

ይህ ቅጥያ ብቅ -ባይ ይኖረዋል። ብቅ -ባይ ኤችቲኤምኤል (Hypertext Markup Language) ፋይል ነው ፣ ስለሆነም በመጀመሪያ የኤችቲኤምኤል ፣ የሲኤስኤስ እና የጃቫስክሪፕት መሰረታዊ ነገሮችን መማር ጥሩ ነው።

በመጀመሪያ አንድ ሰነድ በቅጥያ አቃፊው ውስጥ እንደ 'popup.html' ፋይል ያስቀምጡ።

በመቀጠል ጠቅ ሲያደርግ 'popup.html' ን ለማሳየት አንጸባራቂ ፋይሉን ያርትዑ። አዲሱ ኮድ ከዚህ በታች ነው

{

"name": "First Extension", "version": "1.0", "description": "አንድ ቅጥያ ኮድ ማድረግ እችላለሁ", "manifest_version": 2, "browser_action": {"default_title": "First Extension", " default_icon ": {" 16 ":" ምስሎች/icon16-p.webp

ኮማውን አይርሱ!

አሁን ፣ የሚከተለው የኤችቲኤምኤል ኮድ በ popup.html ውስጥ ከተጨመረ ፣ ጠቅ ሲያደርግ ‹ሰላም ዓለም› ን ያሳያል።

ሰላም ልዑል

ደረጃ 5 ጥሩ እንዲመስል ያድርጉ እና በይነተገናኝ ያድርጉት።

አንድ መሠረታዊ የኤችቲኤምኤል መስመር ከተተየበ ፣ ከዚያ አነስተኛውን ያከናውናል። CSS (Cascading Style Sheets) ከተጨመረ ፣ ከዚያ የበለጠ ቀዝቃዛ ይመስላል ፣ እና ጃቫስክሪፕት ከተጨመረ ፣ ከዚያ የበለጠ በይነተገናኝ ሊሆን ይችላል። ይህ መማሪያ ኤችቲኤምኤልን ፣ ጃቫስክሪፕትን እና ሲኤስኤስን የሚያብራራ ዝርዝር ውስጥ አይገባም ፣ ግን በመስመር ላይ ብዙ ሀብቶች አሉ። ከዚህ በታች ለቀላል ‹ሰላም ዓለም› ፕሮግራም ፣ ከዚያ የበለጠ በቀለማት ያሸበረቀ መርሃ ግብር በቅደም ተከተል

ሰላም ልዑል

ሰላም ልዑል

#ሰላም {የጀርባ ቀለም- #000000; ቀለም: #ff0000; ወሰን 8px መጀመሪያ #86a3b2; ድንበር-ራዲየስ 50 ፒክሰል; ለውጥ: ማሽከርከር (57 ዲግ); መለጠፍ: 10 ፒክስል; ተጠቃሚ-ይምረጡ: የለም; ጠቋሚ: crosshair; ሽግግር: 2 ዎችን መለወጥ; } #ሰላም: ማንዣበብ {transform: rotate (-417deg); }

ይህ ሁለተኛው ምሳሌ ለጀማሪ በጣም ግራ የሚያጋባ ሊሆን ይችላል። ግን ፣ ይህ CSS ለፕሮግራም/ቅጥያ ምን ያህል አስፈላጊ እንደሆነ ለማሳየት ነው። አሁን ጥቂት ዕረፍት ለማድረግ እና አንዳንድ የኤችቲኤምኤል 5 ኮዲንግን ለመማር እና ለተወሰነ ማጣቀሻ ገንቢ.chrome.com ን ለመጠቀም ጥሩ ጊዜ ይሆናል። የተወሰነ ጊዜ ሊወስድ ይችላል ፣ ግን ትልቅ ቅጥያ ሊደረግ ይችላል።

ደረጃ 6 ፦ ወደ Chrome ድር መደብር ማተም

አንድ ሰው በእውነት ታላቅ ቅጥያ ካደረገ እና ለዓለም ማጋራት ከፈለጉ ፣ ከዚያ ማተም ይችላሉ። ያ ነው ፣ ከሁሉም በኋላ ፣ የቅጥያ ነጥብ። ይህ መማሪያ አንጸባራቂ ፋይልን ፣ እና እንዴት እንደሚጠቀሙበት ለማብራራት ብቻ ሞክሯል ፣ እና እሱ ‹ሰላም ዓለም› ፕሮግራም ነበረው።

ቅጥያውን ይፋ ለማድረግ የመጀመሪያው ነገር የቅጥያ አቃፊውን ወደ ዚፕ ፋይል ማድረጉ ነው። ሁለተኛው ማድረግ ያለብዎት ወደ https://chrome.google.com/webstore/category/extensions በመሄድ ወደ ጉግል መለያ መግባት ነው። ከዚያ በቅንብሮች ማርሽ ቁልፍ ላይ ጠቅ ያድርጉ እና ከዚያ በ ‹ገንቢ ዳሽቦርድ› ላይ ጠቅ ያድርጉ። የዚፕ ፋይሉን ለመስቀል 'አዲስ ንጥል' የሚለውን ቁልፍ ይጫኑ። እዚያ እንደደረሱ የመደብር ዝርዝሩን ፣ ግላዊነትን እና የዋጋ አሰጣጡን ማረም አስፈላጊ ነው። አንድ ቅጥያ ለግምገማ ከቀረበ በቀላሉ ሊታተም ይችላል።

አሁን ቅጥያው እንደተጠናቀቀ ፣ ኮዱን ይቀጥሉ!