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

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

เลื่อนทุกอย่างที่เป็นไปได้

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

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

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

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

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

กรณีเดียวที่ควรให้สคริปต์พื้นหลังทำงานอย่างต่อเนื่องคือหากส่วนขยายใช้ chrome.webRequest API เพื่อบล็อกหรือแก้ไขคำขอเครือข่าย API webRequest ใช้ร่วมกับหน้าพื้นหลังที่ไม่คงอยู่ไม่ได้

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

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

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

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

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

ใช้ Content Script เมื่อจำเป็นเท่านั้น

ส่วนขยายจำนวนมากอาจไม่จำเป็นต้องใช้ Content Script เลยเพื่อให้ฟังก์ชันการทำงานที่ต้องการ การใช้declarativeContent API จะกำหนดกฎให้ส่วนขยายจดจำได้เมื่อตรงตามเงื่อนไขที่เกี่ยวข้อง ซึ่งมีประสิทธิภาพมากกว่า Content Script และใช้โค้ดน้อยกว่า

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