บทแนะนำ: ย้ายข้อมูลไปยังไฟล์ Manifest V2

เราได้เลิกใช้งานไฟล์ Manifest เวอร์ชัน 1 ใน Chrome เวอร์ชัน 18 และจะหยุดรองรับตามกำหนดการรองรับไฟล์ Manifest เวอร์ชัน 1 การเปลี่ยนแปลงจากเวอร์ชัน 1 เป็นเวอร์ชัน 2 แบ่งออกเป็น 2 หมวดหมู่ใหญ่ๆ ได้แก่ การเปลี่ยนแปลง API และการเปลี่ยนแปลงด้านความปลอดภัย

เอกสารนี้มีรายการตรวจสอบสำหรับการย้ายข้อมูลส่วนขยาย Chrome จากไฟล์ Manifest เวอร์ชัน 1 ไปยังเวอร์ชัน 2 ตามด้วยสรุปโดยละเอียดเกี่ยวกับความหมายของการเปลี่ยนแปลงเหล่านี้และเหตุผลที่ต้องทำ

รายการตรวจสอบการเปลี่ยนแปลง API

  • คุณใช้พร็อพเพอร์ตี้ browser_actions หรือ chrome.browserActions API

  • แทนที่ browser_actions ด้วยพร็อพเพอร์ตี้ browser_action ที่เป็นเอกพจน์

  • แทนที่ chrome.browserActions ด้วย chrome.browserAction

  • แทนที่พร็อพเพอร์ตี้ icons ด้วย default_icon

  • แทนที่พร็อพเพอร์ตี้ name ด้วย default_title

  • แทนที่พร็อพเพอร์ตี้ popup ด้วย default_popup (และตอนนี้ต้องเป็นสตริง)

  • คุณใช้พร็อพเพอร์ตี้ page_actions หรือ chrome.pageActions API

  • แทนที่ page_actions ด้วย page_action

  • แทนที่ chrome.pageActions ด้วย chrome.pageAction

  • แทนที่พร็อพเพอร์ตี้ icons ด้วย default_icon

  • แทนที่พร็อพเพอร์ตี้ name ด้วย default_title

  • แทนที่พร็อพเพอร์ตี้ popup ด้วย default_popup (และตอนนี้ต้องเป็นสตริง)

  • คุณใช้พร็อพเพอร์ตี้ chrome.self อยู่ใช่ไหม

  • แทนที่ด้วย chrome.extension

  • คุณใช้พร็อพเพอร์ตี้ Port.tab อยู่ใช่ไหม

  • แทนที่ด้วย Port.sender

  • คุณใช้ chrome.extension.getTabContentses() หรือ chrome.extension.getExtensionTabs() API อยู่หรือไม่

  • แทนที่ด้วย chrome.extension.getViews( { "type" : "tab" } )

  • ส่วนขยายของคุณใช้หน้าพื้นหลังหรือไม่

  • แทนที่พร็อพเพอร์ตี้ background_page ด้วยพร็อพเพอร์ตี้ background

  • เพิ่มพร็อพเพอร์ตี้ scripts หรือ page ที่มีโค้ดสําหรับหน้าเว็บ

  • เพิ่มพร็อพเพอร์ตี้ persistent แล้วตั้งค่าเป็น false เพื่อแปลงหน้าพื้นหลังเป็นหน้าเหตุการณ์

รายการตรวจสอบการเปลี่ยนแปลงด้านความปลอดภัย

  • คุณใช้บล็อกสคริปต์ในบรรทัดในหน้า HTML อยู่หรือไม่

  • นำโค้ด JS ที่มีอยู่ในแท็ก <script> ออกและวางไว้ในไฟล์ JS ภายนอก

  • คุณใช้ตัวแฮนเดิลเหตุการณ์ในบรรทัด (เช่น onclick ฯลฯ) อยู่หรือไม่

  • นำออกจากโค้ด HTML แล้วย้ายไปไว้ในไฟล์ JS ภายนอก และใช้ addEventListener() instead

  • ส่วนขยายของคุณแทรกสคริปต์เนื้อหาลงในหน้าเว็บที่ต้องเข้าถึงทรัพยากร (เช่น รูปภาพและสคริปต์) ที่มีอยู่ในแพ็กเกจของส่วนขยายหรือไม่

  • กําหนดพร็อพเพอร์ตี้ web_accessible_resources และแสดงรายการทรัพยากร (และนโยบายรักษาความปลอดภัยเนื้อหาแยกต่างหากสําหรับทรัพยากรเหล่านั้น หากต้องการ)

  • ส่วนขยายของคุณฝังหน้าเว็บภายนอกไหม

  • กําหนดพร็อพเพอร์ตี้ sandbox

  • โค้ดหรือไลบรารีของคุณใช้ eval(), Function() ใหม่, innerHTML, setTimeout() หรือส่งสตริงโค้ด JS ที่ประเมินแบบไดนามิกหรือไม่

  • ใช้ JSON.parse() หากคุณจะแยกวิเคราะห์โค้ด JSON ให้เป็นออบเจ็กต์

  • ใช้ไลบรารีที่ใช้งานร่วมกับ CSP ได้ เช่น AngularJS

  • สร้างรายการแซนด์บ็อกซ์ในไฟล์ Manifest แล้วเรียกใช้โค้ดที่ได้รับผลกระทบในแซนด์บ็อกซ์โดยใช้ postMessage() เพื่อสื่อสารกับหน้าที่อยู่ในแซนด์บ็อกซ์

  • คุณกําลังโหลดโค้ดภายนอก เช่น jQuery หรือ Google Analytics อยู่หรือไม่

  • ลองดาวน์โหลดไลบรารีและแพ็กเกจไว้ในส่วนขยาย จากนั้นโหลดจากแพ็กเกจในเครื่อง

  • เพิ่มโดเมน HTTPS ที่แสดงทรัพยากรในส่วน "content_security_policy" ของไฟล์ Manifest ลงในรายการที่อนุญาต

สรุปการเปลี่ยนแปลง API

ไฟล์ Manifest เวอร์ชัน 2 มีการเปลี่ยนแปลงบางอย่างใน API การดําเนินการของเบราว์เซอร์และการดําเนินการของหน้าเว็บ และแทนที่ API เก่าบางรายการด้วย API เวอร์ชันใหม่

การเปลี่ยนแปลงการดำเนินการของเบราว์เซอร์

Browser Actions API มีการเปลี่ยนแปลงการตั้งชื่อบางอย่าง ดังนี้

  • พร็อพเพอร์ตี้ browser_actions และ chrome.browserActions ถูกแทนที่ด้วยพร็อพเพอร์ตี้ browser_action และ chrome.browserAction แบบเอกพจน์

  • พร็อพเพอร์ตี้ browser_actions เดิมมีพร็อพเพอร์ตี้ icons, name และ popup ซึ่งได้เปลี่ยนเป็น

  • default_icon สำหรับไอคอนป้ายการดำเนินการของเบราว์เซอร์

  • default_name สำหรับข้อความที่ปรากฏในเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือป้าย

  • default_popup สำหรับหน้า HTML ที่แสดง UI สําหรับการดําเนินการของเบราว์เซอร์ (ตอนนี้ต้องเป็นสตริงและต้องไม่ใช่ออบเจ็กต์)

การเปลี่ยนแปลงการดําเนินการของหน้าเว็บ

เช่นเดียวกับการเปลี่ยนแปลงสําหรับการกระทําของเบราว์เซอร์ API การกระทําในหน้าเว็บก็เปลี่ยนแปลงด้วยเช่นกัน ดังนี้

  • เราได้แทนที่พร็อพเพอร์ตี้ page_actions และ chrome.pageActions ด้วยพร็อพเพอร์ตี้ page_action และ chrome.pageAction

  • พร็อพเพอร์ตี้ page_actions เดิมมีพร็อพเพอร์ตี้ icons, name และ popup รายการเหล่านี้ถูกแทนที่ด้วยรายการต่อไปนี้

  • default_icon สำหรับไอคอนป้ายการทำงานบนหน้าเว็บ

  • default_name สำหรับข้อความที่ปรากฏในเคล็ดลับเครื่องมือเมื่อคุณวางเมาส์เหนือป้าย

  • default_popup สำหรับหน้า HTML ที่แสดง UI สําหรับการดําเนินการของหน้า (ตอนนี้ต้องเป็นสตริงและต้องไม่ใช่ออบเจ็กต์)

API ที่นําออกและเปลี่ยนแปลง

เรานํา API ของส่วนขยายบางรายการออกและแทนที่ด้วย API ใหม่ดังต่อไปนี้

  • พร็อพเพอร์ตี้ background_page ถูกแทนที่ด้วย background
  • เราได้นําพร็อพเพอร์ตี้ chrome.self ออกแล้ว ให้ใช้ chrome.extension
  • พร็อพเพอร์ตี้ Port.tab ถูกแทนที่ด้วย Port.sender แล้ว
  • chrome.extension.getViews( { "type" : "tab" } ) เข้ามาแทนที่ chrome.extension.getTabContentses() และ chrome.extension.getExtensionTabs() API แล้ว

สรุปการเปลี่ยนแปลงด้านความปลอดภัย

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

ไม่อนุญาตให้ใช้สคริปต์และตัวจัดการเหตุการณ์ในบรรทัด

เนื่องจากมีการใช้นโยบายรักษาความปลอดภัยเนื้อหา คุณจึงใช้แท็ก <script> ที่ฝังอยู่ในเนื้อหา HTML ไม่ได้อีกต่อไป โดยต้องย้ายไปยังไฟล์ JS ภายนอก นอกจากนี้ ระบบยังไม่รองรับตัวแฮนเดิลเหตุการณ์ในบรรทัด ตัวอย่างเช่น สมมติว่าคุณมีโค้ดต่อไปนี้ในส่วนขยาย

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

โค้ดนี้จะทำให้เกิดข้อผิดพลาดเมื่อรันไทม์ วิธีแก้ไขคือย้ายเนื้อหาแท็ก <script> ไปยังไฟล์ภายนอก และอ้างอิงด้วยแอตทริบิวต์ src='path_to_file.js'

ในทํานองเดียวกัน ตัวจัดการเหตุการณ์ในบรรทัด ซึ่งเป็นสิ่งที่เกิดขึ้นได้ทั่วไปและเป็นฟีเจอร์ที่สะดวกซึ่งนักพัฒนาเว็บจํานวนมากใช้ ก็จะไม่ทํางาน ตัวอย่างเช่น พิจารณาอินสแตนซ์ที่พบบ่อย เช่น

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

รายการเหล่านี้จะใช้ไม่ได้ในส่วนขยายไฟล์ Manifest V2 นําตัวแฮนเดิลเหตุการณ์ในบรรทัดออก แล้ววางไว้ในไฟล์ JS ภายนอก และใช้ addEventListener() เพื่อลงทะเบียนตัวแฮนเดิลเหตุการณ์แทน เช่น ในโค้ด JS ให้ใช้

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

วิธีนี้ช่วยให้แยกลักษณะการทํางานของส่วนขยายออกจากมาร์กอัปอินเทอร์เฟซผู้ใช้ได้ชัดเจนยิ่งขึ้น

การฝังเนื้อหา

มีหลายกรณีที่ส่วนขยายอาจฝังเนื้อหาที่นำไปใช้ได้ภายนอกหรือมาจากแหล่งที่มาภายนอก

เนื้อหาส่วนขยายในหน้าเว็บ: หากส่วนขยายฝังทรัพยากร (เช่น รูปภาพ สคริปต์ สไตล์ CSS ฯลฯ) ที่ใช้ในเนื้อหาสคริปต์ที่แทรกลงในหน้าเว็บ คุณต้องใช้พร็อพเพอร์ตี้ web_accessible_resources เพื่อเพิ่มทรัพยากรเหล่านี้ลงในรายการที่อนุญาตเพื่อให้หน้าเว็บภายนอกใช้ทรัพยากรดังกล่าวได้

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

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

  1. ดาวน์โหลดไลบรารีที่เกี่ยวข้องในเครื่อง (เช่น jQuery) และรวมเข้ากับส่วนขยาย

  2. คุณสามารถผ่อนปรน CSP ได้ในบางกรณีโดยการเพิ่มต้นทาง HTTPS ลงในรายการที่อนุญาตในส่วน "content_security_policy" ของไฟล์ Manifest หากต้องการรวมไลบรารี เช่น Google Analytics ให้ทำดังนี้

    {
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}

การใช้การประเมินสคริปต์แบบไดนามิก

การเปลี่ยนแปลงที่ใหญ่ที่สุดอย่างหนึ่งในรูปแบบไฟล์ Manifest V2 ใหม่คือส่วนขยายจะใช้เทคนิคการประเมินสคริปต์แบบไดนามิก เช่น eval() หรือ Function() ใหม่ หรือส่งสตริงโค้ด JS ไปยังฟังก์ชันที่จะทําให้ใช้ eval() ไม่ได้อีกต่อไป เช่น setTimeout() นอกจากนี้ ไลบรารี JavaScript บางรายการที่ใช้กันโดยทั่วไป เช่น Google Maps และไลบรารีเทมเพลตบางรายการก็ทราบกันว่าใช้เทคนิคเหล่านี้

Chrome มีแซนด์บ็อกซ์สำหรับให้หน้าเว็บทำงานในต้นทางของตนเอง ซึ่งถูกปฏิเสธไม่ให้เข้าถึง Chrome* API หากต้องการใช้ eval() และรายการที่คล้ายกันภายใต้นโยบายความปลอดภัยของเนื้อหาใหม่ ให้ทำดังนี้

  1. สร้างรายการแซนด์บ็อกซ์ในไฟล์ Manifest
  2. ในรายการแซนด์บ็อกซ์ ให้ระบุหน้าเว็บที่ต้องการเรียกใช้ในแซนด์บ็อกซ์
  3. ใช้การส่งข้อความผ่าน postMessage() เพื่อสื่อสารกับหน้าที่อยู่ในแซนด์บ็อกซ์

ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีดำเนินการได้ที่เอกสารประกอบการประเมินแซนด์บ็อกซ์

อ่านเพิ่มเติม

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