Базовые знания
1. Структура плагина-файла
1.1. manifest.json
Каждое расширение, установленное веб-приложение и кожа имеет файл манифеста формата JSON, в котором хранится важная информация, связанная с плагинами.
Пример базовой конфигурации:
{"name": "ДЕМО БРАУЗЕР ДЕМО", "Версия": "1.0", "разрешения": ["Tabs", "http: //*/*", "https: //*/*"], "browser_action": {"default_title": "Switch Light", "default_icon": "icon.png", "Defaup": ",", ",", "Defaup,", "Defaup": ",", ",", "," Defaup ":", ",", "Defaup": ",", ",", "Defaup,", "Defaup": ":", ". "Popup.html"}, "фоновая": {"page": "founal.html"}, "manifest_version": 2}1.2. неожиданно возникнуть
Всплывающее окно плагина, Default_popup в browser_action в приведенной выше конфигурации-это страница.
1.3. Фоновая страница
Большинство приложений включают фоновую страницу для выполнения основных функций приложения.
1.4. Сценарии контента
Сценарий контента может включить взаимодействие между приложением и веб -страницей, которое относится к сценариям JavaScript, которые могут работать внутри страниц, которые были загружены браузером. Вы можете придумать сценарий контента как часть веб -страницы, а не часть приложения, в котором он находится.
2. Взаимодействие между файлами
Функцию на фоновой странице можно вызвать непосредственно в всплывающем окне.
Скрипт содержимого может читать и изменять дерево DOM текущей веб -страницы, но он не может изменить дерево DOM на фоне (фон) приложения, которое оно находится.
Взаимодействие между сценарием контента и приложением: вы можете отправлять сообщения друг другу
3. Включить файл JS (сценарии контента) в веб -страницу:
Метод 1: Настройка в файле manifest.json:
"content_scripts": [{"Matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}], ["jquery.js", "myscript.js"]}], "Метод 2, через executcript ():
Введите сценарии JavaScript на страницу для выполнения.
chrome.tabs.executescript (integer tabid, данные объекта, обратный вызов функции) chrome.tabs.executescript (tabid, {file: "func.js", allframes: true});Появление пользовательского интерфейса
1. Действие браузера:
Добавьте значок справа от адресной панели основной панели инструментов Chrome.
Примечание: упакованные приложения не могут использовать действия браузера
1.1. Конфигурация в manifest.json
Зарегистрируйте действие браузера:
{"name": "My Extension", ... "browser_action": {"default_icon": "Images/icon19.png", // необязательно "default_title": "Google Mail", // необязательно; Показано в Tooltip "default_popup": "Popup.html" // Необязательно}, ...}1.2. Описание элемента конфигурации
(1) default_icon
Икона 19 * 19px
Измените поле default_icon в манифесте Browser_action или вызовите метод seticon ().
chrome.browseraction.seticon (детали объекта)
Установить значок действия браузера. Значок может быть пути к изображению или информации о пикселе, извлеченной из элемента холста. Будь то путь иконы или идентификация холста, это свойство должно быть указано.
(2) default_title
Измените поле default_title в манифесте Browser_action или вызовите метод Centitle (). Вы можете указать локализованную строку для поля default_title; Нажмите на интернационализацию, чтобы просмотреть детали.
Chrome.browserAction.SetTitle (сведения о объекте)
Установите заголовок действия браузера, это будет отображаться в подсказке.
(3) Значок
Действия браузера могут опционально отобразить значок - отобразить немного текста на значке. Значки могут просто обновить небольшую информацию о статусе расширения для действия браузера.
Поскольку пространство значков ограничено, оно поддерживает только менее 4 символов.
Чтобы установить текст и цвет значка, вы можете использовать SetBadgetExt () и SetBadgebackgroundColor () соответственно.
chrome.browserAction.setBadgetExt (сведения о объекте)
Установите текст значка действия браузера, а значок отображается на значке.
SetBadgebackgroundcolorchrome.browserAction.SetBadgebackgroundColor (сведения о объекте)
Установите цвет фона значка.
(4) default_popup
Всплывающие пузырьковые кончики
Измените поле default_popup в манифесте Browser_action, чтобы указать файл HTML или вызовите метод setPopup ().
chrome.browserAction.setPoPup (сведения о объекте)
Устанавливает HTML, отображаемый во всплывающем окне при нажатии на действия браузера.
1.3. Советы
Для лучшего отображения, следуйте следующим принципам:
Убедитесь, что действия браузера используются только в сценариях, где большинство веб -сайтов имеют функциональные требования.
Убедитесь, что действия браузера не используются на нескольких веб -страницах, которые имеют функции. Пожалуйста, используйте действия страницы для этого сценария.
Убедитесь, что размер вашего значка должен занимать до 19x19 пиксельных пространств. Значок действия браузера должна выглядеть больше и тяжелее, чем иконка действия страницы.
Не пытайтесь подражать значкам ключа Google Chrome, их производительность может быть проблематичной в разные темы, а расширение должно быть более привлекательным.
Постарайтесь использовать альфа -канал и сгладить края ваших значков, потому что многие пользователи используют темы, ваши значки должны хорошо работать в различных фонах.
Не продолжайте мигать на своей иконе, это очень оскорбительно.
2
Вы можете добавить элемент меню с правой кнопкой мыши для различных типов объектов (например, изображения, ссылки, страницы).
Вы можете добавить несколько элементов с правой кнопкой мыши по мере необходимости. Многочисленные элементы меню правой кнопкой мыши, добавленные в расширение, будут автоматически объединены Chrome и размещены во вторичном меню соответствующего имени расширения.
Меню правой кнопкой мыши может отображаться в любом документе (или кадрах в документе) или даже в локальном файле (например, File: // или Chrome: //). Если вы хотите управлять отображением меню правой кнопкой мыши в разных документах, вы можете указать DocumentUrlPatterns при вызове create () и update ().
2.1. Конфигурация в manifest.json
Объявите разрешение «ContentMenus» в манифесте. В то же время вы должны указать значок 16x16 для использования в качестве логотипа меню правой кнопкой мыши. Например:
{"name": "My Extension", ... "разрешения": ["contextmenus"], "icons": {"16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-large.png"}, ...}3. Уведомления на рабочем столе
Уведейте пользователя, что произошло что -то важное. Уведомления на рабочем столе будут отображаться за пределами окна браузера. На рисунке ниже показано влияние уведомлений. На разных платформах эффект отображения уведомлений будет немного отличаться.
Непосредственно используйте небольшой кусочек кода JavaScript для создания уведомлений, и, конечно, это также можно сделать с помощью отдельной HTML -страницы в пакете расширения.
3.1. Конфигурация в manifest.json
{"name": "мое расширение", ... "разрешения": ["Уведомления"], ...}3.2. Взаимодействуйте с расширенной страницей:
Используйте getbackgroundpage () и getViews () для создания взаимодействия в уведомлениях и страницах расширения
// Вызовите метод расширенной страницы в уведомлении ... chrome.extension.getbackgroundpage (). Dothing (); // вызовать метод уведомления со страницы расширения ... chrome.extension.getViews ({type: "уведомление"}). Foreach (function (win) {win.doothething ();});4. Omnibox
Интерфейс приложения Omnibox позволяет зарегистрировать ключевое слово с помощью адресной строки Google Chrome, которая также называется Omnibox.
Поле ключевого слова Omnibox должно быть включено в манифест. Для указания необходимо указать значок с пикселями 16x16, чтобы он был отображаться в адресной строке, когда пользователь входит в ключевое слово.
4.1. Конфигурация в manifest.json
{"name": "Aaron's Omnibox расширение", "версия": "1.0", "omnibox": {"" Ключевое слово ":" aaron "}," Icons ": {" 16 ":" 16-full-color.png "}," founal_page ":" founder.html "}Chrome автоматически создает значки с 16x16 пикселями в режиме серого. Вы должны предоставить полноцветную версию значка, чтобы его можно было использовать в других сценариях.
5. Страница параметров
Чтобы пользователи могли настроить ваши расширения, вам может потребоваться предоставить страницу опции. Если вы предоставите страницу опции, на странице управления расширением будет предоставлена ссылка Chrome: // расширения. Нажмите ссылку «Параметры», чтобы открыть страницу «Параметры».
5.1. Конфигурация в manifest.json
{"name": "My Extension", ... "Options_page": "Options.html", ...}6. перезаписать конкретные страницы
Используя альтернативные страницы, вы можете заменить некоторые конкретные страницы в Chrome по умолчанию и вместо этого использовать страницы, предоставленные расширением.
6.1. Конфигурация в manifest.json
{"name": "My Extension", ... "chrome_url_overrides": {"pagetooverride": "mypage.html"}, ...}7. Действия страниц
Используйте действия страницы, чтобы поместить значок в адресную строку.
Если вы хотите, чтобы значок расширения всегда была видна, используйте действие браузера.
Упакованные приложения не могут использовать действия страницы.
7.1. Конфигурация в manifest.json
{"name": "My Extension", ... "page_action": {"default_icon": "icons/foo.png", // необязательно "default_title": "Do Action", // необязательно; Показано в Tooltip "default_popup": "Popup.html" // Необязательно}, ...}7.2 Описание элемента конфигурации
Подобно действиям браузера, действия страниц могут иметь значки, сообщения о приглашении и всплывающие окна. Но нет значка
Используйте методы Show () и Hide (), чтобы показать и скрыть действия страницы. По умолчанию действие страницы скрыто. Когда вы хотите отобразить, вам нужно указать страницу вкладок, где находится значок. Значок останется видимым до тех пор, пока страница вкладок не закроется или не начнет отображать другой URL -адрес (например: пользователь нажимает на соединение)
7.3. Советы
Используйте действие страницы только для нескольких страниц;
Не используйте его для большинства страниц, используйте действия браузера вместо этого, если функциональность требует этого.
Не всегда позволяйте значкам появляться в анимации, когда все в порядке, это будет очень раздражает.
8. Тема
Тема - это специальное расширение, которое можно использовать для изменения внешнего вида всего браузера. Тема аналогична стандартному расширению, но тема не может содержать JavaScript или HTML -код.
8.1. Конфигурация в manifest.json
{«Версия»: «2.6», «Имя»: «Тема камума», «Тема»: {«Изображения»: {«Theme_frame»: «Image/Theme_frame_camo.png», "Theme_frame_overlay": "Image/theme_frame_stripe.png", "theme_toolbar": "Image_toolbar_cam. "Theme_ntp_background": "Images/theme_ntp_background_norepeat.png", "theme_ntp_attribution": "Images/attribution.png"}, "Colors": {"Frame": [71, 105, 91], "Toolbar": [207, 221, 192], "NTP_TEXT": [20, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, ntp_. [36, 70, 0], "ntp_section": [207, 221, 192], "button_background": [255, 255, 255]}, "Тенты": {"Кнопки": [0.33, 0.5, 0.47]}, "свойства": {"ntp_background_Alignment": "внизу"?