компилируется...
Перейти к основному содержанию
Рекомендовать во Вконтакте Рекомендовать в Фейсбуке Рекомендовать в Твиттере

Как создать расширение для Chrome

Если вам интересно, как создать расширение Chrome, документация по расширениям Chrome отлично подойдет для базовых задач. Однако для использования более продвинутых функций требуется потратить время на Google и Stack Overflow. Давайте сделаем своё расширение Chrome, взаимодействующее со страницей: которое найдет первую внешнюю ссылку на странице и откроет ее на новой вкладке.

manifest.json

Файл manifest.json сообщает Chrome важную информацию о вашем расширении, его имени и необходимых разрешениях.

Наиболее простым возможным расширением является обычный каталог с файлом manifest.json. Давайте создадим каталог и поместим следующий JSON в manifest.json:

{
  "manifest_version": 2,
  "name": "My First Extension",
  "version": "1.0.0"
}

Это самый простой manifest.json, со всеми заполненными обязательными полями. manifest_version всегда должна быть 2, поскольку версия 1 не поддерживается по состоянию на январь 2014 года. Пока что наше расширение абсолютно ничего не делает, но в любом случае давайте загрузим его в Chrome.

Установка расширения в Chrome

Чтобы загрузить расширение в Chrome, откройте chrome://extensions/ в браузере и нажмите кнопку "Режим разработчика" (Developer mode) в правом верхнем углу. Теперь нажмите кнопку "Загрузить распакованное расширение" (Load unpacked extension) и выберите директорию расширения. Теперь вы должны увидеть расширение в списке.

Когда вы изменяете или добавляете код в расширение, просто вернитесь на эту страницу и перезагрузите страницу. Хром перезагрузит ваше расширение.

Скрипты контента

Скрипт содержимого (content script) - это "файл JavaScript, который выполняется в контексте веб-страниц". Это означает, что скрипт содержимого может взаимодействовать с веб-страницами, которые посещает браузер. Не каждый JavaScript-файл расширения Chrome может сделать это; мы посмотрим, почему позже.

Давайте добавим скрипт контента под названием content.js:

// content.js
alert("Hello from your Chrome extension!")

Чтобы включить скрипт, нам нужно сообщить об этом в наш файл manifest.json.

Добавьте это в свой manifest.json файл:

"content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["content.js"]
  }
]

Это говорит Chrome о необходимости вставлять файл content.js в каждую страницу, которую мы посещаем, используя специальный шаблон URL <all_urls>. Если мы хотим вставить скрипт только на некоторых страницах, мы можем использовать специальные шаблоны. Вот несколько примеров значений для "matches":

  • ["https://mail.google.com/", "http://mail.google.com/"] внедряет наш скрипт в HTTPS и HTTP Gmail. Если у нас есть / в конце вместо /*, то он точно соответствует URL-адресам, и поэтому будет внедряться только в https://mail.google.com/, а не в https://mail.google.com/mail/u/0/#inbox. Обычно это не то, чего вы хотите.
  • http://*/* будет соответствовать любому URL-адресу http, но только для схемы http. Например, это шаблон не добавит ваш скрипт в https-сайты.

Перезагрузите расширение Chrome. На каждой странице, которую вы посещаете сейчас, появляется уведомление. Вместо этого давайте начнем логировать первый URL-адрес страницы.

Логирование URL

jQuery не нужен, но он делает манипуляцию с DOM проще. Сначала скачайте версию jQuery с CDN jQuery и поместите ее в папку вашего расширения. Я скачал последнюю уменьшенную версию jquery-2.1.3.min.js. Чтобы загрузить его, добавьте в manifest.json перед "content.js". Весь ваш manifest.json должен выглядеть вот так:

{
  "manifest_version": 2,
  "name": "My First Extension",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["jquery-2.1.3.min.js", "content.js"]
    }
  ]
}

Теперь, когда у нас есть jQuery, давайте используем его для логирования первой внешней ссылки на странице, добавим в content.js:

// content.js
var firstHref = $("a[href^='http']").eq(0).attr("href");

console.log(firstHref);

Обратите внимание, что нам не нужно использовать jQuery для проверки загрузки документа. По умолчанию Chrome вводит сценарии содержимого после загрузки DOM.

Попробуйте - вы должны видеть результаты в вашей консоли на каждой странице, которую вы посещаете.

Действия браузера

Когда расширение добавляет небольшой значок рядом с адресной строкой, это действие браузера. Ваше расширение может прослушивать нажатия на эту кнопку, а затем сделать что-нибудь.

Поместите файл icon.png из руководства по расширению Google в папку расширений и добавьте его в файл manifest.json:

"browser_action": {
  "default_icon": "icon.png"
}

Для того чтобы использовать действие браузера, нам нужно добавить передачу сообщения.

Передача сообщений

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

Контент скрипты имеет некоторые ограничения. Они не могут использовать chrome.* API, за исключением: i18n, runtime и storage.

Поэтому скрипт содержимого сможет извлечь URL-адрес из текущей страницы, но ему нужно будет передать этот URL в фоновый сценарий, чтобы сделать с ним что-то полезное. Для общения мы будем использовать то, что Google называет передачей сообщений, что позволяет скриптам отправлять и прослушивать сообщения. Это единственный способ взаимодействия скриптов содержимого и фоновых скриптов.

Добавьте следующее, чтобы рассказать manifest.json о фоновом скрипте:

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

Теперь мы добавим background.js:

// background.js // Вызывается, когда пользователь нажимает на действие браузера.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Отправить сообщение на активную вкладку
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

Этот код посылает произвольный JSON на текущую вкладку. Ключами JSON может быть что угодно, но для простоты я выбрал "message". Теперь нам нужно прослушать это сообщение в content.js:

// content.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = $("a[href^='http']").eq(0).attr("href");

      console.log(firstHref);
    }
  }
);

Обратите внимание, что весь наш предыдущий код был перемещен в слушателя (listener), так что он запускается только после получения сообщения. Каждый раз, когда вы нажимаете на значок действия браузера, вы должны видеть URL-адрес, который будет записан в консоль. Если он не работает, попробуйте перезагрузить расширение, а затем перезагрузить страницу.

Открытие новой вкладки

Мы можем использовать API для открытия новой вкладки с помощью chrome.tabs:

chrome.tabs.create({"url": "http://google.com"});

Но chrome.tabs могут использоваться только в background.js, поэтому нам придется добавить еще несколько сообщений, поскольку background.js может открыть вкладку, но не может захватить URL-адрес. Вот в чём идея:

  • Отслеживать клик на действие браузера в background.js. Когда кнопка нажата, отправить событие clicked_browser_action в content.js.
  • Когда content.js получает событие, он получает URL первой ссылки на странице. Затем он отправляет open_new_tab обратно в background.js для открытия URL-адреса.
  • background.js слушает open_new_tab и открывает новую вкладку с указанным URL-адресом при получении сообщения.

При нажатии на действие браузера вызывается background.js, который отправляет сообщение на content.js, который отправляет URL обратно на background.js, который открывает новую вкладку с заданным URL.

Во-первых, нам нужно сказать content.js, чтобы он отправил URL на background.js. Для использования этого кода измените файл content.js:

// content.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
      var firstHref = $("a[href^='http']").eq(0).attr("href");

      console.log(firstHref);

      // Эта строка новая!
      chrome.runtime.sendMessage({"message": "open_new_tab", "url": firstHref});
    }
  }
);

Теперь нам нужно добавить код, чтобы сказать background.js, что нужно слушать это событие:

// background.js 
// Вызывается, когда пользователь нажимает на действие браузера.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Отправить сообщение на активную вкладку
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

// Этот блок новый!
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "open_new_tab" ) {
      chrome.tabs.create({"url": request.url});
    }
  }
);

Теперь, когда вы нажимаете на значок действия браузера, открывается новая вкладка с первым внешним URL-адресом на странице.

Итог

Полный текст content.js и background.js приведен выше. Вот полный manifest.json:

{
  "manifest_version": 2,
  "name": "My First Extension",
  "version": "1.0.0",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["jquery-2.1.3.min.js", "content.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png"
  }
}

И вот полная структура каталога:

.
├── background.js
├── content.js
├── icon.png
├── jquery-2.1.3.min.js
└── manifest.json

Для получения дополнительной информации обратитесь к официальной документации по расширениям Chrome.

Комментарии

Пока что нет комментариев, вы можете быть первым.
Войти или Регистрация , чтобы оставлять комментарии.

Лучшие публикации

Популярные теги

Наш сайт использует куки. Узнайте больше о нашем использовании куки: политика в отношении файлов cookie
Наш сайт существует только благодаря показу онлайн-рекламы нашим посетителям.
Пожалуйста, поддержите нас, отключив блокировку рекламы.