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

ส่วนขยายคือชุดไฟล์ ZIP, HTML, CSS, JavaScript, รูปภาพ และไฟล์อื่นๆ ที่ใช้ในเว็บ ที่กำหนดประสบการณ์การท่องเว็บใน 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">

นอกจากนี้ ยังเข้าถึงแต่ละไฟล์ได้โดยใช้ URL ที่สมบูรณ์

chrome-extension://EXTENSION_ID/PATH_TO_FILE

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

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

สถาปัตยกรรม

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

สคริปต์พื้นหลัง

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

องค์ประกอบ UI

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

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

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

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

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

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

หน้าต่างเบราว์เซอร์ที่มีการทำงานของหน้าเว็บและสคริปต์เนื้อหา

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

แสดงเส้นทางการสื่อสารระหว่างสคริปต์เนื้อหาและส่วนขยายระดับบนสุด

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

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

การใช้ API ของ Chrome

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

วิธีการแบบอะซิงโครนัสกับวิธีการแบบซิงโครนัส

เมธอด 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)

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

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

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

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

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

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

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

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

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