วิธีเขียนและสร้างส่วนขยายพื้นฐานของ Chrome

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

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

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

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

การเขียนส่วนขยายพื้นฐานของ Chrome:พรหมลิขิต

สำหรับบทช่วยสอนนี้ เราจะสร้างส่วนขยายพื้นฐานของ Chrome ที่แสดงข้อความป๊อปอัปอย่างง่ายเมื่อคลิก เราต้องการไฟล์สำคัญสองสามไฟล์:ไอคอน (“icon.png”), ไฟล์ HTML (“popup.html”) และรายการสำคัญทั้งหมด (“manifest.json”) ไฟล์ทั้งหมดเหล่านี้จะอยู่ภายในไดเร็กทอรีที่มีชื่อนามสกุลของคุณ ในกรณีนี้เรียกว่า “สวัสดีชาวโลก”

วิธีเขียนและสร้างส่วนขยายพื้นฐานของ Chrome

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

ไฟล์ Manifest สำหรับนามสกุลพื้นฐานของเรามีลักษณะดังนี้:

{
    "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 ว่าคุณใช้งานมาร์กอัปรายการเวอร์ชันใด สำหรับส่วนขยายที่ทันสมัย คุณจะต้องตั้งค่านี้เป็น 2.
name แสดงชื่อที่ส่วนขยายจะแสดงใน Chrome Store และ “chrome://extensions”
description แสดงข้อความอธิบายที่แสดงบน “chrome://extensions”
browser action โหลดไอคอนลงในแถบเครื่องมือ นอกจากนี้ยังอนุญาตให้ส่วนขยายตอบสนองต่อการป้อนข้อมูลของผู้ใช้ด้วยการแสดงคำแนะนำเครื่องมือ ป๊อปอัปหรือตราสัญลักษณ์ ดูรายการทั้งหมดที่ “browser_action” ทำได้
default_icon แสดงเส้นทางไปยังไอคอนจากไดเรกทอรีของส่วนขยาย
default_popup แสดงเส้นทางไปยังไฟล์ที่จะโหลดเมื่อมีการคลิกไอคอนของส่วนขยาย
permissions จำกัดขอบเขตการทำงานของส่วนขยาย activeTab เป็นแบบทั่วไป ทำให้ส่วนขยายสามารถเข้าถึงแท็บด้านหน้าสุดได้ Google แสดงรายการการอนุญาตทั้งหมดที่ส่วนขยายสามารถขอได้

หากคุณต้องการเจาะลึกทุกสิ่งที่รายการของส่วนขยาย Chrome สามารถประกาศได้ โปรดดูเอกสารของ Google ในรายการส่วนขยาย

การเขียนส่วนขยายพื้นฐานของ Chrome:ป๊อปอัป

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

<!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 ภายนอกในส่วนขยายของคุณ จำเป็นต้องมีการประกาศสคริปต์ในรายการ ภายใต้ content_scripts กุญแจ. เมื่อคุณมีการอ้างอิงในรายการแล้ว คุณสามารถโหลดสคริปต์เหล่านั้นได้ตามปกติ

การเขียนส่วนขยายพื้นฐานของ Chrome:กำลังโหลดลงใน Chrome

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

1. ไปที่ “chrome://extensions” และเปิด “Developer Mode” โดยทำเครื่องหมายที่ช่องด้านบนขวา

วิธีเขียนและสร้างส่วนขยายพื้นฐานของ Chrome

2. คลิกปุ่ม “โหลดส่วนขยายที่คลายการแพ็ก…” และเลือกไดเรกทอรีของส่วนขยาย

วิธีเขียนและสร้างส่วนขยายพื้นฐานของ Chrome

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

วิธีเขียนและสร้างส่วนขยายพื้นฐานของ Chrome

4. คลิกที่ส่วนขยายเพื่อดูเอฟเฟกต์ (แบบธรรมดามาก)

วิธีเขียนและสร้างส่วนขยายพื้นฐานของ Chrome

บทสรุป:การขยายส่วนขยาย Chrome ของคุณ

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

เห็นได้ชัดว่าคุณสามารถทำอะไรกับส่วนขยาย Chrome ของคุณได้อีกมากมาย แต่นั่นค่อนข้างจะเกินขอบเขตของโพสต์นี้ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับทุกสิ่งที่ส่วนขยาย Chrome ทำได้ โปรดดูคู่มือส่วนขยายสำหรับนักพัฒนาซอฟต์แวร์ Chrome ของ Google