ทำให้การจัดรูปแบบหน้าปัจจุบันง่ายขึ้นโดยคลิกไอคอนแถบเครื่องมือของส่วนขยาย
ภาพรวม
บทแนะนำนี้จะสร้างส่วนขยายที่ลดความซับซ้อนในการจัดรูปแบบส่วนขยาย Chrome และหน้าเอกสารประกอบของ Chrome เว็บสโตร์เพื่อให้อ่านง่ายขึ้น
ในคู่มือนี้ เราจะอธิบายวิธีทำสิ่งต่อไปนี้:
- ใช้โปรแกรมทำงานของบริการส่วนขยายเป็นผู้ประสานงานเหตุการณ์
- รักษาความเป็นส่วนตัวของผู้ใช้ผ่านสิทธิ์
"activeTab"
- เรียกใช้โค้ดเมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือส่วนขยาย
- แทรกและนำสไตล์ชีตออกโดยใช้ Scripting API
- ใช้แป้นพิมพ์ลัดเพื่อเรียกใช้โค้ด
ก่อนจะเริ่ม
คู่มือนี้จะถือว่าคุณมีประสบการณ์ในการพัฒนาเว็บขั้นพื้นฐาน เราขอแนะนำให้ดู Hello World เพื่อดูข้อมูลเบื้องต้นเกี่ยวกับเวิร์กโฟลว์การพัฒนาส่วนขยาย
สร้างส่วนขยาย
หากต้องการเริ่มต้น ให้สร้างไดเรกทอรีใหม่ชื่อ focus-mode
ซึ่งจะใช้เก็บไฟล์ของส่วนขยาย หากต้องการ คุณสามารถดาวน์โหลดซอร์สโค้ดที่สมบูรณ์ได้จาก GitHub
ขั้นตอนที่ 1: เพิ่มข้อมูลและไอคอนของส่วนขยาย
สร้างไฟล์ชื่อ manifest.json
และใส่รหัสต่อไปนี้
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคีย์ไฟล์ Manifest เหล่านี้ โปรดดูบทแนะนำ "เรียกใช้สคริปต์ในทุกแท็บ" ซึ่งอธิบายข้อมูลเมตาและไอคอนของส่วนขยายอย่างละเอียดยิ่งขึ้น
สร้างโฟลเดอร์ images
จากนั้นดาวน์โหลดไอคอนลงในโฟลเดอร์นั้น
ขั้นตอนที่ 2: เริ่มต้นส่วนขยาย
ส่วนขยายจะตรวจสอบเหตุการณ์ของเบราว์เซอร์ในเบื้องหลังได้โดยใช้โปรแกรมทำงานบริการของส่วนขยาย โปรแกรมทำงานของบริการเป็นสภาพแวดล้อม JavaScript แบบพิเศษที่จัดการเหตุการณ์และยุติการทำงานเมื่อไม่จำเป็นต้องใช้
เริ่มด้วยการลงทะเบียน Service Worker ในไฟล์ manifest.json
ดังนี้
{
...
"background": {
"service_worker": "background.js"
},
...
}
สร้างไฟล์ชื่อ background.js
และเพิ่มโค้ดต่อไปนี้
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
เหตุการณ์แรกที่ Service Worker จะรับข้อมูลคือ runtime.onInstalled()
วิธีนี้ช่วยให้ส่วนขยายตั้งค่าสถานะเริ่มต้นหรือทำงานบางอย่างในการติดตั้งได้ ส่วนขยายสามารถใช้ Storage API และ IndexedDB เพื่อจัดเก็บสถานะของแอปพลิเคชัน แต่ในกรณีนี้ เนื่องจากเราจัดการเพียง 2 สถานะเท่านั้น เราจึงจะใช้ข้อความป้ายของการดำเนินการเพื่อติดตามว่าส่วนขยาย "เปิด" หรือ "ปิด"
ขั้นตอนที่ 3: เปิดใช้การทำงานของส่วนขยาย
การทำงานของส่วนขยายจะควบคุมไอคอนแถบเครื่องมือของส่วนขยาย ดังนั้นเมื่อใดก็ตามที่ผู้ใช้คลิกไอคอนส่วนขยาย ส่วนขยายอาจเรียกใช้โค้ด (ดังเช่นในตัวอย่างนี้) หรือแสดงป๊อปอัป เพิ่มโค้ดต่อไปนี้เพื่อประกาศการทำงานของส่วนขยายในไฟล์ manifest.json
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
ใช้สิทธิ์ ActiveTab เพื่อปกป้องความเป็นส่วนตัวของผู้ใช้
สิทธิ์ activeTab
จะให้ความสามารถชั่วคราวแก่ส่วนขยายในการเรียกใช้โค้ดในแท็บที่ใช้งานอยู่ นอกจากนี้ยังอนุญาตการเข้าถึงพร็อพเพอร์ตี้ที่ละเอียดอ่อนของแท็บปัจจุบันด้วย
สิทธิ์นี้จะเปิดใช้เมื่อผู้ใช้เรียกใช้ส่วนขยาย ในกรณีนี้ ผู้ใช้เรียกใช้ส่วนขยายโดยคลิกที่การทำงานของส่วนขยาย
💡 การโต้ตอบอื่นๆ ของผู้ใช้ทำให้สิทธิ์ ActiveTab ในส่วนขยายของตัวเองมีอะไรบ้าง
- การกดแป้นพิมพ์ลัด
- เลือกรายการเมนูตามบริบท
- ยอมรับคำแนะนำจากแถบอเนกประสงค์
- กำลังเปิดป๊อปอัปส่วนขยาย
สิทธิ์ "activeTab"
ช่วยให้ผู้ใช้เลือกเรียกใช้ส่วนขยายในแท็บที่โฟกัสได้โดยเจตนา ซึ่งจะช่วยปกป้องความเป็นส่วนตัวของผู้ใช้ ประโยชน์อีกข้อหนึ่งคือจะไม่ทำให้มีคำเตือนเกี่ยวกับสิทธิ์
หากต้องการใช้สิทธิ์ "activeTab"
ให้เพิ่มสิทธิ์ลงในอาร์เรย์สิทธิ์ของไฟล์ Manifest ดังนี้
{
...
"permissions": ["activeTab"],
...
}
ขั้นตอนที่ 4: ติดตามสถานะของแท็บปัจจุบัน
หลังจากที่ผู้ใช้คลิกการทำงานของส่วนขยาย ส่วนขยายจะตรวจสอบว่า URL ตรงกับหน้าเอกสารประกอบหรือไม่ จากนั้นจะตรวจสอบสถานะของแท็บปัจจุบันและกำหนดสถานะถัดไป เพิ่มโค้ดต่อไปนี้ลงใน background.js
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
ขั้นตอนที่ 5: เพิ่มหรือนำสไตล์ชีตออก
ตอนนี้ถึงเวลาเปลี่ยนเลย์เอาต์ของหน้าแล้ว สร้างไฟล์ชื่อ focus-mode.css
และใส่รหัสต่อไปนี้
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
แทรกหรือนำสไตล์ชีตออกโดยใช้ Scripting API เริ่มต้นด้วยการประกาศสิทธิ์ "scripting"
ในไฟล์ Manifest
{
...
"permissions": ["activeTab", "scripting"],
...
}
สุดท้าย ใน background.js
ให้เพิ่มโค้ดต่อไปนี้เพื่อเปลี่ยนการออกแบบของหน้าเว็บ:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 ฉันจะใช้ Scripting API เพื่อแทรกโค้ดแทนสไตล์ชีตได้ไหม
ได้ คุณใช้ scripting.executeScript()
เพื่อแทรก JavaScript ได้
ไม่บังคับ: กำหนดแป้นพิมพ์ลัด
เพิ่มทางลัดเพื่อให้เปิดหรือปิดโหมดโฟกัสได้ง่ายๆ เพื่อความสนุก เพิ่มคีย์ "commands"
ลงในไฟล์ Manifest
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
คีย์ "_execute_action"
เรียกใช้โค้ดเดียวกันกับเหตุการณ์ action.onClicked()
จึงไม่จำเป็นต้องเขียนโค้ดเพิ่มเติม
ทดสอบว่าใช้งานได้
ยืนยันว่าโครงสร้างไฟล์ของโครงการมีลักษณะดังต่อไปนี้
โหลดส่วนขยายในเครื่อง
หากต้องการโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนใน Hello World
ทดสอบส่วนขยายในหน้าเอกสารประกอบ
ขั้นแรก ให้เปิดหน้าเว็บใดก็ได้ต่อไปนี้
จากนั้นคลิกการทำงานของส่วนขยาย หากคุณตั้งค่าแป้นพิมพ์ลัด คุณสามารถทดสอบโดยการกด Ctrl + B
หรือ Cmd + B
โค้ดควรเริ่มจากจุดนี้
![ส่วนขยายโหมดโฟกัสปิดอยู่](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-off-dc8f9326aa92b.png?authuser=6&hl=th)
โดยทำดังนี้
![ส่วนขยายโหมดโฟกัสเปิดอยู่](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-on-c248a59b498ea.png?authuser=6&hl=th)
🎯 การเพิ่มประสิทธิภาพที่เป็นไปได้
จากสิ่งที่ได้เรียนรู้ในวันนี้ ลองทำอย่างใดอย่างหนึ่งต่อไปนี้
- ปรับปรุงสไตล์ชีต CSS
- กำหนดแป้นพิมพ์ลัดอื่น
- เปลี่ยนการออกแบบของบล็อกหรือเว็บไซต์เอกสารประกอบที่คุณชื่นชอบ
สร้างชุมชนให้เติบโตไปเรื่อยๆ
ยินดีด้วยกับบทแนะนำนี้จบแล้ว 🎉 เพิ่มทักษะของคุณไปอีกขั้นด้วยบทแนะนำอื่นๆ ในชุดนี้:
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
เวลาในการอ่าน | การแทรกองค์ประกอบในชุดหน้าเว็บที่เจาะจงโดยอัตโนมัติ |
เครื่องมือจัดการแท็บ | เพื่อสร้างป๊อปอัปที่จัดการแท็บของเบราว์เซอร์ |
สำรวจต่อ
เราหวังว่าคุณจะเพลิดเพลินกับการสร้างส่วนขยาย Chrome นี้ และรู้สึกตื่นเต้นที่จะได้เดินหน้าเรียนรู้ การพัฒนาส่วนขยายต่อไป เราขอแนะนำให้ใช้เส้นทางการเรียนรู้ต่อไปนี้
- คู่มือนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมลิงก์ไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูงอีกหลายสิบรายการ
- ส่วนขยายสามารถเข้าถึง API ที่มีประสิทธิภาพมากกว่าที่มีอยู่ในเว็บแบบเปิด เอกสารประกอบของ Chrome API จะอธิบายแต่ละ API