Як перейти на маніфест V3 для розширень Chrome

Хоча я не є звичайним програмістом розширень Chrome, я, безсумнівно, закодував достатньо розширень і маю достатньо широке портфоліо веб-розробок, щоб знати, як вирішити це завдання. Однак нещодавно мій клієнт відхилив одне з моїх розширень, оскільки я отримав відгук про те, що моє розширення «застаріле».

Поки я намагався зрозуміти, що не так, я заховав своє збентеження під килим і негайно почав своє глибоке занурення назад у світ розширень Chrome. На жаль, інформації про Manifest V3 було мало, і мені було важко швидко зрозуміти, що означає цей перехід.

Зайве говорити, що з незавершеною роботою мені довелося старанно орієнтуватися Документація Google для розробників Chrome і зрозуміти речі для себе. Поки я виконав роботу, я не хотів, щоб мої знання та дослідження в цій галузі пропали даремно, і вирішив поділитися тим, до чого хотів би мати легкий доступ під час мого навчання.

Чому перехід на Manifest 3 важливий

Manifest V3 – це API, який Google використовуватиме у своєму браузері Chrome. Він є наступником поточного API, Manifest V2, і керує взаємодією розширень Chrome із веб-переглядачем. Manifest V3 вносить значні зміни в правила для розширень, деякі з яких стануть новою опорою від V2, до якої ми звикли.

Перехід на Manifest V3 можна підсумувати таким чином:

1. Перехід триває з 2018 року.
2. Офіційний випуск Manifest V3 почнеться в січні 2023 року.
3. До червня 2023 року розширення, які запускають Manifest V2, більше не будуть доступні у Веб-магазині Chrome.
4. Розширення, які не відповідають новим правилам, представленим у Manifest V3, згодом буде видалено з Веб-магазину Chrome.

Одна з головних цілей Manifest V3 — зробити користувачів безпечнішими та покращити загальну роботу веб-переглядача. Раніше багато розширень браузера покладалися на код у хмарі, що означало, що це могло бути важко оцінити, чи було розширення ризикованим. Manifest V3 має на меті вирішити цю проблему, вимагаючи, щоб розширення містили весь код, який вони запускатимуть, що дозволяє Google сканувати їх і виявляти потенційні ризики. Це також змушує розширення запитувати дозвіл від Google на зміни, які вони можуть впроваджувати у веб-переглядачі.

Важливо бути в курсі переходу Google на Manifest V3, оскільки він запроваджує нові правила для розширень, спрямованих на покращення безпеки користувачів і загальну роботу веб-переглядача, а розширення, які не відповідають цим правилам, з часом буде видалено з веб-сайту Chrome Магазин.

Коротше кажучи, уся ваша важка робота зі створення розширень, які використовували Manifest V2, може бути марною, якщо ви не зробите цей перехід у найближчі місяці.

Ключові відмінності між Manifest V2 і V3

Між ними багато відмінностей, і хоча я настійно рекомендую вам прочитати далі Посібник Chrome «Міграція на Manifest V3»., ось короткий і приємний підсумок ключових моментів:

1. Працівники сфери обслуговування замінити фонові сторінки в Manifest V3.
2. Модифікація мережевого запиту обробляється за допомогою нового declarativeNetRequest API у Manifest V3.
3. У Manifest V3 розширення можуть виконувати лише JavaScript, який включено в їхній пакет, і не можуть використовувати віддалено розміщений код.
4. Представляємо Manifest V3 promise підтримка багатьох методів, хоча зворотні виклики все ще підтримуються як альтернатива.
5. Дозволи хоста в Manifest V3 є окремим елементом і мають бути вказані в "host_permissions" поле.
6. Політика безпеки вмісту в Manifest V3 — це об’єкт із членами, що представляють контекст альтернативної політики безпеки вмісту (CSP), а не рядок, як це було в Manifest V2.

У простому маніфесті розширення Chrome, який змінює фон веб-сторінки, це може виглядати так:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

Якщо ви виявите, що деякі з наведених вище тегів здаються вам чужими, продовжуйте читати, щоб дізнатися саме те, що вам потрібно знати.

Як плавно перейти до Manifest V3

Я підсумував перехід до Manifest V3 у чотирьох ключових сферах. Звичайно, незважаючи на те, що в новому Manifest V3 є багато переваг, які потрібно втілити зі старого Manifest V2, впровадження змін у цих чотирьох сферах допоможе вашому Chrome Extension стати на правильний шлях для остаточного переходу.

Чотири ключові сфери:

1. Оновлення базової структури вашого маніфесту.
2. Змініть дозволи хосту.
3. Оновіть політику безпеки вмісту.
4. Змініть обробку мережевих запитів.

З цими чотирма розділами основи вашого маніфесту будуть готові до переходу на маніфест V3. Давайте детально розглянемо кожен із цих ключових аспектів і подивимося, як ми можемо працювати над тим, щоб ваше розширення Chrome забезпечило майбутнє після цього переходу.

Оновлення базової структури вашого маніфесту

Оновлення базової структури вашого маніфесту є першим кроком у переході на Manifest V3. Найважливішою зміною, яку вам потрібно буде зробити, є зміна значення "manifest_version" елемент до 3, який визначає, що ви використовуєте набір функцій Manifest V3.

Однією з головних відмінностей між Manifest V2 і V3 є заміна фонових сторінок на один робочий сервіс розширення в Manifest V3. Вам потрібно буде зареєструвати сервісного працівника під "background" поле, використовуючи в "service_worker" ключ і вкажіть один файл JavaScript. Навіть незважаючи на те, що Manifest V3 не підтримує кілька фонових сценаріїв, ви можете додатково оголосити сервіс-воркер як модуль ES, вказавши "type": "module", що дозволяє імпортувати подальший код.

У Manifest V3, "browser_action" та "page_action" властивості об'єднані в єдине "action" власність. Вам потрібно буде замінити ці властивості на "action" у вашому маніфесті. Аналогічно, "chrome.browserAction" та "chrome.pageAction" API об’єднані в єдиний API «Дії» в Manifest V3, і вам потрібно буде перейти на цей API.

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

Загалом, оновлення базової структури вашого маніфесту є важливим кроком у процесі переходу на Manifest V3, оскільки це дозволяє вам скористатися новими функціями та змінами, представленими в цій версії API.

Змініть дозволи хосту

Другим кроком у переході на Manifest V3 є зміна дозволів хосту. У Manifest V2 ви вказуєте дозволи хоста в "permissions" у файлі маніфесту. У Manifest V3 дозволи хоста є окремим елементом, і ви повинні вказати їх у "host_permissions" у файлі маніфесту.

Ось приклад того, як змінити дозволи хосту:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

Оновіть політику безпеки вмісту

Щоб оновити CSP вашого розширення Manifest V2, щоб він був сумісним із Manifest V3, вам потрібно буде внести деякі зміни у свій файл маніфесту. У Manifest V2 CSP було зазначено як рядок у "content_security_policy" поле маніфесту.

У Manifest V3 CSP тепер є об’єктом з різними членами, що представляють альтернативні контексти CSP. Замість єдиного "content_security_policy" тепер вам потрібно буде вказати окремі поля для "content_security_policy.extension_pages" та "content_security_policy.sandbox"залежно від типу сторінок розширення, які ви використовуєте.

Ви також повинні видалити будь-які посилання на зовнішні домени в "script-src", "worker-src", "object-src" та "style-src" директиви, якщо вони присутні. Важливо внести ці оновлення до вашого CSP, щоб забезпечити безпеку та стабільність вашого розширення в Manifest V3.

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

Змініть обробку мережевих запитів

Останнім кроком у переході на Manifest V3 є зміна обробки мережевих запитів. У Manifest V2 ви б використовували chrome.webRequest API для зміни мережевих запитів. Однак у Manifest V3 цей API замінено на declarativeNetRequest API.

Щоб використовувати цей новий API, вам потрібно буде вказати declarativeNetRequest дозвіл у вашому маніфесті та оновіть свій код для використання нового API. Однією з ключових відмінностей між двома API є те, що declarativeNetRequest API вимагає, щоб ви вказали список заздалегідь визначених адрес для блокування, а не блокували цілі категорії запитів HTTP, як це можна було б зробити за допомогою chrome.webRequest API.

Важливо внести ці зміни у свій код, щоб гарантувати, що ваше розширення продовжуватиме працювати належним чином у Manifest V3. Ось приклад того, як можна змінити свій маніфест, щоб використовувати declarativeNetRequest API у Manifest V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

Вам також потрібно оновити код розширення, щоб використовувати declarativeNetRequest API замість chrome.webRequest API.

Інші аспекти, які потрібно перевірити

Те, що я розповів, це лише верхівка айсберга. Звичайно, якби я хотів охопити все, я міг би бути тут днями, і не було б сенсу мати посібники Google для розробників Chrome. Хоча те, що я описав, допоможе вам підготуватися до майбутнього, щоб озброїти свої розширення Chrome під час цього переходу, ось деякі інші речі, на які ви можете звернути увагу, щоб переконатися, що ваші розширення функціонують якнайкраще.

• Перенесення фонових сценаріїв у контекст виконання Service Worker: Як згадувалося раніше, Manifest V3 замінює фонові сторінки на один робочий сервіс розширення, тому може знадобитися оновити фонові сценарії для адаптації до контексту виконання сервісного робочого.
• Уніфікація **chrome.browserAction** та **chrome.pageAction** API: Ці два еквівалентні API об’єднані в один API у Manifest V3, тому може знадобитися перейти на API Action.
• Перенесення функцій, які очікують фонового контексту Manifest V2: Прийняття сервісних працівників у Manifest V3 несумісне з такими методами, як chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs() та chrome.extension.getViews(). Може знадобитися перейти до дизайну, який передає повідомлення між іншими контекстами та фоновим службовцем.
• Переміщення запитів CORS у сценаріях вмісту до фонової служби обробки: Можливо, знадобиться перемістити запити CORS у сценаріях вмісту до фонового службовця, щоб відповідати Manifest V3.
• Відмова від виконання зовнішнього коду або довільних рядків: Manifest V3 більше не дозволяє використовувати зовнішню логіку chrome.scripting.executeScript({code: '...'}), eval() та new Function(). Можливо, знадобиться перемістити весь зовнішній код (JavaScript, WebAssembly, CSS) до набору розширень, оновити посилання на сценарії та стилі, щоб завантажити ресурси з набору розширень, і використовувати chrome.runtime.getURL() для створення URL ресурсів під час виконання.
• Оновлення певних сценаріїв і методів CSS в API вкладок: Як згадувалося раніше, кілька методів переходять від API вкладок до API сценаріїв у Manifest V3. Може знадобитися оновити будь-які виклики цих методів, щоб використовувати правильний API Manifest V3.

І багато іншого!

Не соромтеся приділити трохи часу, щоб бути в курсі всіх змін. Зрештою, ця зміна неминуча, і якщо ви не хочете, щоб ваші розширення Manifest V2 були втрачені через уникнення цього переходу, тоді витратите деякий час, озброївшись необхідними знаннями.

З іншого боку, якщо ви новачок у програмуванні розширень Chrome і хочете почати, чудовий спосіб зробити це — зануритися у світ інструментів веб-розробника Chrome. Я зробив це на курсі Навчання Linkedin, завдяки чому я досить швидко навчився. Отримавши базові знання, поверніться до цієї статті та перекладіть те, що знаєте, на Manifest V3!

Отже, як я буду використовувати функції нового Manifest V3 у майбутньому?

Ну, для мене перехід на Manifest V3 і видалення chrome.webRequest Схоже, що API відводить розширення від використання, орієнтованого на дані (наприклад, блокувальники реклами), до більш функціонального використання на основі додатків. Останнім часом я тримався подалі від розробки додатків, оскільки це може стати досить ресурсомісткий часом. Однак ця зміна може бути тим, що повертає мене назад!

Останнім часом розвиток інструментів штучного інтелекту, багато з яких мають доступні для використання API, викликав безліч нових і свіжих програм SaaS. Особисто я вважаю, що це станеться в ідеальний час із переходом до розширень Chrome, які базуються на додатках! Хоча багато старих розширень можуть бути знищені в результаті цього переходу, багато нових, побудованих на основі нових ідей SaaS, прийдуть на їхнє місце.

Отже, це захоплююче оновлення, щоб скористатися ним і оновити старі розширення або створити нові! Особисто я бачу багато можливостей у використанні API, які включають штучний інтелект, який використовується в розширеннях для покращення досвіду перегляду веб-сторінок користувачами. Але насправді це лише верхівка айсберга. Якщо ви хочете по-справжньому ввійти в справу за допомогою власних професійних розширень або зв’язатися з компаніями, щоб створити/оновити розширення для них, я рекомендую оновлення вашого облікового запису Gmail за переваги співпраці, розробки та публікації розширень у Веб-магазині Chrome.

Однак пам’ятайте, що вимоги кожного розробника різні, тож дізнайтеся, що вам потрібно, щоб підтримувати на плаву ваші поточні розширення чи нові!

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/