Что такое Chrome Scripting API?

Представляем Chrome Scripting API и Manifest V3

Chrome Scripting API — одна из последних функций, представленных в расширении для браузера Chrome. Он является частью обновления Manifest V3 и способен внедрятьJavaScript и CSS на веб-сайты с помощью Chrome.

В этой статье я расскажу о некоторых основных функциях Chrome Scripting API, чтобы дать вам лучшее представление о нем.

Что такое Chrome Scripting API?

Chrome Scripting — это новое пространство имен, добавленное в Manifest V3.

Он заменяет методы Tab API из Manifest V2 и может внедрять сценарии и стили в веб-сайты. Например, методы chrome.tabs.executeScript и chrome.tabs.insertCSS были перемещены из Tab API в Chrome Scripting API с обновлением MV3.

Причины ввести новое пространство имен для сценариев?

Как я уже упоминал, большинство функций сценариев уже были частью Tab API. Итак, почему Chrome ввел новое пространство имен для скриптов?

Есть несколько причин для этого решения, и я перечислил 3 основные причины из них ниже:

1. Снижает нагрузку на Tab API

В последние годы API вкладок был перегружен различными функциями, такими как управление вкладками, управление выбором, организация окон и навигация. Более того, некоторые из этих функций требуют обработки разрешений, и разработчики часто путают их с возможностями сценариев.

Введение Scripting API решает эту проблему, удаляя все функции сценариев из Tab API.

2. Уязвимости безопасности в Script API

Если мы рассмотрим API-интерфейс executeScript, он позволяет расширениям выполнять произвольную строку кода на целевых вкладках. Такое поведение позволяет разработчикам-злоумышленникам получать произвольные сценарии с удаленного сервера и запускать их на любой странице.

3. Дополнительные возможности сценариев

Одной из основных целей обновления Manifest V3 было расширение возможностей сценариев для платформы расширений Chrome. Теперь у него есть такие функции, как сценарии динамического содержимого, целевые фреймы и целевые контексты без вкладок по сравнению с Manifest V2.

Я думаю, теперь вы понимаете, что такое Scripting API и почему он был введен. Итак, давайте посмотрим, в чем основные различия между Scripting API и Tab API.

Chrome Scripting API против Tab API

Хотя Scripting API был представлен для переноса функций из Tab API, мы можем увидеть несколько важных улучшений функций. Итак, я возьму несколько примеров использования функций chrome.tabs.executeScript и chrome.scripting.executeScript и выделю для вас различия.

1. Позволяет нацеливаться на несколько фреймов с помощью одного вызова API.

В Manifest V2 разработчикам разрешалось нацеливаться только на все фреймы на вкладке или на одну конкретную вкладку. Например, в приведенном ниже коде показано, как мы можем получить все кадры сразу и выполнить на них скрипты один за другим.

// Manifest V2 
chrome.browserAction.onClicked.addListener((tab) => {
  chrome.webNavigation.getAllFrames({tabId: tab.id}, (frames) => {
    let frame1 = frames[0].frameId;
    let frame2 = frames[1].frameId;

    chrome.tabs.executeScript(tab.id, {
      frameId: frame1,
      file: 'content-script.js',
    });
    chrome.tabs.executeScript(tab.id, {
      frameId: frame2,
      file: 'content-script.js',
    });
  });
})

Но с обновлением Manifest V3 мы можем выполнять сценарии сразу на нескольких выбранных кадрах.

Обновление Manifest V3 заменило свойство frameId Tab API новым свойством с именем frameIds, которое принимает несколько идентификаторов фреймов одновременно. Итак, если мы снова рассмотрим приведенный выше пример, теперь мы можем выбрать оба кадра сразу для выполнения скрипта.

// Manifest V3 
chrome.action.onClicked.addListener(async (tab) => {
  let frames = await chrome.webNavigation.getAllFrames({tabId: tab.id});
  let frame1 = frames[0].frameId;
  let frame2 = frames[1].frameId;

  chrome.scripting.executeScript({
    target: {
      tabId: tab.id,
      frameIds: [frame1, frame2],
    },
    files: ['content-script.js'],
  });
});

Примечание. Кроме того, вы можете одновременно выполнять несколько скриптов, поскольку свойство files принимает скрипты в виде массива.

2. Позволяет расширениям внедрять функции в виде скрипта контента.

В Manifest V2 единственным способом внедрить сценарий на веб-страницу было создание строки динамического кода.

Например, если вы хотите запускать сценарий, когда пользователи нажимают кнопку действий, вам нужно получить файл сценария, создать динамический код, как показано ниже, а затем выполнить его.

// Manifest V2 
chrome.browserAction.onClicked.addListener(async (tab) => {
  let response = await fetch('../script.js');
  let userScript = await response.text();

  chrome.tabs.executeScript({
    code: userScript,
  });
});

Manifest V3 улучшил этот процесс, и теперь мы можем напрямую передавать функции и аргументы в функцию executeScripts. Например, мы можем написать ту же функцию с помощью Manifest V3 и передать имя функции и аргумент, используя атрибуты func и args.

// Manifest V3 
function welcometUser(name) {
  alert(`Welcome, ${name}!`);
}
chrome.action.onClicked.addListener(async (tab) => {
  let response = await fetch('../script.js');  
  let user = await response.json();
  let name= user.name|| '<NAME>';

  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    func: welcometUser,
    args: [name],
  });
});

3. Улучшения в возврате результатов внедрения скриптов

Еще одно важное улучшение, которое мы можем заметить, — это метод возврата результатов внедрения скрипта. Если мы рассмотрим функцию executeScript с Manifest V2, она вернет массив простых результатов выполнения.

В Manifest V3 функции могут возвращать массивы объектов.

Кроме того, эти объекты результатов указывают идентификатор кадра для каждого результата, что значительно упрощает разработчикам выполнение действий на их основе.

// Manifest V3 
chrome.action.onClicked.addListener(async (tab) => {
  let results = await chrome.scripting.executeScript({
    target: {tabId: tab.id, allFrames: true},
    files: ['script.js'],
  });
  // results == [
  //   {frameId: 0, result: x},
  //   {frameId: 1235, result: y},
  //   {frameId: 1234, result: z}
  // ]

Заключение

В этой статье я представил Chrome Scripting API и причины введения отдельного API для сценариев.

Хотя большинство функций похожи на API вкладок Manifest V2, в обновлении Manifest V3 есть несколько интересных улучшений.

Итак, я рекомендую вам ознакомиться с ними, чтобы улучшить свои навыки разработки расширений Chrome.

Спасибо за чтение !!!

Создавайте компонуемые веб-приложения

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые интерфейсы и серверные части с мощным и приятным опытом разработки.

Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →