ภาพรวมสถาปัตยกรรม

ส่วนขยายคือชุดไฟล์ HTML, CSS, JavaScript, รูปภาพ และไฟล์อื่นๆ ที่ใช้ในแพลตฟอร์มเว็บซึ่งบีบอัดเป็นไฟล์ Zip และปรับแต่งประสบการณ์การท่องเว็บใน Google Chrome ส่วนขยายสร้างขึ้นโดยใช้เทคโนโลยีเว็บและใช้ API เดียวกันกับที่เบราว์เซอร์มีให้สำหรับเว็บแบบเปิดได้

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

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

ไฟล์ส่วนขยาย

ส่วนขยายมีไฟล์หลายประเภทและมีจำนวนไดเรกทอรีแตกต่างกัน แต่ทุกส่วนขยายต้องมี [ไฟล์ Manifest][docs-manifest] ส่วนขยายพื้นฐานแต่มีประโยชน์บางส่วนอาจประกอบด้วยเพียงไฟล์ Manifest และไอคอนในแถบเครื่องมือ

ไฟล์ Manifest ชื่อ manifest.json จะให้ข้อมูลเกี่ยวกับส่วนขยายแก่เบราว์เซอร์ เช่น ไฟล์ที่สำคัญที่สุดและความสามารถที่ส่วนขยายอาจใช้

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

ส่วนขยายต้องมีไอคอนที่อยู่ในแถบเครื่องมือของเบราว์เซอร์ ไอคอนในแถบเครื่องมือช่วยให้เข้าถึงได้ง่ายและช่วยให้ผู้ใช้ทราบว่ามีการติดตั้งส่วนขยายใดไว้บ้าง ผู้ใช้ส่วนใหญ่จะโต้ตอบกับส่วนขยายที่ ใช้ ป๊อปอัป โดยคลิกไอคอน

ส่วนขยาย Google Mail Checker นี้ใช้ การดำเนินการของเบราว์เซอร์:

ภาพหน้าจอของส่วนขยาย Google Mail Checker

ส่วนขยาย Mappy นี้ใช้ การดำเนินการของหน้าเว็บ และ สคริปต์ เนื้อหา:

ภาพหน้าจอของส่วนขยาย Mappy

การอ้างอิงไฟล์

คุณอ้างอิงไฟล์ของส่วนขยายได้โดยใช้ URL สัมพัทธ์ เช่นเดียวกับไฟล์ในหน้า HTML ทั่วไป

<img src="images/my_image.png">

นอกจากนี้ คุณยังเข้าถึงแต่ละไฟล์ได้โดยใช้ Absolute URL

chrome-extension://EXTENSION_ID/PATH_TO_FILE

ใน Absolute URL EXTENSION_ID คือตัวระบุที่ไม่ซ้ำกันซึ่งระบบส่วนขยายสร้างขึ้นสำหรับส่วนขยายแต่ละรายการ คุณดูรหัสของส่วนขยายที่โหลดทั้งหมดได้โดยไปที่ URL chrome://extensions PATH_TO_FILE คือตำแหน่งของไฟล์ในโฟลเดอร์ระดับบนสุดของ ส่วนขยาย ซึ่งตรงกับ URL สัมพัทธ์

รหัสส่วนขยายอาจเปลี่ยนแปลงได้ขณะทำงานกับส่วนขยายที่คลายการแพคข้อมูลแล้ว โดยเฉพาะอย่างยิ่ง รหัสของส่วนขยายที่คลายการแพคข้อมูลแล้วจะเปลี่ยนแปลงหากโหลดส่วนขยายจากไดเรกทอรีอื่น และรหัสจะเปลี่ยนแปลงอีกครั้งเมื่อมีการสร้างแพ็กเกจส่วนขยาย หากโค้ดของส่วนขยายอาศัย Absolute URL ก็สามารถใช้ chrome.runtime.getURL() วิธีเพื่อหลีกเลี่ยงการฮาร์ดโค้ดรหัสระหว่างการพัฒนา

สถาปัตยกรรม

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

สคริปต์เบื้องหลัง

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

องค์ประกอบ UI

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

หน้า UI ของส่วนขยาย เช่น ป๊อปอัป สามารถมีหน้า HTML ทั่วไปที่มีตรรกะ JavaScript นอกจากนี้ ส่วนขยายยังเรียกใช้ tabs.create หรือ window.open() เพื่อแสดง ไฟล์ HTML เพิ่มเติมที่มีอยู่ในส่วนขยายได้ด้วย

ส่วนขยายที่ใช้การดำเนินการของหน้าเว็บและป๊อปอัปสามารถใช้ declarative content API เพื่อตั้งกฎในสคริปต์เบื้องหลังสำหรับเวลาที่ป๊อปอัปพร้อมใช้งานสำหรับผู้ใช้ เมื่อตรงตามเงื่อนไข สคริปต์เบื้องหลังจะสื่อสารกับป๊อปอัปเพื่อให้ไอคอนของป๊อปอัปคลิกได้สำหรับผู้ใช้

หน้าต่างเบราว์เซอร์ที่มีการทำงานของหน้าเว็บซึ่งแสดงป๊อปอัป

สคริปต์เนื้อหา

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

หน้าต่างเบราว์เซอร์ที่มีการดำเนินการในหน้าเว็บและ Content Script

สคริปต์เนื้อหาสามารถสื่อสารกับส่วนขยายหลักได้โดยการแลกเปลี่ยน ข้อความ และจัดเก็บค่าโดยใช้ Storage API

แสดงเส้นทางการสื่อสารระหว่าง Content Script กับส่วนขยายหลัก

หน้าตัวเลือก

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

การใช้ Chrome API

นอกจากจะมีสิทธิ์เข้าถึง API เดียวกันกับหน้าเว็บแล้ว ส่วนขยายยังใช้ API เฉพาะของส่วนขยายที่สร้างการผสานรวมอย่างแน่นแฟ้นกับเบราว์เซอร์ได้ด้วย ทั้งส่วนขยายและ หน้าเว็บสามารถเข้าถึงเมธอดมาตรฐาน window.open() เพื่อเปิด URL ได้ แต่ส่วนขยายสามารถ ระบุหน้าต่างที่จะแสดง URL ได้โดยใช้เมธอด tabs.create ของ Chrome API แทน

เมธอดแบบอะซิงโครนัสกับเมธอดแบบซิงโครนัส

เมธอด Chrome API ส่วนใหญ่เป็นแบบอะซิงโครนัส ซึ่งจะแสดงผลทันทีโดยไม่ต้องรอให้การดำเนินการเสร็จสิ้น หากส่วนขยายต้องการทราบผลลัพธ์ของการดำเนินการแบบอะซิงโครนัส ก็สามารถส่งฟังก์ชัน Callback ไปยังเมธอดได้ ระบบจะเรียกใช้ Callback ในภายหลัง ซึ่งอาจเป็นเวลาที่นานมากหลังจากที่เมธอดแสดงผล

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

หากเมธอด tabs.query เป็นแบบซิงโครนัส เมธอดดังกล่าวอาจมีลักษณะคล้ายกับตัวอย่างด้านล่าง

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

วิธีนี้จะล้มเหลวเนื่องจาก query() เป็นแบบอะซิงโครนัส เมธอดจะแสดงผลโดยไม่ต้องรอให้งานเสร็จสมบูรณ์และไม่แสดงผลค่าใดๆ เมธอดจะเป็นแบบอะซิงโครนัสเมื่อพารามิเตอร์ Callback พร้อมใช้งานในลายเซ็นของเมธอด

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

หากต้องการค้นหาแท็บและอัปเดต URL อย่างถูกต้อง ส่วนขยายต้องใช้พารามิเตอร์ Callback

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

ในโค้ดด้านบน บรรทัดจะทำงานตามลำดับต่อไปนี้ 1, 4, 2 ระบบจะเรียกใช้ฟังก์ชัน Callback ที่ระบุไว้ใน query() จากนั้นจึงเรียกใช้บรรทัดที่ 2 แต่จะทำหลังจากที่ข้อมูลเกี่ยวกับแท็บที่เลือกอยู่ในปัจจุบันพร้อมใช้งานแล้วเท่านั้น ซึ่งจะเกิดขึ้นหลังจากที่ query() แสดงผลแล้ว แม้ว่า update() จะเป็นแบบอะซิงโครนัส แต่โค้ดก็ไม่ได้ใช้พารามิเตอร์ Callback เนื่องจากส่วนขยายไม่ได้ดำเนินการใดๆ กับผลลัพธ์ของการอัปเดต

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

เมธอดนี้จะแสดงผล URL เป็น string แบบซิงโครนัสและไม่ทำงานแบบอะซิงโครนัสอื่นๆ

รายละเอียดเพิ่มเติม

ดูข้อมูลเพิ่มเติมได้ที่เอกสารอ้างอิง Chrome API และดูวิดีโอด้านล่าง

การสื่อสารระหว่างหน้าเว็บ

คอมโพเนนต์ต่างๆ ในส่วนขยายมักจะต้องสื่อสารกัน หน้า HTML ต่างๆ สามารถค้นหาหน้า HTML อื่นๆ ได้โดยใช้เมธอด chrome.extension เช่น getViews() และ getBackgroundPage() เมื่อหน้าเว็บหนึ่งมีการอ้างอิงไปยังหน้าส่วนขยายอื่นๆ หน้าเว็บแรกจะเรียกใช้ฟังก์ชันในหน้าอื่นๆ และจัดการ DOM ของหน้าเหล่านั้นได้ นอกจากนี้ คอมโพเนนต์ทั้งหมดของ ส่วนขยายยังเข้าถึงค่าที่จัดเก็บไว้โดยใช้ Storage API และสื่อสารผ่าน การส่งข้อความได้ด้วย

การบันทึกข้อมูลและโหมดไม่ระบุตัวตน

ส่วนขยายสามารถบันทึกข้อมูลได้โดยใช้ storage API, HTML5 web storage API หรือโดยการส่งคำขอไปยังเซิร์ฟเวอร์ซึ่งส่งผลให้มีการบันทึกข้อมูล เมื่อส่วนขยายต้องการบันทึกข้อมูล ให้พิจารณาก่อนว่าข้อมูลนั้นมาจากหน้าต่างที่ไม่ระบุตัวตนหรือไม่ โดยค่าเริ่มต้น ส่วนขยายจะไม่ทำงานในหน้าต่างที่ไม่ระบุตัวตน

โหมดไม่ระบุตัวตนรับประกันว่าหน้าต่างจะไม่ทิ้งร่องรอยใดๆ ไว้ เมื่อจัดการข้อมูลจากหน้าต่างที่ไม่ระบุตัวตน ส่วนขยายควรปฏิบัติตามคำรับประกันนี้ หากส่วนขยายบันทึกประวัติการท่องเว็บตามปกติ ก็ไม่ควรบันทึกประวัติจากหน้าต่างที่ไม่ระบุตัวตน อย่างไรก็ตาม ส่วนขยายสามารถจัดเก็บค่ากำหนดการตั้งค่าจากหน้าต่างใดก็ได้ ไม่ว่าจะเป็นหน้าต่างที่ไม่ระบุตัวตนหรือไม่ก็ตาม

หากต้องการตรวจหาว่าหน้าต่างอยู่ในโหมดไม่ระบุตัวตนหรือไม่ ให้ตรวจสอบพร็อพเพอร์ตี้ incognito ของออบเจ็กต์ tabs.Tab หรือ windows.Window ที่เกี่ยวข้อง

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

ดำเนินการขั้นตอนถัดไป

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

  • ดูข้อมูลเกี่ยวกับตัวเลือกที่มีให้สำหรับการแก้ไขข้อบกพร่องของส่วนขยายได้ในบทแนะนำ การแก้ไขข้อบกพร่อง
  • ส่วนขยาย Chrome มีสิทธิ์เข้าถึง API ที่มีประสิทธิภาพซึ่งเหนือกว่า API ที่มีอยู่ในเว็บแบบเปิด เอกสารประกอบ API chrome.* เอกสาร API จะอธิบาย API แต่ละรายการ
  • ภาพรวมการพัฒนาส่วนขยายมีลิงก์เพิ่มเติมอีกมากมายไปยัง เอกสารประกอบที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูง