บทแนะนำ: ย้ายข้อมูลไปยังไฟล์ 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

• คุณใช้ API ของ chrome.extension.getTabContentses() หรือ chrome.extension.getExtensionTabs()

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

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

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

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

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

เช็กลิสต์การเปลี่ยนแปลงการรักษาความปลอดภัย

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

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

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

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

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

• กำหนดพร็อพเพอร์ตี้ 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 เก่า 2-3 รายการด้วย 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 ด้วยพื้นหลัง
• นำพร็อพเพอร์ตี้ chrome.self ออกแล้ว โปรดใช้ chrome.extension
• ระบบได้แทนที่พร็อพเพอร์ตี้ Port.tab ด้วย Port.sender แล้ว
• เราได้แทนที่ API ของ chrome.extension.getTabContentses() และ chrome.extension.getExtensionTabs() ด้วย chrome.extension.getViews( { "type" : "tab" } )

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

มีการเปลี่ยนแปลงด้านความปลอดภัยมากมายที่เกิดขึ้นพร้อมกับการย้ายจากไฟล์ 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() เพื่อสื่อสารกับหน้าเว็บที่ทำแซนด์บ็อกซ์

โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีดำเนินการนี้ในเอกสารประกอบ Sandboxing Eval

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

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