เข้าถึงประสิทธิภาพสูงสุด

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

เลื่อนเวลาที่เป็นไปได้ทั้งหมด

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

จัดการเหตุการณ์สำคัญ

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

ควรลงทะเบียนสคริปต์พื้นหลังในไฟล์ Manifest โดยตั้งค่าความต่อเนื่องเป็น "เท็จ" หากทำได้

{
  "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"]
);

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

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

ประกาศเป้าหมาย

ส่วนขยายที่เรียกใช้สคริปต์เนื้อหาในตำแหน่งที่ไม่จำเป็นหรือในเวลาที่ไม่เหมาะสมอาจทำให้เบราว์เซอร์ทำงานช้าลงและอาจทำให้เกิดข้อผิดพลาดของฟังก์ชัน คุณหลีกเลี่ยงปัญหานี้ได้โดยระบุรูปแบบการจับคู่ในไฟล์ 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 เพื่อประเมินประสิทธิภาพของส่วนขยายและพื้นที่เป้าหมายที่ควรปรับปรุงในหน้าส่วนขยายภาพ