การสร้าง Chrome extension เป็นกระบวนการที่ตรงไปตรงมา เมื่อคุณเสร็จ คุณจะสามารถใช้งานบนคอมพิวเตอร์ของคุณเพื่อเพิ่มประสิทธิภาพการทำงานของเบราว์เซอร์
มีองค์ประกอบพื้นฐานบางอย่างที่เบราว์เซอร์ต้องการก่อนที่ extension จะทำงานเต็มที่ เราจะกล่าวถึงทั้งหมดด้านล่าง รวมถึงวิธีทำให้ custom extension ของคุณทำงานใน Chrome โดยไม่ต้องอัปโหลดหรือแชร์กับใคร
การสร้าง Chrome extension ที่ซับซ้อนเป็นกระบวนการที่ละเอียดกว่าที่คุณจะเห็นด้านล่างมาก แต่กระบวนการทั่วไปเหมือนกัน อ่านต่อเพื่อเรียนรู้วิธีสร้าง Chrome extension ที่คุณสามารถเริ่มใช้ได้วันนี้
เคล็ดลับ: เพื่อดูว่า extension ของคุณเองอาจเก่งแค่ไหน ให้ดู Chrome extensions สุดเจ๋งเหล่านี้
วิธีสร้าง Chrome Extension
ใช้คู่มือนี้ คุณจะสร้าง Chrome extension เรียบง่ายที่แสดงรายการเว็บไซต์โปรดของคุณ มันปรับแต่งได้เต็มที่และอัปเดตง่ายมาก
นี่คือสิ่งที่ต้องทำ:
- สร้างโฟลเดอร์ที่จะเก็บไฟล์ทั้งหมดที่ประกอบ extension
- สร้างไฟล์พื้นฐานที่ extension ต้องการ: manifest.json, popup.html, background.html, styles.css
- เปิด popup.html ใน text editor แล้ววางโค้ดทั้งหมดด้านล่าง ให้แน่ใจว่าบันทึกเมื่อเสร็จ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Favorite Sites</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <ul id="myUL"> <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li> <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li> <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li> </ul> </body> </html>
คุณสามารถแก้ไขลิงก์และข้อความลิงก์ได้ตามต้องการ หรือหากต้องการทำ Chrome extension เหมือนเรา ให้เก็บทุกอย่างเหมือนเดิม
- เปิด manifest.json ใน text editor คัดลอก/วางโค้ดต่อไปนี้:
{
“update_url”: “https://clients2.google.com/service/update2/crx”,
“manifest_version”: 2,
“name”: “Favorite Sites”,
“description”: “All my favorite websites.”,
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},
“background”: {
“page”:”background.html”
},
“browser_action” : {
“default_icon” : “icon.png”,
“default_title” : “Favorite Sites”,
“default_popup”: “popup.html”
}
}
ส่วนที่แก้ไขได้ของโค้ดนี้รวมถึง name, description, และ default_title
- เปิด styles.css และวางโค้ดต่อไปนี้ นี่คือสิ่งที่ตกแต่งเมนูป๊อปอัปให้ดูน่าสนใจและใช้งานง่ายขึ้น
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 300px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
font-family: ‘Noto Sans’, sans-serif;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
มีอะไรมากที่คุณสามารถเปลี่ยนในไฟล์ CSS ลองเล่นกับตัวเลือกเหล่านี้หลังจากสร้าง Chrome extension เพื่อปรับแต่งตามชอบ
- สร้างไอคอนสำหรับ extension และตั้งชื่อ icon.png วางไว้ในโฟลเดอร์ Chrome extension ของคุณ ตามที่เห็นในโค้ดข้างต้น คุณสามารถสร้างไอคอนแยกสำหรับขนาดเหล่านี้: 16×16 pixels, 32×32, และอื่นๆ
เคล็ดลับ: Google มีข้อมูลเพิ่มเติมเกี่ยวกับการสร้าง Chrome extensions มีตัวอย่างอื่นๆ และตัวเลือกขั้นสูงที่เกินกว่าขั้นตอนง่ายๆ ที่เราแสดงไว้ที่นี่
วิธีเพิ่ม Custom Extension เข้า Chrome
ตอนนี้คุณสร้าง Chrome extension แล้ว ก็ถึงเวลาเพิ่มเข้าเบราว์เซอร์ เพื่อให้คุณใช้งานไฟล์ที่เพิ่งสร้างได้จริง การติดตั้ง custom extension เกี่ยวข้องกับขั้นตอนที่ต่างจากการติดตั้ง Chrome extension ปกติ
- จากเมนู Chrome ไปที่ More tools > Extensions หรือพิมพ์ chrome://extensions/ ในแถบที่อยู่
- เลือกปุ่มถัดจาก Developer mode หากยังไม่ได้เลือก จะเปิดโหมดพิเศษที่ให้คุณนำเข้า Chrome extensions ของตัวเองได้
- ใช้ปุ่ม Load unpacked ที่ด้านบนของหน้านั้นเพื่อเลือกโฟลเดอร์ที่คุณสร้างในขั้นตอน 1 ข้างต้น
- ยอมรับพรอมป์ทหากมี มิฉะนั้น custom-built Chrome extension ของคุณจะแสดงพร้อมกับอื่นๆ ที่มุมขวาบนของเบราว์เซอร์
แก้ไข Chrome Extension ของคุณ
ตอนนี้ Chrome extension ของคุณใช้งานได้แล้ว คุณสามารถเปลี่ยนแปลงเพื่อทำให้เป็นของคุณเอง
ไฟล์ styles.css ควบคุมลักษณะที่ extension แสดงออก ดังนั้นคุณสามารถปรับสไตล์รายการโดยรวม และเปลี่ยนสีหรือแบบอักษร W3Schools เป็นหนึ่งในแหล่งข้อมูลที่ดีที่สุดเพื่อเรียนรู้สิ่งต่างๆ ที่คุณทำได้กับ CSS
เพื่อสลับลำดับการแสดงเว็บไซต์ หรือเพิ่ม/ลบไซต์ ให้แก้ไขไฟล์ popup.html เพียงแค่เก็บการแก้ไขไว้ที่ URL และชื่อเท่านั้น ตัวอักษรอื่นๆ เช่น <li> และ <html> จำเป็นและไม่ควรเปลี่ยน HTML Tutorial บน W3Schools เป็นที่ดีสำหรับเรียนรู้ภาษานั้นเพิ่มเติม
