что такое расширение хром

Апплеты, которые добавляют новые функции в ваш браузер и персонализируют работу в Интернете.

chromeрасширениеHTML\JS\CSS\imagesи другие можно найти вwebСжатый пакет ресурсов, используемых на странице, который можно расширитьchromeФункции браузера или пользовательский опыт просмотра.

Расширения Chrome — это, по сути, веб-страницы, которые используют все браузеры, предоставляемые для веб-страниц.API.

Как расширения улучшают функциональность Chrome

Во-первых, давайте посмотрим на основные существительные программы расширения

расширение главное существительное

Манифест (файл манифеста)
Фоновый скрипт
Элементы пользовательского интерфейса (элементы страницы)
Сценарий контента
Options Page

файл манифеста`manifest.json`

У него будет расширение файлаmainfestфайл манифеста 清单文件必须要命名为manifest.json, который предоставляет браузеру информацию о расширении, например, какие файлы используются и какие функции может использовать расширение.

базовыйmainfestСтруктура файла следующая (для кнопки браузера, которая будет обращаться кgoogle.comИнформация)

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

фоновый скрипт`background script`

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

JavascriptФайл всегда работает в фоновом режиме.
имеютChromeДоступ к командам уровня приложения.
использовали всеChrome APIразрешение

Страница пользователя`UI Elements`

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

Расширения имеют фоновую веб-страницу (background.html) содержит основную логику невидимой страницы, расширение также может содержать другие страницы для отображения пользовательской страницы расширения.

Многие расширения начинаются с浏览器按钮или页面按钮в видеGoogle ChromeБраузер добавляет пользовательский интерфейс, каждое расширение может иметь не более одной кнопки браузера или кнопки страницы. Выберите использование кнопки браузера, когда расширение связано с большинством веб-страниц, и выберите использование кнопки страницы, когда значок расширения появляется или исчезает в зависимости от конкретной веб-страницы.

кнопка браузера (browser_action) и кнопки страницы (page_action) заключается в том, что кнопка браузера находится на панели инструментов в правом верхнем углу, а кнопка страницы может быть отображена или скрыта (выделена серым цветом).

Расширения также представлены другими способами, такими как элементы контекстного меню с использованием омнибокса (chromeадресной строке браузера) или создайте ярлык.

расширениеUIстраницы, такие как всплывающие окнаpopup, который содержитJavaScriptобычныйHTMLстраница(popup.html).

Используйте кнопки страницы и всплывающие окна (popup) расширение может использоватьdeclarative contentAPI в фоновом скрипте (background.js), чтобы установить правила для пользователей, определяющие, когда всплывающие окна доступны. Когда условия выполняются, фоновый сценарий взаимодействует с всплывающим окном, чтобы пользователь мог щелкнуть его значок.

Скрипт контента`content script`

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

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

Сценарии содержимого могут взаимодействовать со своими родительскими расширениями путем взаимодействия и использования API хранилища.

Функции:

Иметь доступ к некоторым API-интерфейсам (например, прослушивание сообщений из фонового режима)
Имеет полный доступ к странице Dom, но не имеет доступа ни к каким объектам уровня окна (таким как глобальные переменные), дляframeДоступа тоже нет, это из-за ограничений безопасности.
Content scriptsРаботая между плагинами и страницами, глобальный объект окна полностью отличается от глобального пространства имен страницы/плагина.

`option page`

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

разработать первый`chrome`расширение

Делаем заданную страницу(developer.chrome.com), чтобы изменить цвет фонаchromeрасширение.

1. Создайте файловую структуру

.
├── background.js
├── images
│   ├── get_started128.png
│   ├── get_started16.png
│   ├── get_started32.png
│   └── get_started48.png
├── manifest.json
├── popup.html
└── popup.js

2. Создать`mainfest`файл манифеста

Расширения начинаются с файла манифеста, который мы называем одинаковоmainfest.json

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

3. Установить в хром

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

4. Пишите фоновые скрипты

Хоть расширение и установлено, но пока ничего нет, давайте сначала закончим фоновый скрипт. существуетmainfest.jsonсерединаbackgroundДобавьте имя файла скрипта в полеbackground.js

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

4.1 Регистрация событий прослушивателя

Расширение сканирует файл реестра на наличие важных событий для прослушивания.

существуетbackground.jsдобавить в файлruntime.onInstalled onInstalledслушатель, затем используйтеstorage APIхранить глобальныйcolorПеременная

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});

4.2 Регистрационный орган

потому что мы использовалиstorage API, так и должно бытьmainfest.jsonИспользовать можно только после регистрации в файле

"permissions": ["storage"],

4.3 Обновить

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

Нажмите, чтобы просмотреть фоновую страницу за представлением ссылка, вы можете открыть новую страницу проверки браузера, в консоли есть то, что мы только чтоconsoleизlog The color is green, Это фоновая страница без упомянутой выше страницы.

5. Представьте пользовательский интерфейс

Расширения могут иметь множество способов представления пользовательских страниц, здесь мы используем всплывающие окна.popup. существуетmainfest.jsonсерединаpage_actionполе добавлено"default_popup"поля иdefault_iconполе добавленоicon(введение относительного пути, больше подробностей нет) могут быть предоставленыchromeзначок любого размера, используемый вchromeБлижайший значок выбирается и масштабируется до соответствующего размера, чтобы заполнить 16 выделенных пробелов.

Однако, если точный размер не указан, это масштабирование может привести к тому, что значок потеряет детализацию или станет размытым.iconможно установить двумя способами: один — статическое изображение, другой —canvas. Проще использовать статические изображения, но используйтеcanvasМожет увеличить движение.

Статические изображения, покаWebKitИзображения, которые могут быть отображены, могут быть, это может бытьBMP, GIF, ICO, JPEG, PNG. Но для несжатых расширений толькоPNGиз.

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

6. Добавьте правила отображения всплывающих окон

Затем мы добавляем правило отображения в фоновый скрипт: вhostравныйdeveloper.chrome.comпоказыватьpopupстраница. из-за использованияdeclaractiveContent api, поэтому нам также нужно прописать разрешения в файле скрипта.

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

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

После перезагрузки вы будете развиваться, только послеdeveloper.chrome.com hostЗначок яркий и неактивен под другими хостами.

7. Получите переменные, сохраненные фоновым скриптом

В качестве последнего шага мы получаем настройки из файла фонового скрипта дляstorageсерединаcolorпеременная, заменитьpopupсерединаbuttonцвет, затем нажмитеbutton, чтобы изменить цвет фона текущей страницы.

нам нужно создатьpopup.jsИ вpopup.htmlвведено в. Так же, как обычная веб-разработка.

'use strict';
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    console.log('color', color);
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

мы использовалиchromeизtabs api, так и должно бытьmainfest.jsonполучено вactiveTabразрешение

На данный момент мы завершили разработку нашего первого расширения для Chrome. существуетdeveloper.chrome.com/Затем нажмите на расширение, которое мы создали в верхней правой панели инструментов, появится всплывающее окно только с зеленой кнопкой, нажмите кнопку, цвет фона веб-страницы станет зеленым.