google-chrome-extension учебник
Начало работы с расширением google-chrome

замечания

Абсолютный минимальный пример

Любые расширения Chrome начинаются как распакованное расширение : папка, содержащая файлы расширения.

Один файл, который должен содержать файл manifest.json , описывает основные свойства расширения. Многие из свойств этого файла являются необязательными, но вот абсолютный минимальный файл manifest.json :

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Создайте папку (например, myExtension ) где-нибудь, добавьте manifest.json как указано выше.

Затем вам необходимо загрузить расширение в Chrome.

1. Откройте chrome://extensions/ page, доступную, хотя Меню> Другие инструменты> Расширения .
2. Включите режим разработчика с помощью флажка в правом верхнем углу, если он еще не включен.
3. Нажмите кнопку « Загрузить распакованное расширение ...» и выберите созданную папку myExtension .

Это оно! Ваше первое расширение загружается Chrome:

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

Важно. При внесении каких-либо изменений в расширение, не забудьте вернуться к chrome://extensions/ и нажмите ссылку « Обновить» для вашего расширения после внесения изменений. В случае скриптов содержимого перезагрузите целевую страницу.

Справочная страница

Фоновые страницы - это неявные страницы, содержащие фоновые сценарии. Фоновый сценарий - это один длинный сценарий для управления некоторой задачей или состоянием. Он существует для времени жизни вашего расширения, и только один экземпляр его за раз активен.

Вы можете объявить это в своем manifest.json :

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

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

У вас есть доступ ко всем разрешенным chrome.* API.

Существует два типа фоновых страниц: постоянные фоновые страницы, которые всегда открыты, и страницы событий, которые открываются и закрываются по мере необходимости.

Если вы хотите, чтобы ваша фоновая страница была непостоянной, вам просто нужно установить для параметра persistent -flag значение false:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

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

Пример. Сначала установлено приложение или расширение.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

Скрипты содержимого

Скрипт содержимого - это код расширения, который работает рядом с обычной страницей.

Они имеют полный доступ к DOM веб-страницы (и фактически являются единственной частью расширения, которые могут получить доступ к DOM страницы ), но код JavaScript изолирован, концепция называется « Изолированный мир» . Каждое расширение имеет свой собственный скрипт контекста JavaScript, невидимый для других и страницы, что предотвращает конфликты кода.

Пример определения в manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

Атрибуты имеют следующее значение:

Скрипты содержимого также можно вводить по требованию, используя chrome.tabs.executeScript , который называется Programmatic Injection .

Смотрите также

• Официальная документация: Скрипты содержимого
• Документация по переполнению стека: скрипты содержимого

Страница параметров

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

Версия 2

Начиная с Chrome 40 существует возможность иметь страницу параметров в виде предопределенного диалога в chrome: // extensions .

Способ определения страницы параметров в manifest.json выглядит следующим образом:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

Эта страница параметров будет вести себя как диалог, она откроется как всплывающее окно, где будет отображаться файл options.html . chrome_style применит таблицу стилей Chrome для целей согласованности стилей на странице параметров.

Параметры будут автоматически открываться через контекстное меню кнопки расширения или страницы chrome: // extensions .

Вы также можете открыть страницу параметров программно , например, из контекстного меню:

chrome.runtime.openOptionsPage();

Версия 1 ( устаревшая )

Пример определения в manifest.json :

"options_page": "options.html"

Рекомендуется использовать версию 2, так как поведение options_ui скоро будет применено к страницам версий версии 1.

Место хранения

Обычно настройки должны сохраняться, поэтому рекомендуется использовать chrome.storage . Разрешения могут быть объявлены следующим образом в manifest.json :

"permissions": [
   "storage"
]

Официальная документация

• Страница параметров - Версия 1
• Страница параметров - Версия 2
• API хранения

Создать новую вкладку

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

Вы можете использовать большинство методов chrome.tabs объявляя о любых разрешениях. Теперь мы сосредоточимся на chrome.tabs.create

_{Примечание. Новая вкладка будет открыта без popup предупреждения.}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

Вы можете узнать больше об объекте табуляции, в официальном хромовом разработчике