ส่วนขยายประกอบด้วยองค์ประกอบที่แตกต่างกันแต่สอดคล้องกัน คอมโพเนนต์อาจประกอบด้วยสคริปต์พื้นหลัง สคริปต์เนื้อหา หน้าตัวเลือก องค์ประกอบของ UI และไฟล์ตรรกะต่างๆ คอมโพเนนต์ของส่วนขยายสร้างขึ้นด้วยเทคโนโลยีการพัฒนาเว็บ ได้แก่ HTML, CSS และ JavaScript คอมโพเนนต์ของส่วนขยายจะขึ้นอยู่กับฟังก์ชันการทำงานของส่วนขยายและอาจไม่จำเป็นต้องใช้ทุกตัวเลือก
บทแนะนำนี้จะสร้างส่วนขยายที่ให้ผู้ใช้เปลี่ยนสีพื้นหลังของหน้าใดก็ได้ใน developer.chrome.com โดยจะใช้คอมโพเนนต์หลักหลายอย่างเพื่อสาธิตความสัมพันธ์
หากต้องการเริ่มต้น ให้สร้างไดเรกทอรีใหม่เพื่อเก็บไฟล์ส่วนขยาย
ดูส่วนขยายที่เสร็จสมบูรณ์แล้วได้ที่นี่
สร้างไฟล์ Manifest
ส่วนขยายจะเริ่มจากไฟล์ Manifest สร้างไฟล์ชื่อ manifest.json
แล้วใส่โค้ดต่อไปนี้
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
คุณสามารถเพิ่มไดเรกทอรีที่มีไฟล์ Manifest เป็นส่วนขยายในโหมดนักพัฒนาซอฟต์แวร์ในสถานะปัจจุบันได้
- เปิดหน้าการจัดการส่วนขยายโดยไปที่
chrome://extensions
- นอกจากนี้ คุณยังเปิดหน้าการจัดการส่วนขยายได้โดยคลิกเมนู Chrome จากนั้นวางเมาส์เหนือเครื่องมือเพิ่มเติม แล้วเลือกส่วนขยาย
- เปิดใช้โหมดนักพัฒนาซอฟต์แวร์โดยคลิกสวิตช์เปิด/ปิดข้างโหมดนักพัฒนาซอฟต์แวร์
- คลิกปุ่มยกเลิกการโหลด และเลือกไดเรกทอรีของส่วนขยาย
นี่ไง! ติดตั้งส่วนขยายสำเร็จแล้ว เนื่องจากไม่มีไอคอนใดรวมอยู่ในไฟล์ Manifest ระบบจะสร้างไอคอนแถบเครื่องมือทั่วไปสำหรับส่วนขยาย
เพิ่มวิธีการ
แม้ว่าจะติดตั้งส่วนขยายนี้แล้ว แต่ก็ไม่มีวิธีการใดๆ แนะนำสคริปต์พื้นหลัง
โดยการสร้างไฟล์ชื่อ background.js
และวางไว้ในไดเรกทอรีของส่วนขยาย
ต้องบันทึกสคริปต์พื้นหลังและองค์ประกอบสำคัญอื่นๆ อีกมากมายในไฟล์ Manifest การลงทะเบียนสคริปต์พื้นหลังในไฟล์ Manifest จะบอกนามสกุลของไฟล์ที่จะอ้างอิง และดูว่าไฟล์นั้นควรทำงานอย่างไร
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
ตอนนี้ส่วนขยายจะทราบว่ามีสคริปต์พื้นหลังที่ไม่ถาวรและจะสแกนไฟล์ที่ลงทะเบียนเพื่อหาเหตุการณ์สำคัญที่จำเป็นต้องรับฟัง
ส่วนขยายนี้ต้องการข้อมูลจากตัวแปรถาวรทันทีที่ติดตั้ง เริ่มต้นด้วยการใส่เหตุการณ์การฟังสำหรับ runtime.onInstalled
ในสคริปต์เบื้องหลัง ใน Listener onInstalled
ส่วนขยายจะตั้งค่าโดยใช้ API storage ซึ่งจะทำให้คอมโพเนนต์ส่วนขยายหลายรายการเข้าถึงค่านั้นและอัปเดตค่านั้นได้
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
ต้องลงทะเบียน API ส่วนใหญ่ รวมถึง storage API ในช่อง "permissions"
ในไฟล์ Manifest เพื่อให้ส่วนขยายใช้งานได้
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
ไปที่หน้าการจัดการส่วนขยายและคลิกลิงก์โหลดซ้ำ ช่องใหม่ชื่อตรวจสอบมุมมองจะพร้อมใช้งานที่มีลิงก์สีน้ำเงินหน้าพื้นหลัง
คลิกที่ลิงก์เพื่อดูบันทึกคอนโซลของสคริปต์พื้นหลัง "The color is green.
"
แนะนำอินเทอร์เฟซผู้ใช้
ส่วนขยายอาจมีอินเทอร์เฟซผู้ใช้หลายรูปแบบ แต่รูปแบบนี้จะใช้ป๊อปอัป
สร้างและเพิ่มไฟล์ชื่อ popup.html
ในไดเรกทอรี ส่วนขยายนี้ใช้ปุ่มเพื่อเปลี่ยนสีพื้นหลัง
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
ไฟล์นี้ต้องได้รับการกำหนดเป็นป๊อปอัปในไฟล์ Manifest ในส่วน page_action
เช่นเดียวกับสคริปต์พื้นหลัง
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
การกำหนดไอคอนแถบเครื่องมือจะรวมอยู่ใน page_action
ในช่อง default_icons
ด้วย
ดาวน์โหลดโฟลเดอร์รูปภาพที่นี่ แตกไฟล์ แล้ววางไว้ในไดเรกทอรีของส่วนขยาย อัปเดตไฟล์ Manifest เพื่อให้ส่วนขยายทราบวิธีใช้รูปภาพ
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
ส่วนขยายจะแสดงรูปภาพในหน้าการจัดการส่วนขยาย คำเตือนเกี่ยวกับสิทธิ์ และไอคอน Fav ด้วย รูปภาพเหล่านี้จะระบุไว้ในไฟล์ Manifest ในส่วน icons
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
หากมีการโหลดส่วนขยายอีกครั้งในขั้นตอนนี้ ส่วนขยายจะมีไอคอนสีเทา แต่จะไม่มีความแตกต่างของฟังก์ชันการทำงาน เนื่องจากมีการประกาศ page_action
ในไฟล์ Manifest ส่วนขยายจึงจะบอกเบราว์เซอร์ว่าผู้ใช้โต้ตอบกับ popup.html
ได้เมื่อใด
เพิ่มกฎที่ประกาศลงในสคริปต์เบื้องหลังด้วย declarativeContent
API ภายในเหตุการณ์ Listener runtime.onInstalled
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
ส่วนขยายจะต้องมีสิทธิ์เข้าถึง declarativeContent
API ในไฟล์ Manifest
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
ตอนนี้เบราว์เซอร์จะแสดงไอคอนการทำงานแบบหน้าสีในแถบเครื่องมือของเบราว์เซอร์เมื่อผู้ใช้ไปยัง URL ที่มี "developer.chrome.com"
เมื่อไอคอนเป็นแบบสีเต็ม ผู้ใช้สามารถคลิกไอคอนเพื่อดู popup.html ได้
ขั้นตอนสุดท้ายสำหรับ UI แบบป๊อปอัปคือการเพิ่มสีให้กับปุ่ม สร้างและเพิ่มไฟล์ชื่อ popup.js
ด้วยรหัสต่อไปนี้ในไดเรกทอรีส่วนขยาย
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
โค้ดนี้จะดึงปุ่มจาก popup.html
และขอค่าสีจากพื้นที่เก็บข้อมูล จากนั้นจะใช้สีเป็นพื้นหลังของปุ่ม ใส่แท็กสคริปต์ไปยัง popup.js
ใน popup.html
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
โหลดส่วนขยายซ้ำเพื่อดูปุ่มสีเขียว
ตรรกะของเลเยอร์
ตอนนี้ส่วนขยายทราบแล้วว่าผู้ใช้ควรพร้อมใส่ป๊อปอัปได้ใน developer.chrome.com และจะแสดงปุ่มสี แต่ต้องใช้ตรรกะในการโต้ตอบของผู้ใช้เพิ่มเติม อัปเดต popup.js
ให้รวมโค้ดต่อไปนี้
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
โค้ดที่อัปเดตจะเพิ่มเหตุการณ์ onclick
บนปุ่ม ซึ่งจะทริกเกอร์สคริปต์เนื้อหาที่แทรกโดยโปรแกรม ซึ่งจะเป็นการเปลี่ยนสีพื้นหลังของหน้าเป็นสีเดียวกับปุ่ม การใช้การแทรกแบบเป็นโปรแกรมทำให้ใช้สคริปต์เนื้อหาที่ผู้ใช้เรียกใช้แทนการแทรกโค้ดไม่พึงประสงค์ลงในหน้าเว็บโดยอัตโนมัติได้
ไฟล์ Manifest จะต้องมีสิทธิ์ activeTab
เพื่ออนุญาตให้ส่วนขยายเข้าถึง tabs
API ได้ชั่วคราว การทำเช่นนี้จะทำให้ส่วนขยายสามารถเรียกใช้ tabs.executeScript
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
ขณะนี้ส่วนขยายทำงานได้อย่างสมบูรณ์แล้ว โหลดส่วนขยายซ้ำ รีเฟรชหน้านี้ เปิดป๊อปอัป และคลิกที่ปุ่มให้เปลี่ยนเป็นสีเขียว แต่ผู้ใช้บางคนอาจต้องการเปลี่ยนพื้นหลังเป็นสีอื่น
ให้ตัวเลือกแก่ผู้ใช้
ขณะนี้ส่วนขยายอนุญาตให้ผู้ใช้เปลี่ยนพื้นหลังเป็นสีเขียวเท่านั้น การใส่หน้าตัวเลือกช่วยให้ผู้ใช้ควบคุมฟังก์ชันการทำงานของส่วนขยายได้มากขึ้น ซึ่งเป็นการปรับแต่งประสบการณ์การท่องเว็บให้ดียิ่งขึ้น
เริ่มต้นด้วยการสร้างไฟล์ในไดเรกทอรีชื่อ options.html
และใส่โค้ดต่อไปนี้
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
จากนั้นลงทะเบียนหน้าตัวเลือกในไฟล์ Manifest
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
โหลดส่วนขยายซ้ำและคลิกรายละเอียด
เลื่อนลงในหน้ารายละเอียดและเลือกตัวเลือกส่วนขยายเพื่อดูหน้าตัวเลือก แม้ว่าตอนนี้หน้าตัวเลือกจะไม่แสดงก็ตาม
ขั้นตอนสุดท้ายคือการเพิ่มตรรกะตัวเลือก สร้างไฟล์ชื่อ options.js
ในไดเรกทอรีส่วนขยายด้วยรหัสต่อไปนี้
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
จะมี 4 ตัวเลือกสีเกิดขึ้น จากนั้นจึงสร้างเป็นปุ่มในหน้าตัวเลือกพร้อมตัวฟังเหตุการณ์ onclick เมื่อผู้ใช้คลิกปุ่ม ระบบจะอัปเดตค่าสีในพื้นที่เก็บข้อมูลส่วนกลางของส่วนขยาย เนื่องจากไฟล์ของส่วนขยายทั้งหมดจะดึงข้อมูลสีจากพื้นที่เก็บข้อมูลร่วม จึงไม่จำเป็นต้องอัปเดตค่าอื่นๆ
ดำเนินการขั้นตอนถัดไป
ยินดีด้วย ขณะนี้ไดเรกทอรีจะมีส่วนขยาย Chrome ที่ใช้งานได้อย่างสมบูรณ์ แม้ว่าจะเรียบง่าย
ขั้นตอนถัดไปคือ
- ภาพรวมส่วนขยายของ Chrome จะสำรองข้อมูลเล็กน้อยและกรอกรายละเอียดมากมายเกี่ยวกับสถาปัตยกรรมส่วนขยายโดยทั่วไป รวมถึงแนวคิดบางอย่างที่นักพัฒนาซอฟต์แวร์อาจอยากทำความคุ้นเคย
- ดูข้อมูลเกี่ยวกับตัวเลือกที่ใช้ได้สำหรับการแก้ไขข้อบกพร่องของส่วนขยายในบทแนะนำการแก้ไขข้อบกพร่อง
- ส่วนขยาย Chrome สามารถเข้าถึง API ที่มีประสิทธิภาพเหนือกว่าและมีอยู่ในเว็บแบบเปิด chrome* เอกสารประกอบของ API จะแนะนำ API แต่ละรายการ
- คู่มือนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูงอีกหลายสิบลิงก์