ส่วนขยายเป็นส่วนเสริมของเบราว์เซอร์ ซึ่งออกแบบมาให้เป็นส่วนเสริมและปรับแต่ง ส่วนขยายที่ทำให้ประสบการณ์การท่องเว็บช้าลงหรือแย่ลงเป็นปัญหาที่ ผู้ใช้และโต้แย้งวัตถุประสงค์ของส่วนขยาย Chrome นอกจากนิสัยที่ดีในการเขียนโค้ดแล้ว นักพัฒนาซอฟต์แวร์ควรปฏิบัติตามแนวทางปฏิบัติเหล่านี้เพื่อให้มั่นใจว่าส่วนขยายจะทำงานได้อย่างมีประสิทธิภาพสูงสุด
เลื่อนทุกสิ่งที่เป็นไปได้
อย่าโหลดทรัพยากรจนกว่าจะจำเป็น ระบุเฉพาะข้อมูลที่จำเป็นในการเปิด ในฟังก์ชันการเริ่มต้น อย่าโหลดสิ่งต่างๆ ในช่วงเริ่มต้นโปรแกรมซึ่งจำเป็นต้องใช้เฉพาะในกรณีต่อไปนี้ ผู้ใช้คลิกปุ่ม หรือคุณลักษณะที่จะทำงานเฉพาะเมื่อผู้ใช้ลงชื่อเข้าใช้ก่อนที่จะมี ในการทำเช่นนั้น
จัดการกิจกรรมสำคัญ
สคริปต์พื้นหลังที่มีประสิทธิภาพจะมีเหตุการณ์ที่บันทึกไว้ซึ่งมีความสำคัญต่อ ส่วนขยาย ผู้ป่วยจะนอนไม่หลับจนกว่าผู้ฟังจะถูกเรียกให้แสดง ดำเนินการให้สอดคล้องกัน แล้วก็กลับไปไม่มีความเคลื่อนไหว เป็นการลดการใช้ทรัพยากรของระบบเพื่อให้สคริปต์ที่ไม่จำเป็นทำงานอยู่
สคริปต์พื้นหลังควรลงทะเบียนในไฟล์ Manifest โดยตั้งการถาวรเป็น false หาก เท่าที่จะเป็นไปได้
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
โอกาสเดียวที่จะทำให้สคริปต์พื้นหลังทำงานตลอดเวลาคือเมื่อส่วนขยายใช้
chrome.webRequest
API เพื่อบล็อกหรือแก้ไขคำขอของเครือข่าย WebRequest API ใช้ร่วมกันไม่ได้
ที่มีหน้าเว็บพื้นหลังที่ไม่ถาวร
{
"name": "High Performance Extension",
"description" : "Persistent Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"webRequest",
"webRequestBlocking",
"https://<distracting social media site>.com/*"
],
...
}
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
return {redirectUrl: "/"};
},
{urls: ["https://social.media.distraction.com/*"]},
["blocking"]
);
มีสคริปต์เนื้อหา
สคริปต์เนื้อหาควรทำหน้าที่เป็นตัวแทนลับของส่วนขยาย อ่านหรือ การแก้ไขหน้าเว็บโดยที่ใช้แกนของส่วนขยายในการทำงานหนักขึ้น ควรมี เป้าหมายที่ชัดเจนเพื่อหลีกเลี่ยงการบุกรุกหน้าเว็บที่ไม่เกี่ยวข้อง ตามหลักการ สคริปต์เนื้อหาควร ไม่ได้สังเกตเห็นในการท่องเว็บ นอกเหนือไปจากพฤติกรรมที่มีจุดประสงค์
ประกาศเป้าหมาย
ส่วนขยายที่ใช้งานสคริปต์เนื้อหาในตำแหน่งที่ไม่จำเป็น หรือในช่วงเวลาที่ไม่เหมาะสมอาจทำให้
เบราว์เซอร์ทำงานช้าลงและอาจทำให้เกิดข้อผิดพลาดด้านฟังก์ชันการทำงาน หลีกเลี่ยงปัญหานี้โดยการระบุ Match
รูปแบบ ในไฟล์ Manifest และเรียกใช้สคริปต์ที่ document_idle
แทน document_start
{
"name": "High Performance Extension",
"description" : "Superfly Superlight Content Scripts",
"version": "1.0",
...
"content_scripts": [
{
"js": ["content_script.js"],
"matches": ["/*"],
"run_at": "document_idle"
}
]
...
}
หากส่วนขยายจำเป็นต้องเข้าถึงเฉพาะหน้าเว็บที่มีการดำเนินการของผู้ใช้ ให้แทรกส่วนขยายนั้น แบบเป็นโปรแกรม การแทรกแบบเป็นโปรแกรมจะทำงานก็ต่อเมื่อผู้ใช้เรียกใช้เท่านั้น
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
ใช้สคริปต์เนื้อหาเมื่อจำเป็นเท่านั้น
ส่วนขยายจำนวนมากอาจไม่จำเป็นต้องใช้สคริปต์เนื้อหาเลยเพื่อให้ทำงานตามที่ต้องการ การใช้
declarativeContent
API จะตั้งกฎสำหรับส่วนขยายให้จดจำเมื่อมีเงื่อนไขที่เกี่ยวข้อง
ตรงกันหรือไม่ วิธีนี้มีประสิทธิภาพมากกว่าสคริปต์เนื้อหาและใช้โค้ดน้อยกว่า
หากส่วนขยายจำเป็นต้องแสดงการทำงานของหน้าเว็บต่อผู้ใช้เมื่อผู้ใช้เข้าชมเว็บไซต์ด้วย HTML5
<video>
สามารถระบุกฎแบบประกาศ
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
css: ["video"],
})
],
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
ประเมินประสิทธิภาพของโค้ด
แนวทางปฏิบัติทั่วไปเดียวกันนี้สำหรับประสิทธิภาพของเว็บไซต์สามารถใช้กับส่วนขยายได้ เช่น การใช้ ในการเขียนโปรแกรมแบบไม่พร้อมกัน รวมถึงทำให้โค้ดเรียบง่ายและกะทัดรัด
ใช้เครื่องมือ เช่น Lighthouse เพื่อประเมินประสิทธิภาพส่วนขยายและพื้นที่เป้าหมายที่ ปรับปรุงหน้าส่วนขยายภาพให้ดีขึ้นได้