วิธีเขียนส่วนขยาย Chrome: คำแนะนำทีละขั้นตอนพร้อมโค้ดตัวอย่าง

เผยแพร่แล้ว: 2022-04-10

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

Google Chrome มี API ต่างๆ มากมายสำหรับนักพัฒนาส่วนขยาย เช่น การเพิ่มหน้าใหม่ ป๊อปอัป การสร้างการแจ้งเตือน การตั้งค่าเครื่องมือค้นหาเริ่มต้น หรือแม้แต่การสร้างรายการเมนูบริบท (เมนูที่แสดงขึ้นเมื่อคุณคลิกขวา บนหน้า)

ความเป็นไปได้นั้นไร้ขีดจำกัด จากส่วนขยายที่แสดงคำว่า “สวัสดีชาวโลก!” ไปยังส่วนขยายที่ให้คุณถ่ายภาพหน้าจอของหน้าเว็บได้

วิธีเขียนส่วนขยาย Chrome

สารบัญ:

  • โครงสร้างของส่วนขยาย
  • กำลังโหลดส่วนขยาย
  • การเพิ่มส่วนต่อประสานผู้ใช้แบบป๊อปอัป
  • การใช้การแจ้งเตือน API
  • การเพิ่มรายการเมนูบริบท
  • การใช้ storage API เพื่อเก็บข้อมูล
  • การกระจายส่วนขยาย
วิธีสร้างส่วนขยาย #Google #Chrome: คำแนะนำทีละขั้นตอนสำหรับผู้เริ่มต้น
คลิกเพื่อทวีต

ในบทช่วยสอนนี้ เราจะแสดงวิธีเขียนส่วนขยาย Chrome ที่ส่งการแจ้งเตือนของเบราว์เซอร์จากเมนูป๊อปอัป นอกจากนี้ เราจะใช้เมนูบริบทและ API การจัดเก็บข้อมูลเพื่อให้เกิดประโยชน์สูงสุด เราเรียกมันว่า Notify! ด้วยเครื่องหมายอัศเจรีย์!

สร้างส่วนขยายของ Google Chrome

รหัสของส่วนขยายเป็นแบบสาธารณะบน GitHub ดังนั้นอย่าลังเลที่จะแยกและใช้งาน

วิธีเขียนส่วนขยาย Chrome: โครงสร้าง

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

นอกจากนี้ หากคุณต้องการเขียนส่วนขยาย Chrome สำหรับ Chrome เว็บสโตร์ โปรดดูนโยบายวัตถุประสงค์เดียว

เริ่มต้นด้วยการสร้างโฟลเดอร์ใหม่ชื่อ notify บนอุปกรณ์ของคุณ โฟลเดอร์นี้จะมีทุกอย่างที่จะเป็นส่วนหนึ่งของส่วนขยายของคุณ

ตอนนี้ คุณต้องสร้างไฟล์รายการที่จะมีข้อมูลทั้งหมดเกี่ยวกับส่วนขยายของเรา สร้างไฟล์ชื่อ manifest.json และใส่รหัสต่อไปนี้: 

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 ภาษารหัส: JSON / JSON พร้อมความคิดเห็น ( json )

อย่างที่คุณเห็น จนถึงตอนนี้ มีเฉพาะข้อมูลเมตาเกี่ยวกับส่วนขยายของคุณ เช่น ชื่อ คำอธิบาย และเวอร์ชัน manifest_version จะบอก Chrome ว่าคุณกำลังใช้ส่วนขยาย API เวอร์ชันใด

กำลังโหลดส่วนขยาย

หลังจากที่คุณมีไฟล์รายการแล้ว คุณสามารถโหลดส่วนขยายของคุณในเบราว์เซอร์ Chrome:

กำลังโหลดส่วนขยายไปยัง Google Chrome

เปิดหน้าการจัดการส่วนขยายโดยไปที่ chrome://extensions หรือเปิดจากเมนู ส่วนขยาย ในการตั้งค่าก็ได้

เปิดใช้งาน โหมดนักพัฒนาซอฟต์แวร์ แล้วใช้ปุ่ม Load unpacked เพื่อเลือกไดเร็กทอรีส่วนขยายของคุณ

ดูเถิดการขยายของคุณ! เมื่อโหลดส่วนขยายของคุณแล้ว คุณสามารถปรับปรุงทีละขั้นตอนและสังเกตการเปลี่ยนแปลงได้

ตรวจสอบให้แน่ใจว่าคุณเพิ่มไอคอนสำหรับส่วนขยายของคุณไปยังโฟลเดอร์ assets/icons/ มิฉะนั้น ไอคอนเริ่มต้นจะปรากฏขึ้น

การเพิ่มส่วนต่อประสานผู้ใช้แบบป๊อปอัป

มาดำเนินการต่อโดยเพิ่มอินเทอร์เฟซผู้ใช้บางส่วนลงในส่วนขยายซึ่งผู้คนสามารถโต้ตอบกับตัวเลือกที่มีให้

มีหลายวิธีในการทำเช่นนี้ เช่น การเพิ่มทั้งหน้า แต่ป๊อปอัปมักเป็นวิธีที่จะไปสำหรับส่วนขยายส่วนใหญ่

ในการเพิ่มป๊อปอัปให้กับส่วนขยาย คุณจะต้องเพิ่มสิ่งนี้ในไฟล์ manifest.json ของคุณ: 

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

ด้วยวิธีนี้ คุณจะบอกส่วนขยายถึงตำแหน่งของไฟล์ HTML ของป๊อปอัปและไอคอนเริ่มต้น นี่เป็นเพียงไอคอนเริ่มต้นเนื่องจาก API ช่วยให้คุณเปลี่ยนไอคอนได้ทุกที่ ตัวอย่างเช่น หากคุณสร้างการทดสอบ Google PageSpeed ​​เราสามารถแสดงไอคอนต่างๆ บนเว็บไซต์ตามการจัดอันดับหน้าเว็บของพวกเขา

ป๊อปอัปส่วนขยาย

ป๊อปอัปของส่วนขยาย Google Chrome

ตอนนี้คุณสามารถเพิ่มโค้ด HTML ของป๊อปอัปลงในไฟล์ได้ดังที่เราทำในตัวอย่างของเรา:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 ภาษารหัส: HTML, XML ( xml )

ไฟล์ HTML นี้ยังเชื่อมโยงกับสไตล์ชีตและสคริปต์เพื่อเพิ่มสไตล์และการทำงานให้กับป๊อปอัปของเรา

หากคุณกำลังติดตาม คุณสามารถรับโค้ด CSS ได้จากที่นี่ เราจะเพิ่ม JavaScript ลงในไฟล์ในภายหลังในบทช่วยสอนนี้

จนถึงตอนนี้ คุณได้สร้างส่วนขยายของ Google Chrome ที่มีป๊อปอัป และใช้โค้ดเพียงไม่กี่บรรทัด ดังที่เราได้กล่าวไว้ในตอนเริ่มต้น การสร้างส่วนขยายของ Google Chrome นั้นง่ายมาก!

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

การใช้การแจ้งเตือน API

ตามชื่อส่วนขยาย มันเป็นส่วนขยายการแจ้งเตือน มาเพิ่มกัน!

ก่อนที่คุณจะใช้ API บางตัว คุณต้องระบุการอนุญาตสำหรับ API เหล่านี้ในไฟล์ manifest.json เหตุผลหนึ่งที่ต้องทำคือเพื่อให้ผู้ใช้ส่วนขยายของคุณรู้ว่าส่วนขยายของคุณขอสิทธิ์ใดก่อนทำการติดตั้ง

สำหรับการแจ้งเตือน ให้ทำดังนี้: 

 "permissions" : [ "notifications" ],
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

คุณต้องเพิ่มพนักงานบริการในส่วนขยายเพื่อส่งการแจ้งเตือน คุณต้องเพิ่มสิ่งนี้ในรายการของคุณ: 

 "background" : { "service_worker" : "background.js" },
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

คุณต้องมีพนักงานบริการสำหรับ API การแจ้งเตือน เนื่องจากไม่สามารถใช้งานได้โดยตรงจากไฟล์ popup.js

ในไฟล์ background.js คุณต้องเพิ่มรหัสต่อไปนี้เพื่อส่งการแจ้งเตือน: 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

ที่นี่เราใช้ตัวฟังเหตุการณ์ onMessage เพื่อรับทริกเกอร์การแจ้งเตือนแบบพุชจากป๊อปอัป

เรายังใช้วิธี create เพื่อสร้างการแจ้งเตือนใหม่ การแจ้งเตือนสามารถมีได้หลายประเภท แต่ที่นี่จะใช้ประเภท "พื้นฐาน" คุณควรดูตัวเลือกทั้งหมดที่มี

เมื่อวิธีการ create เข้าที่แล้ว คุณสามารถเริ่มการทำงานจากไฟล์ popup.js ดังนี้: 

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

ที่นี่ การดำเนินการ sendMessage ถูกใช้เพื่อทริกเกอร์การแจ้งเตือน แล้วโว้ย! เรามีส่วนขยายที่เรียกการแจ้งเตือน

API การแจ้งเตือนของ Chrome

ตรวจสอบให้แน่ใจว่าคุณใช้ Google Chrome เวอร์ชันล่าสุด และให้สิทธิ์ในการทริกเกอร์การแจ้งเตือน ในระยะสั้นอย่าเป็นเหมือนฉันที่ใช้เวลาหลายชั่วโมงในการพยายามคิดว่าเหตุใดจึงไม่ปรากฏการแจ้งเตือน

การเพิ่มรายการเมนูบริบท

ตามที่กล่าวไว้ในบทนำ เมนูบริบทคือเมนูที่ปรากฏเมื่อคลิกขวา:

เมนูบริบท Google Chrome

อาจมีสาเหตุหลายประการที่ส่วนขยายของคุณอาจมีรายการเมนูบริบท ตัวอย่างที่โดดเด่นอย่างหนึ่งคือการเลือกข้อความด้วยเคอร์เซอร์แล้วค้นหาใน Google

คุณสามารถเพิ่มรายการลงในเมนูบริบทได้มากเท่าที่คุณต้องการ แต่ถ้าส่วนขยายของคุณเพิ่มมากกว่าหนึ่งรายการ รายการเหล่านั้นจะถูกยุบภายใต้รายการหลักหนึ่งรายการ

สำหรับสิ่งนี้ คุณต้องเพิ่มการอนุญาตให้กับไฟล์รายการของคุณ: 

 "permissions" : [ "contextMenus" , "notifications" ],
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

เมื่อคุณได้เพิ่มการอนุญาตสำหรับ contextMenus คุณสามารถเพิ่มสิ่งนี้ในไฟล์ background.js ของคุณ: 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

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

แอ็คชัน contextMenus.create ใช้เพื่อเพิ่มรายการในเมนูบริบท มีการเชื่อมต่อกับ onInstalled เนื่องจากจำเป็นต้องเริ่มต้นเพียงครั้งเดียว

หลังจากนั้น ในทำนองเดียวกันกับขั้นตอนก่อนหน้า เราใช้ contextMenus.onClicked เพื่อจับภาพการคลิกและทริกเกอร์การแจ้งเตือน

เมนูบริบทของ Google Chrome

อาจเป็นวิธีที่ดีมากในการรวมเข้ากับฟังก์ชันการทำงานของส่วนขยายของคุณ หากคุณมองไปรอบๆ ส่วนขยายที่ใช้บนเบราว์เซอร์ของคุณ คุณจะพบส่วนขยายจำนวนมากที่ใช้พื้นที่นี้อย่างชาญฉลาดเพื่อปรับปรุงประสบการณ์ของส่วนขยาย

การใช้ storage API เพื่อเก็บข้อมูล

เมื่อส่วนขยายของคุณมีคุณลักษณะบางอย่างที่จะแสดง มาดูที่ Storage API กัน Storage API มีประโยชน์เมื่อคุณต้องการจัดเก็บข้อมูลผู้ใช้บางส่วนในส่วนขยายของคุณ

Storage API มีสองประเภท: โลคัลและซิงค์ ที่เก็บข้อมูลในเครื่องตามชื่อนั้นจะถูกบันทึกไว้ในเบราว์เซอร์ของคุณและคงอยู่ในเครื่อง ในการเปรียบเทียบ การซิงค์ที่เก็บข้อมูลช่วยให้สามารถซิงค์ข้อมูลระหว่างเบราว์เซอร์โดยใช้บัญชี Google เดียวกัน สำหรับจุดประสงค์ของเรา เราใช้ที่เก็บข้อมูลในเครื่อง

ขั้นแรก คุณต้องเพิ่มการอนุญาตการจัดเก็บในไฟล์รายการของคุณ: 

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

หลังจากนี้ คุณสามารถใช้ storage, storage.local.get และ storage.local.set วิธีการดึงหรือบันทึกข้อมูล

คุณสามารถเพิ่มรหัสต่อไปนี้ในไฟล์ popup.js ของคุณ: 

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

รหัสนี้ทำสองสิ่ง:

  • อัปเดตจำนวนการแจ้งเตือนในป๊อปอัปเมื่อเราเปิดป๊อปอัปหรือค่าที่เก็บข้อมูลเปลี่ยนแปลง สำหรับการฟังการเปลี่ยนแปลงการจัดเก็บ ใช้ storage.onChanged
  • ส่วนหนึ่ง เราล้างที่เก็บข้อมูลเมื่อผู้ใช้คลิกที่ปุ่มรีเซ็ต

รหัสด้านบนทำหน้าที่รับการนับล่าสุดและอัปเดต ตอนนี้การตั้งค่าข้อมูลยังคงอยู่ เพื่อสิ่งนี้ คุณสามารถอัปเดตฟังก์ชัน notify ของเราด้วยสิ่งนี้: 

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 ภาษารหัส: JavaScript ( จาวาสคริปต์ )

ที่นี่เราได้รับข้อมูลการจัดเก็บข้อมูลล่าสุดแล้วอัปเดตด้วยการนับล่าสุด

ในทำนองเดียวกัน คุณสามารถใช้ chrome.storage.sync API เพื่อซิงค์ตัวเลือกระหว่างเบราว์เซอร์ได้

การกระจายส่วนขยาย

ยินดีด้วย! คุณทำได้แล้ว! คุณได้สร้างส่วนขยายของ Google Chrome ที่ใช้ส่วนต่างๆ ของประสบการณ์ Google Chrome ได้สำเร็จ ได้แก่:

  • ป๊อปอัพ
  • การแจ้งเตือน API
  • เมนูบริบท
  • API การจัดเก็บ

หากคุณต้องการดูรหัสสำหรับส่วนขยายนี้ คุณสามารถรับได้ในที่เก็บ Notify GitHub นี้

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

หากคุณต้องการสำรวจตัวเลือกอื่นๆ ที่ Google Chrome เสนอให้กับนักพัฒนาส่วนขยาย เราขอแนะนำให้ตรวจสอบเอกสารอย่างเป็นทางการ

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

คุณอาจสนใจ:

  • 18 หน่วยงาน WordPress ที่ดีที่สุดสำหรับการพัฒนาเว็บ การออกแบบ การตลาด และอื่นๆ
  • 15 ซอฟต์แวร์ออกแบบเว็บไซต์ที่ดีที่สุดในตลาดตอนนี้
  • 9 โซลูชันเครื่องมือสร้างเว็บไซต์ที่ดีที่สุดเมื่อเปรียบเทียบและทดสอบแล้ว
วิธีสร้าง Google #Chrome #extension: คำแนะนำทีละขั้นตอนสำหรับผู้เริ่มต้น
คลิกเพื่อทวีต

…

อย่าลืมเข้าร่วมหลักสูตรเร่งรัดของเราในการเร่งความเร็วไซต์ WordPress ของคุณ ด้วยการแก้ไขง่ายๆ บางอย่าง คุณสามารถลดเวลาในการโหลดลงได้ถึง 50-80%:

สมัครสมาชิกทันที รูปภาพ

เค้าโครงและการนำเสนอโดย Chris Fitzgerald และ Karol K.