วิธีเขียนและสร้าง Chrome Extension เบื้องต้น

Chrome เป็นเบราว์เซอร์เว็บยอดนิยมที่สุดบนดาวเคราะห์ ตามสำรวจสัดส่วนตลาดเบราว์เซอร์เดสก์ท็อปของ Statcounter Chrome ควบครอง 65% ของตลาดในเดสก์ท็อป ณ สิ้นปี 2017

ด้วยอำนาจนำตลาดอย่างนี้ การออกแบบสำหรับ Chrome กลายเป็นความสำคัญสูงสุด ไปพร้อมกับส่วนขยาย (extensions): Chrome มีฐานผู้ใช้ใหญ่ที่สุดสำหรับส่วนขยาย โดยมีส่วขยาย ธีม และแอปหลายหมื่นรายการบน Chrome Web Store

หากคุณอยากสร้างรายได้จากแนวโน้มนี้ คุณสามารถสร้าง Chrome extension ของตัวเองได้ คุณจะต้องมีทักษะพัฒนาเว็บพื้นฐาน (HTML, CSS และ Javascript) รวมถึง JSON น้อยๆ เพื่อผูกมันเข้าด้วยกัน

เราจะทบทวนโครงสร้างพื้นฐานที่จำเป็นสำหรับการสร้าง Chrome extension เบื้องต้นในโพสต์นี้ หากต้องการมุมมองลึกซึ้งเกี่ยวกับความเป็นไปได้ที่มีอยู่ ดู Chrome Developer Extension Guide

การเขียน Chrome Extension เบื้องต้น: Manifest Destiny

สำหรับบทช่วยสอนนี้ เราจะสร้าง Chrome extension เบื้องต้นที่แสดงข้อความ popup เรียบง่ายเมื่อคลิก เราจะต้องมีไฟล์สำคัญ 2 ไฟล์: ไอคอน ("icon.png"), ไฟล์ HTML ("popup.html") และ manifest สำคัญที่สุด ("manifest.json") ไฟล์ทั้งหมดจะอยู่ในไดเรกทอรีชื่อ extension ของคุณ ในกรณีนี้คือ "Hello World"

Chrome extension ถูกกำหนดโดย manifest ชิ้นโค้ด JSON นี้บอก Chrome ว่าจะตีความ extension อย่างไร ไฟล์ไหนจะโหลด และจะโต้ตอบกับผู้ใช้อย่างไร

ไฟล์ manifest สำหรับ extension เบื้องต้นของเรามีลักษณะดังนี้:

{ "manifest_version": 2, "name": "Hello World!", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }

ไฟล์ manifest นี้จะวางไอคอนในแถบเครื่องมือของผู้ใช้ ที่เมื่อคลิก จะโหลดเนื้อหาของไฟล์ชื่อ "popup.html" นี่คือรายละเอียดส่วนที่เหลือ:

• manifest_version บอก Chrome ว่าเวอร์ชัน manifest markup ที่คุณทำงานอยู่คืออะไร สำหรับ extension สมัยใหม่ ต้องตั้งค่าเป็น 2
• name แสดงชื่อที่ extension จะโชว์ใน Chrome store และ "chrome://extensions"
• description แสดงข้อความอธิบายบน "chrome://extensions"
• browser_action โหลดไอคอนเข้าแถบเครื่องมือ ยังอนุญาตให้ extension ตอบสนอง input ของผู้ใช้โดยแสดง tooltip, popup หรือ badge ดูรายการเต็มของ browser_action ที่ทำได้
• default_icon แสดงพาธไปยังไอคอนจากไดเรกทอรีของ extension
• default_popup แสดงพาธไปยังไฟล์ที่จะโหลดเมื่อคลิกไอคอน extension
• permissions จำกัดภูมิภาคการทำงานของ extension activeTab เป็นที่พบบ่อยสุด อนุญาตให้ extension เข้าถึงแท็บหน้าสุด Google มีรายการสิทธิ์ทั้งหมดที่ extension ขอได้

หากต้องการเจาะลึกทุกอย่างที่ manifest ของ Chrome extension สามารถประกาศได้ ดูเอกสารของ Google เกี่ยวกับ extension manifests

การเขียน Chrome Extension เบื้องต้น: Popups

ตอนนี้เราเขียน manifest แล้ว เราสามารถกำหนดได้ว่า extension จะแสดงอะไร นั่นขึ้นอยู่กับไฟล์ "popup.html" ซึ่งจะแสดงเมื่อ extension โหลด นี่คือสิ่งที่เราจะใช้สำหรับโปรเจกต์นี้:

<!doctype html> <html> <head> <title>Hello World</title> </head> <style type="text/css"> body { margin: 5px; } h1 { font-size: 15px; text-align: center; } </style> <body> <h1>Hello World!</h1> </body> </html>

เห็นได้ว่านี่จะเรนเดอร์ข้อความที่จัดรูปแบบด้วย CSS หากต้องการเพิ่ม Javascript หรือ CSS ภายนอกใน extension นั้น ต้องประกาศสคริปต์ใน manifest ภายใต้ key content_scripts เมื่ออ้างอิงใน manifest แล้ว คุณสามารถโหลดสคริปต์เหล่านั้นได้ตามปกติ

การเขียน Chrome Extension เบื้องต้น: โหลดเข้า Chrome

เมื่อเราเขียนโค้ดพื้นฐานสำหรับ extension และหาไอคอนที่เหมาะสมแล้ว เราสามารถโหลดเข้า Chrome ได้

1. ไปที่ "chrome://extensions" และเปิด "Developer Mode" โดยติ๊กช่องเช็คมุมขวาบน

2. คลิกปุ่ม "Load unpacked extension..." และเลือกไดเรกทอรีของ extension

3. เมื่อโหลด extension แล้ว คุณจะเห็นไอคอนในแถบเมนู

4. คลิกที่ extension เพื่อดูเอฟเฟกต์ (ง่ายมาก)

สรุป: การขยาย Chrome Extension ของคุณ

เมื่อคุณเสร็จ extension และพร้อมเผยแพร่ คุณจะต้องสร้างบัญชีนักพัฒนา Chrome กระบวนการนั้นไม่ได้ตรงไปตรงมา แต่ Google ให้คำแนะนำครบถ้วนสำหรับการเผยแพร่ Chrome extension ที่นี่

มีอะไรทำได้อีกมากกับ Chrome extension ของคุณ แต่นั้นเกินขอบเขตของโพสต์นี้ หากอยากเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่ Chrome extensions ทำได้ ดู Chrome Developer Extension Guide ของ Google