آموزش: مهاجرت به Manifest V2

نسخه 1 مانیفست در Chrome 18 منسوخ شد و پشتیبانی طبق برنامه زمان‌بندی پشتیبانی نسخه 1 مانیفست حذف خواهد شد. تغییرات از نسخه 1 به نسخه 2 در دو دسته کلی قرار می گیرند: تغییرات API و تغییرات امنیتی.

این سند چک لیست هایی را برای انتقال برنامه های افزودنی Chrome شما از نسخه 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 را تعریف کنید و منابع را فهرست کنید (و در صورت تمایل یک خط مشی امنیتی محتوای جداگانه برای آن منابع).

  • آیا برنامه افزودنی شما صفحات وب خارجی را جاسازی می کند؟

  • ویژگی sandbox را تعریف کنید.

  • آیا کد یا کتابخانه شما از eval() ، new Function() ، innerHTML ، setTimeout() یا رشته هایی از کد JS عبور می کند که به صورت پویا ارزیابی می شوند؟

  • اگر در حال تجزیه کد JSON به یک شی هستید، از JSON.parse() استفاده کنید.

  • از یک کتابخانه سازگار با CSP، به عنوان مثال، AngularJS استفاده کنید.

  • یک ورودی sandbox در مانیفست خود ایجاد کنید و کد آسیب‌دیده را در sandbox با استفاده از postMessage() برای برقراری ارتباط با صفحه sandbox اجرا کنید.

  • آیا در حال بارگذاری کدهای خارجی مانند jQuery یا Google Analytics هستید؟

  • دانلود کتابخانه و بسته بندی آن در برنامه افزودنی خود را در نظر بگیرید، سپس آن را از بسته محلی بارگیری کنید.

  • دامنه HTTPS را که منبع را در قسمت "content_security_policy" مانیفست شما ارائه می دهد، فهرست کنید.

خلاصه تغییرات API

نسخه 2 مانیفست چند تغییر را در APIهای عملکرد مرورگر و عملکرد صفحه معرفی می کند و چند API قدیمی را با موارد جدیدتر جایگزین می کند.

تغییرات در اقدامات مرورگر

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 ها را حذف و تغییر داد

چند رابط برنامه افزودنی حذف شده و با نمونه‌های مشابه جایگزین شده‌اند:

  • ویژگی background_page با پس زمینه جایگزین شده است.
  • ویژگی chrome.self حذف شده است، از chrome.extension استفاده کنید.
  • ویژگی Port.tab با Port.sender جایگزین شده است.
  • API chrome.extension.getTabContentses() و chrome.extension.getExtensionTabs() با chrome.extension.getViews( { "type" : "tab" } ) جایگزین شده‌اند.

خلاصه تغییرات امنیتی

تعدادی از تغییرات مرتبط با امنیت همراه با انتقال از مانیفست نسخه 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">

اینها در افزونه های مانیفست 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"
  ],
...
}

جاسازی محتوای خارجی: خط‌مشی امنیت محتوا فقط به اسکریپت‌ها و اشیاء محلی اجازه می‌دهد تا از بسته شما بارگیری شوند، که مانع از وارد کردن کد ناشناخته توسط مهاجمان خارجی به برنامه افزودنی شما می‌شود. با این حال، مواقعی وجود دارد که می خواهید منابع ارائه شده خارجی مانند کد جی کوئری یا گوگل آنالیتیکس را بارگیری کنید. دو راه برای انجام این کار وجود دارد:

  1. کتابخانه مربوطه را به صورت محلی دانلود کنید (مانند jQuery) و آن را با برنامه افزودنی خود بسته بندی کنید.

  2. می‌توانید با فهرست کردن مبداهای HTTPS در بخش «content_security_policy» مانیفست خود، CSP را به روشی محدود کاهش دهید. برای گنجاندن کتابخانه ای مانند Google Analytics، این روشی است که باید در نظر بگیرید:

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

استفاده از ارزیابی پویا اسکریپت

شاید یکی از بزرگترین تغییرات در طرح جدید مانیفست v2 این باشد که افزونه‌ها دیگر نمی‌توانند از تکنیک‌های ارزیابی اسکریپت پویا مانند eval() یا new Function() استفاده کنند، یا رشته‌هایی از کد JS را به توابعی ارسال کنند که باعث می‌شود یک eval() ایجاد شود. استفاده می شود، مانند setTimeout() . علاوه بر این، برخی از کتابخانه‌های رایج جاوا اسکریپت، مانند Google Maps و کتابخانه‌های الگوی خاص، به استفاده از برخی از این تکنیک‌ها معروف هستند.

Chrome یک جعبه ایمنی برای صفحاتی که در مبدا خود اجرا می‌شوند، فراهم می‌کند، که دسترسی به کروم ممنوع است.* APIها. به منظور استفاده از eval() و موارد مشابه تحت خط مشی امنیتی محتوا جدید:

  1. یک ورودی sandbox در فایل مانیفست خود ایجاد کنید.
  2. در ورودی sandbox، صفحاتی را که می‌خواهید در sandbox اجرا شوند فهرست کنید.
  3. از ارسال پیام از طریق postMessage() برای برقراری ارتباط با صفحه sandbox شده استفاده کنید.

برای جزئیات بیشتر در مورد نحوه انجام این کار، به مستندات Sandboxing Eval مراجعه کنید.

بیشتر خواندن

تغییرات در مانیفست نسخه 2 برای هدایت توسعه دهندگان به سمت ایجاد برنامه های افزودنی و برنامه های امن تر و با معماری قوی تر طراحی شده است. برای مشاهده لیست کامل تغییرات از نسخه 1 به نسخه 2 مانیفست، به مستندات فایل مانیفست مراجعه کنید. برای اطلاعات بیشتر در مورد استفاده از sandboxing برای جداسازی کد ناامن، مقاله sandboxing eval را بخوانید. می‌توانید با مراجعه به آموزش مرتبط با برنامه‌های افزودنی و معرفی خوب HTML5Rocks، درباره خط‌مشی امنیت محتوا اطلاعات بیشتری کسب کنید.