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

เราเลิกใช้งานไฟล์ Manifest เวอร์ชัน 1 ใน Chrome 18 แล้ว และการรองรับจะสิ้นสุดลงตาม กำหนดการการสนับสนุนไฟล์ Manifest เวอร์ชัน 1 การเปลี่ยนแปลงจากเวอร์ชัน 1 เป็นเวอร์ชัน 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() แทน

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

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

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

  • กำหนดพร็อพเพอร์ตี้ของแซนด์บ็อกซ์

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