ส่วนขยายเว็บของ Chrome - ไม่จำเป็นต้องมีประสบการณ์การเข้ารหัสมาก่อน: 6 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03

ส่วนขยายของ Chrome เป็นโปรแกรมขนาดเล็กที่สร้างขึ้นเพื่อปรับปรุงประสบการณ์การท่องเว็บของผู้ใช้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับส่วนขยายของ Chrome ให้ไปที่

ในการสร้างส่วนขยายเว็บของ Chrome จำเป็นต้องมีการเข้ารหัส ดังนั้นจึงมีประโยชน์มากในการตรวจสอบ HTML, JavaScript และ CSS ที่เว็บไซต์ด้านล่าง:

www.w3schools.com/default.asp (โรงเรียน w3 เป็นเว็บไซต์ที่ดีสำหรับแหล่งข้อมูลการเข้ารหัส)

ไม่ทราบวิธีการรหัส? ไม่ต้องกังวล บทช่วยสอนนี้จะช่วยแนะนำวิธีการ

สิ่งที่ดีที่สุดเกี่ยวกับส่วนขยายของ Chrome คือสามารถกำหนดเองได้ ไม่ใช่แค่สิ่งเดียวที่สามารถทำได้ ดังนั้นจงมีความคิดสร้างสรรค์

เสบียง

อุปกรณ์ที่จำเป็นมีดังนี้

• คอมพิวเตอร์ที่มีโปรแกรมแก้ไขข้อความ (ฉันใช้ Notepad)
• Google Chrome

และนั่นคือทั้งหมด!

ขั้นตอนที่ 1: สร้างไดเรกทอรี

ขั้นแรก สร้างโฟลเดอร์เพื่อเก็บไฟล์ทั้งหมด และตั้งชื่อว่า 'ส่วนขยาย' สามารถเปลี่ยนชื่อได้ในภายหลังหากต้องการ

ขั้นตอนที่ 2: สร้างไฟล์มานิเฟสต์และโค้ดมัน

ไฟล์ Manifest เป็นส่วนสำคัญของส่วนขยาย มันบอกส่วนขยายว่าต้องทำอะไรและเป็นไปอย่างไร ไฟล์มานิเฟสต์ถูกจัดรูปแบบใน JSON ขั้นตอนแรกคือการเปิดโปรแกรมแก้ไขข้อความและบันทึกไฟล์ใหม่เป็น 'manifest.json'

ถัดไปพิมพ์สคริปต์ด้านล่าง:

{

"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": { "default_title": "First Extension" } }

จำเครื่องหมายจุลภาคหลังค่า!

หลังจากพิมพ์แล้ว ให้บันทึกไฟล์รายการและไปที่ chrome://extensions (ควรใช้ Chrome เป็นเบราว์เซอร์สำหรับสิ่งนี้) เมื่ออยู่ที่ chrome://extensions ให้เปิดโหมดนักพัฒนาซอฟต์แวร์ หลังจากนั้น ให้กดปุ่ม 'โหลดที่แกะแล้ว' และเลือกโฟลเดอร์ 'ส่วนขยาย'

กลองม้วน ได้โปรด…

เย้! นั่นคือส่วนขยาย ยกเว้น… แบบที่น่าเบื่อ มันไม่ได้ทำอะไรเลยในตอนนี้ แต่ในไม่ช้ามันจะเจ๋งสุด ๆ

ขั้นตอนที่ 3: สร้างไอคอนและอัปเดตรายการ

เว็บไซต์หนึ่งที่ทำงานได้ดีสำหรับการวาดไอคอนคือ https://www.piskelapp.com/ มีโปรแกรมวาดภาพอื่น ๆ ให้ใช้งานเช่นกัน ไอคอนควรเป็นสี่เหลี่ยมจัตุรัส โปรเจ็กต์นี้จะใช้ไอคอนขนาด 16x16, 32x32, 48x48 และ 128x128 เมื่อสร้างไอคอนแล้ว ให้สร้างโฟลเดอร์ชื่อ 'images' ในโฟลเดอร์ส่วนขยายและใส่ไอคอนลงในโฟลเดอร์นั้น อาจเป็นความคิดที่ดีที่จะตั้งชื่อรูปภาพตามขนาด ตัวอย่างเช่น 'icon32.png' รหัสใหม่อยู่ด้านล่าง:

{

"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": { "default_title": "First Extension", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png" " } } }

สำหรับข้อมูลอ้างอิงเกี่ยวกับโค้ดรายการ ให้ไปที่

ขั้นตอนที่ 4: เพิ่มป๊อปอัป

ส่วนขยายนี้จะมีป๊อปอัป ป๊อปอัปเป็นไฟล์ HTML (Hypertext Markup Language) ดังนั้นจึงควรเรียนรู้พื้นฐานของ HTML, CSS และ JavaScript ก่อน

ขั้นแรก บันทึกเอกสารเป็นไฟล์ ' popup.html ' ในโฟลเดอร์ส่วนขยาย

ถัดไป แก้ไขไฟล์รายการเพื่อแสดง ' popup.html ' เมื่อมีการคลิก รหัสใหม่อยู่ด้านล่าง:

{

"name": "First Extension", "version": "1.0", "description": "I can code an extension", "manifest_version": 2, "browser_action": { "default_title": "First Extension", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png" " }, "default_popup": "popup.html" } }

อย่าลืมเครื่องหมายจุลภาค!

ตอนนี้ หากโค้ด HTML ต่อไปนี้ถูกเพิ่มลงใน popup.html ก็จะแสดงคำว่า 'Hello World' เมื่อคลิก

สวัสดีชาวโลก

ขั้นตอนที่ 5: ทำให้ดูดีและทำให้เป็นแบบโต้ตอบ

หากมีการพิมพ์บรรทัด HTML พื้นฐาน จะทำให้เสร็จสิ้นขั้นต่ำเปล่า ถ้า CSS (Cascading Style Sheets) ถูกเพิ่มเข้าไป มันจะดูเท่กว่า และถ้าเพิ่ม JavaScript เข้าไป ก็จะสามารถโต้ตอบได้มากขึ้น บทแนะนำนี้จะไม่อธิบายรายละเอียดเกี่ยวกับ HTML, JavaScript และ CSS แต่มีแหล่งข้อมูลออนไลน์มากมาย ด้านล่างนี้คือโค้ดสำหรับโปรแกรม 'Hello World' แบบง่าย จากนั้นเป็นโปรแกรมที่มีสีสันมากขึ้นตามลำดับ:

สวัสดีชาวโลก

สวัสดีชาวโลก

#hello{ สีพื้นหลัง: #000000; สี: #ff0000; เส้นขอบ: 8px เริ่มแรก #86a3b2; รัศมีเส้นขอบ: 50px; แปลง: หมุน (57deg); ช่องว่างภายใน: 10px; ผู้ใช้เลือก: ไม่มี; เคอร์เซอร์: เป้า; การเปลี่ยนแปลง: แปลง 2s; } #hello: hover { แปลง: หมุน (-417deg); }

ตัวอย่างที่สองนี้อาจสร้างความสับสนมากสำหรับผู้เริ่มต้น แต่นี่คือการแสดงให้คุณเห็นว่า CSS มีความสำคัญต่อโปรแกรม/ส่วนขยายอย่างไร ตอนนี้เป็นเวลาที่ดีที่จะหยุดพักและเรียนรู้การเขียนโค้ด HTML5 และใช้ developer.chrome.com เพื่อเป็นข้อมูลอ้างอิง อาจใช้เวลาสักครู่ แต่สามารถสร้างส่วนขยายที่ยอดเยี่ยมได้

ขั้นตอนที่ 6: เผยแพร่ไปยัง Chrome เว็บสโตร์

หากมีใครสร้างส่วนขยายที่ยอดเยี่ยมจริงๆ และพวกเขาต้องการแบ่งปันกับคนทั้งโลก พวกเขาสามารถเผยแพร่ได้ นั่นคือจุดของการต่อยอด บทช่วยสอนนี้พยายามอธิบายไฟล์ Manifest และวิธีใช้งานเท่านั้น และมีเพียงโปรแกรม 'Hello World'

สิ่งแรกที่ต้องทำเพื่อทำให้ส่วนขยายเป็นแบบสาธารณะคือทำให้โฟลเดอร์ส่วนขยายเป็นไฟล์ zip สิ่งที่สองที่ต้องทำคือไปที่ https://chrome.google.com/webstore/category/extensions และลงชื่อเข้าใช้บัญชี Google จากนั้น คลิกที่ปุ่มเฟืองการตั้งค่า จากนั้นคลิกที่ 'แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์' กดปุ่ม 'รายการใหม่' เพื่ออัปโหลดไฟล์ zip เมื่อถึงแล้ว จำเป็นต้องแก้ไข Store Listing, Privacy และราคา สามารถเผยแพร่ส่วนขยายได้อย่างง่ายดายหากส่งเข้ารับการตรวจสอบ

เมื่อส่วนขยายเสร็จสิ้นแล้ว ให้ดำเนินการโค้ดต่อ!