Изменение веб-страницы

Прежде всего, создайте новую директорию с именем "modify-page". В этой директории создайте файл "manifest.json" со следующим содержимым:

{

  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://developer.mozilla.org/*"],
      "js": ["page-eater.js"]
    }
  ]

}

Ключ content_scripts определяет способ загрузки скриптов на страницы, соответствующие шаблонам URL-адресов. В данном случае content_scripts указывает браузеру загрузить скрипт с именем "page-eater.js" на все страницы по адресу https://developer.mozilla.org/.

Затем создайте файл "page-eater.js" в каталоге "modify-page" и добавьте в него следующее содержимое:

document.body.textContent = "";

let header = document.createElement('h1');
header.textContent = "This page has been eaten";
document.body.appendChild(header);

Теперь установите расширение и перейдите по адресу https://developer.mozilla.org/. Страница должна выглядеть так:

Что если вы всё ещё хотите "пожирать" страницы, но только по запросу пользователя? Давайте обновим этот пример, чтобы вставлять скрипт содержимого только при нажатии пункта контекстного меню.

Сначала обновите "manifest.json" следующим содержимым:

{

  "manifest_version": 2,
  "name": "modify-page",
  "version": "1.0",

  "permissions": [
    "activeTab",
    "contextMenus"
  ],

  "background": {
    "scripts": ["background.js"]
  }

}

Здесь мы удалили ключ content_scripts и добавили два новых:

• permissions: для вставки скриптов на страницы необходимо разрешение на изменение страницы. Разрешение activeTab позволяет временно получить это для текущей активной вкладки. Нам также необходимо разрешение contextMenus для возможности добавления пунктов контекстного меню.
• background: мы используем его для загрузки постоянного "фонового скрипта" с именем background.js, в котором мы настроим контекстное меню и вставим скрипт содержимого.

Создадим этот файл. Создайте новый файл с именем background.js в каталоге modify-page и добавьте в него следующее содержимое:

browser.contextMenus.create({
  id: "eat-page",
  title: "Eat this page"
});

browser.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "eat-page") {
    browser.tabs.executeScript({
      file: "page-eater.js"
    });
  }
});

В этом скрипте мы создаём пункт контекстного меню с определённым идентификатором и заголовком (текстом, отображаемым в контекстном меню). Затем мы настраиваем обработчик событий, чтобы при нажатии пункта контекстного меню проверить, является ли это наш пункт eat-page. Если да, мы вставляем "page-eater.js" в текущую вкладку с помощью API tabs.executeScript(). Этот API необязательно принимает идентификатор вкладки; мы опустили идентификатор, что означает, что скрипт будет вставлен в текущую активную вкладку.

На этом этапе расширение должно выглядеть так:

modify-page/
    background.js
    manifest.json
    page-eater.js

Теперь перезагрузите расширение, откройте любую страницу, откройте контекстное меню и выберите "Съесть эту страницу":

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

Обновим наш пример, чтобы показать, как отправлять сообщения из фонового скрипта.

Сначала отредактируйте background.js следующим содержимым:

browser.contextMenus.create({
  id: "eat-page",
  title: "Eat this page"
});

function messageTab(tabs) {
  browser.tabs.sendMessage(tabs[0].id, {
    replacement: "Message from the extension!"
  });
}

function onExecuted(result) {
    let querying = browser.tabs.query({
        active: true,
        currentWindow: true
    });
    querying.then(messageTab);
}

browser.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "eat-page") {
    let executing = browser.tabs.executeScript({
      file: "page-eater.js"
    });
    executing.then(onExecuted);
  }
});

Теперь, после вставки page-eater.js, мы используем tabs.query() для получения активной вкладки, а затем используем tabs.sendMessage() для отправки сообщения скриптам содержимого, загруженным в эту вкладку. Сообщение содержит полезную нагрузку {replacement: "Message from the extension!"}.

Далее обновите page-eater.js следующим образом:

function eatPageReceiver(request, sender, sendResponse) {
  document.body.textContent = "";
  let header = document.createElement('h1');
  header.textContent = request.replacement;
  document.body.appendChild(header);
}
browser.runtime.onMessage.addListener(eatPageReceiver);

Теперь скрипт содержимого вместо непосредственного "поедания" страницы слушает сообщения с помощью runtime.onMessage. При получении сообщения скрипт выполняет практически тот же код, что и раньше, за исключением того, что текст замены берётся из request.replacement.

Поскольку tabs.executeScript() — асинхронная функция, и для того, чтобы убедиться, что мы отправляем сообщение только после добавления обработчика в page-eater.js, мы используем onExecuted(), который вызывается после выполнения page-eater.js.

Если нам нужно отправлять сообщения обратно из скрипта содержимого на фоновую страницу, мы бы использовали runtime.sendMessage() вместо tabs.sendMessage(), например:

browser.runtime.sendMessage({
    title: "from page-eater.js"
});

• Руководство по скриптам содержимого
• content_scripts ключ манифеста
• permissions ключ манифеста
• tabs.executeScript()
• tabs.insertCSS()
• tabs.sendMessage()
• runtime.sendMessage()
• runtime.onMessage
• Примеры, использующие content_scripts:
  • borderify
  • emoji-substitution
  • notify-link-clicks-i18n
  • page-to-extension-messaging
• Примеры, использующие tabs.executeScript():
  • beastify
  • context-menu-copy-link-with-types