⚙ПРОГРАММИРОВАТЬ И СОЗДАВАТЬ РАСШИРЕНИЯ ДЛЯ CHROME

Это руководство будет разделено на 3 раздела: первый раздел, в котором мы объясним несколько понятий, связанных с расширениями в Chrome, его структурой и основами создания расширения. Во втором разделе мы сосредоточимся на создании расширений для этого замечательного браузера, такого как Google Chrome, и приведем несколько практических примеров. Наконец, в третьем разделе мы расскажем о расширенных параметрах при создании расширений и о том, как опубликовать их в интернет-магазине Google Chrome, чтобы они были доступны для широкой публики.

Что такое расширения в Google Chrome?

Расширения - это небольшие программы, которые могут изменять и улучшать функциональность браузера, в данном случае Chrome. Они разработаны с использованием веб-технологий, таких как HTML, Javascript и CSS.

Расширения не имеют или почти не имеют пользовательского интерфейса. Например, на изображении ниже показан значок замка, при нажатии которого открывается небольшой интерфейс.

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

Как уже говорилось ранее, расширения позволяют добавлять функциональность в Chrome, не погружаясь в нативный код. Вы можете создавать новые расширения с помощью базовых технологий, с которыми мы в основном работаем в программистах веб-разработки: HTML, CSS и Javascript.

1. Как создать и запрограммировать расширение Chrome

Для начала создадим простое расширение, которое извлекает изображение Google, используя URL-адрес текущей страницы в качестве поискового запроса. Мы сделаем это путем реализации элемента пользовательского интерфейса, который мы называем chrome.browserAction, который позволяет нам размещать значок прямо рядом с меню Chrome, к которому вы можете щелкнуть для быстрого доступа. Когда вы нажмете на этот значок, откроется всплывающее окно, которое будет содержать изображение, полученное с текущей страницы, которое будет выглядеть так:

Чтобы начать нашу практику, мы создадим каталог с именем Image_Viewer, в который мы включим все файлы, с которыми мы будем работать. В качестве редактора разработки вы можете использовать тот, который вы выберете, в моем случае я буду использовать Chrome Dev Editor, который вы можете скачать по следующему адресу:

Редактор Chrome Dev

Первое, что нам нужно, это создать файл манифеста с именем manifest.json . Этот манифест является не чем иным, как файлом метаданных формата JSON, который содержит такие свойства, как имя, описание, номер версии его расширения и т. Д. На продвинутом уровне мы будем использовать его, чтобы сообщить Chrome, что будет делать расширение, и разрешения, необходимые для выполнения определенных действий.

Формат файла манифеста выглядит следующим образом:

 {// Требуется "manifest_version": 2, "name": "My Extension", "version": "versionString", // Рекомендуется "default_locale": "is", "description": "Простое текстовое описание", " значки ": {...}, // Выбрать один (или ни один)" browser_action ": {...}, " page_action ": {...}, // Необязательный" author ": ..., " автоматизация ": ..., " background ": {// Рекомендуется" persistent ": false}, " background_page ": ..., " chrome_settings_overrides ": {...}, " chrome_ui_overrides ": {" bookmarks_ui ": {" remove_bookmark_shortcut ": true, " remove_button ": true}}, " chrome_url_overrides ": {...}, " команды ": {...}, " content_capabilities ": ..., " content_scripts ": [{... }], "content_security_policy": "policyString", "convert_from_user_script": ..., "copresence": ..., "current_locale": ..., "devtools_page": "devtools.html", "event_rules": [ {...}], "externally_connectable": {"match": ["*: //*.example.com/*"]}, "file_browser_handlers": [...], "file_system_provider_capabilities": {"настраиваемый ": true, " multiple_mounts ": true, " source ":" network "}, " homepage_url ":" http: // path / to / homepage ", " import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa}}, "incognito": "spanning or split", "input_components": ..., "key": "publicKey", "imum_chrome_version ":" versionString ", " nacl_modules ": [...], " oauth2 ": ..., " offline_enabled ": true, " omnibox ": {" keyword ":" aString "}, " option_permissions ": [" tabs "], " options_page ":" options.html ", " options_ui ": {" chrome_style ": true, " page ":" options. html "}, " разрешения ": [" вкладки "], " платформы ": ..., " плагины ": [...], " требования ": {...}, " песочница ": [... ], "short_name": "Short Name", "signature": ..., "spellcheck": ..., "storage": {"managed_schema": "schema.json"}, "system_indicator": ..., "tts_engine": {...}, "update_url": "http: //path/to/updateInfo.xml", "version_name": "aString", "web_accessible_resources": [...]}

Далее я опишу функцию, которая выполняет наиболее важные метки:

В обязательном порядке:

manifest_version: это версия манифеста, она представлена целым числом, указывающим версию формата файла. Начиная с Chrome 18, разработчики должны указывать номер 2.

имя: это имя, которое будет иметь ваше расширение. Это должно быть не более 45 символов, имя является основным элементом определения расширения и является обязательным полем. Это показано в следующих местах:

а) В монтажной коробке.
б) В пользовательском интерфейсе, где управление расширением.
в) В виртуальном магазине Chrome.

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

$config[ads_text5] not found

"версия 1"
«Версия»: «1.0»
«Версия»: «2.10.2»
«Версия»: «3.1.2.4567»

Рекомендуется:

default_locale: указывает подкаталог _local (languages), который содержит строки по умолчанию для этого расширения. Вы должны поместить все строки, видимые пользователю, в файл с именем messages.json. Каждый раз, когда вы добавляете новый язык, вы должны добавить новый файл messages.json в каталог _locales / localecode, где localecode - это код языка, как на английском языке и для испанского языка.

Пример интернационализированного расширения с поддержкой английского (en), испанского (es) и корейского (ko), будет следующим:

description: Включает текстовую строку (без HTML или другого формата) длиной не более 132 символов, описывающую функциональные возможности расширения.

Значки: добавьте один или несколько значков, представляющих расширение. Вы должны всегда предоставлять значок 128x128px. Это будет использоваться во время установки и в Chrome Web Store. В расширениях также должен быть значок 48x48, который используется на странице управления расширениями Chrome (chrome: // extensions). Также можно указать значок 16x16, который будет использоваться в качестве значка для страниц расширения.

Иконки обычно должны быть в формате PNG, потому что они имеют лучшую поддержку прозрачности. Однако они могут быть в любом формате, совместимом с WebKit, включая BMP, GIF, ICO и JPEG. Вот пример спецификации иконки:

 "icons": {"16": "icon16.webp", "48": "icon48.webp", "128": "icon128.webp"},

пример

Выберите один (или ни одного):

browser_action: используйте browser_action, чтобы разместить значки на главной панели инструментов в верхней части браузера Google Chrome, справа от адресной строки. Кроме того, вы можете добавить всплывающую подсказку (плавающее сообщение), значок (плавающий текст на значке) и всплывающее окно (плавающее окно).

Пример использования browser_action:

 {"name": "Мое расширение", ... "browser_action": {"default_icon": {// необязательно "19": "images / icon19.webp", // необязательно "38": "images / icon38. png "// необязательно}, " default_title ":" Google Mail ", // необязательно; показать подсказку "default_popup": "popup.html" // необязательно}, ...}

page_action: используйте этот API для размещения вашего значка внутри адресной строки.

$config[ads_text5] not found

Пример использования:

 {"name": "Мое расширение", ... "page_action": {"default_icon": {// необязательно "19": "images / icon19.webp", // необязательно "38": "images / icon38. png "// необязательно}, " default_title ":" Google mail ", // необязательно; показывает в описании "default_popup": "popup.html" // необязательно}, ...}

например,

по желанию:

Предпосылки. Распространенной потребностью в расширениях является наличие одной страницы для выполнения длинных последовательностей для управления какой-либо задачей или состоянием. Это HTML-страница, которая запускается вместе с расширением. Он начинается в начале выполнения расширения и одновременно активирует только один его экземпляр. Рекомендуется использовать страницу событий вместо фона.

$config[ads_text6] not found

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

), это делает запрос состояния на страницу, которая находится в качестве фона. Когда фоновая страница уведомляет об изменении статуса, она информирует представление о том, что оно обновлено или выполняет какое-либо действие.

Его формат выглядит следующим образом:

 {"name": "Мое расширение", ... "background": {"scripts": ["background.js"]}, ...}

формат

Страницы событий: Перед определением следующего атрибута необходимо объяснить, что такое страницы событий. Общей потребностью в приложениях и расширениях является наличие одного долгосрочного сценария для управления какой-либо задачей или состоянием. Это цель страниц событий. Страницы событий загружаются только тогда, когда они необходимы. Когда он не выполняет активных действий, он загружается из кэша, освобождая память и другие системные ресурсы.

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

Объявление страницы события в файле манифеста будет выглядеть следующим образом:

 {"name": "Мое расширение", ... "background": {"scripts": ["eventPage.js"], "persistent": false}, ...}

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

chrome_settings_overrides: используется для перезаписи любых настроек, выбранных в Chrome. Этот API доступен только для Windows.

Некоторыми из этих настроек могут быть домашняя страница (домашняя страница браузера, поставщик поиска (поставщик поиска) и т. Д.

Пример конфигурации:

 {"name": "Мое расширение", ... "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", " ключевое слово ":" ключевое слово .__ MSG_url_domain__ ", " search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} ", " favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico ", " offer_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} ", " instant_url ":" http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms} ", "image_url": "http: //www.foo.__MSG_url_domain__/image? q = {searchTerms}", "search_url_post_params": "search_lang = __ MSG_url_domain__", "offer_url_post_params": "Sugges_lang = __" domain_urt__d_d_d_d_d_d_d_d_d instant_lang = __ MSG_url_domain__ ", " image_url_post_params ":" image_lang = __ MSG_url_domain__ ", " alternate_urls ": [" http: //www.moo.__MSG_url_domain__/s? q = {searchTerms} ", " http: //ww.ms. ". / s? q = {searchTerms} "], " encoding ":" UTF-8 ", " is_default ": true}, " startup_pages ": [" http: // www .startup.com "]}, " default_locale ":" de ", ...}

chrome_ui_overrides: это свойство расширения используется для перезаписи некоторых настроек пользовательского интерфейса Chrome. Такие как маркеры. Его конфигурация следующая:

 {"name": "Мое расширение", ... "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}}, ...}

В этом случае звезда, которую браузер имеет для избранных, будет удалена.

chrome_url_overrides: это способ заменить файл HTML из расширения для страницы, обычно предоставляемой браузером Google Chrome. Кроме того, вы также можете перезаписать его код CSS и JavaScript.

Расширение с этим параметром может заменить одну из следующих страниц Chrome:

Диспетчер закладок. Это страница, которая появляется, когда пользователь выбирает пункт меню диспетчера закладок в меню Chrome или для Mac - пункт Диспетчер закладок в меню закладок.

История (история): это страница, которая появляется, когда пользователь выбирает историю из меню Chrome или, на Mac, элемент отображает полную историю из меню, найденного в опции истории.

Новая вкладка (newtab): это страница, которая появляется, когда пользователь создает новую вкладку или окно из браузера. Вы также можете получить доступ к этой странице, разместив следующий адрес в адресной строке: chrome: // newtab

примечание

Одно расширение может перезаписать только одну страницу. Например, расширение не может перезаписать закладки и, в свою очередь, страницу истории.

 {"name": "Мое расширение", ... "chrome_url_overrides": {"newtab": "mipagina.html" // параметры - newtab, history, bookmarks}, ...}

Команды: этот командный API используется для добавления сочетаний клавиш, которые запускают действие на вашем добавочном номере. Например, действие, чтобы открыть действие браузера или отправить команду на расширение.

 {"name": "Мое расширение", ... "команды": {"toggle-feature-foo": {"Sugges_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}, " description ":" Переключить функцию foo "}, " _execute_browser_action ": {" Sugges_key ": {" windows ":" Ctrl + Shift + Y ", " mac ":" Command + Shift + Y " ", " jokes ":" Ctrl + Shift + U ", " linux ":" Ctrl + Shift + J "}}, " _execute_page_action ": {" Sugges_key ": {" default ":" Ctrl + Shift + E ", "windows": "Alt + Shift + P", "mac": "Alt + Shift + P"}}}, ...}

На своей фоновой странице вы можете связать контроллер для каждой из команд, определенных в manifest.js (за исключением « _execute_browser_action » и « _execute_page_action ») через onCommand.addListener .

$config[ads_text5] not found

Например:

 chrome.commands.onCommand.addListener (function (command) {console.log ('Команда нажата:', команда);});

content_scripts: это файлы JavaScript, которые запускаются в контексте веб-страниц. Используя стандарт Document Object Model (DOM), они могут читать информацию о веб-страницах посещений браузера или вносить в них изменения.

 {"name": "Мое расширение", ... "content_scripts": [{"match": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"]}], ...}

content_scripts: Чтобы сделать наши расширения более безопасными и избежать возможных межсайтовых сценариев, в систему расширений Chrome включена общая концепция политики безопасности контента (CSP) . Это вводит очень строгие политики, которые делают расширения более безопасными по умолчанию. В общем, CSP работает как механизм черных и белых списков для ресурсов, загружаемых или выполняемых их расширениями.

 {..., "content_security_policy": "script-src 'self' https://example.com; object-src 'self'" ...}

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

 {"manifest_version": 2, "name": "Пример запуска", "description": "Это расширение отображает изображения Google с текущей страницы", "version": "1.0", "browser_action": {" default_icon ":" icon.webp ", " default_popup ":" popup.html "}, " permissions ": [" activeTab ", " https://www.googleapis.com/ "]}

Как вы можете видеть в нашем примере манифеста, мы объявляем browser_action, activeTab разрешение на просмотр URL текущей вкладки, и хост получил разрешение, чтобы вы могли получить доступ к API Google для выполнения поиска внешних изображений.

$config[ads_text6] not found

В свою очередь, при определении browser_action существует 2 файла ресурсов: icon.webp и popup.html. Оба ресурса должны существовать в пакете расширения, поэтому давайте создадим их сейчас:

icon.webp будет отображаться рядом с многофункциональным блоком, ожидая взаимодействия с пользователем. Это просто файл PNG размером 19px x 19px.

popup.html будет отображаться во всплывающем окне, которое создается в ответ на нажатие пользователем значка. Это стандартный файл HTML, и его содержимое выглядит следующим образом:

Начало работы Расширение Popup body {font-family: "Segoe UI", "Lucida Grande", Tahoma, без засечек; размер шрифта: 100%; } #status {/ * избегать слишком широкого текста статуса * / пробел: pre; переполнение текста: многоточие; переполнение: скрытое; максимальная ширина: 400 пикселей; }

Реальная логика создания контента всплывающих окон реализована в popup.js . Его содержание будет следующим:

 / ** * Получить текущий URL. * @param {функция (строка)} обратный вызов - вызывается при обнаружении URL-адреса текущей вкладки * / function getCurrentTabUrl (callback) {// Фильтр запросов, который будет передан в chrome.tabs.query - см .: // https: //developer.chrome.com/extensions/tabs#method-query var queryInfo = {active: true, currentWindow: true}; chrome.tabs.query (queryInfo, function (tabs) не является пустым массивом. // В одном окне может быть активна только одна вкладка за раз, поэтому исправление - это // ровно одна вкладка. var tab = tabs [0] ; // Вкладка - это плоский объект, который предоставляет информацию о вкладке. // См. Https://developer.chrome.com/extensions/tabs#type-Tab var url = tab.url; console.assert (typeof url = = 'string', 'tab.url должен быть строкой'); callback (url);); // Большинство методов API расширения Chrome являются асинхронными. Это означает, что // вы не можете делать что-то подобное: // // var url; // chrome.tabs.query (queryInfo, function (tabs) {// url = tabs [0] .url; //}); // alert (url); // Он покажет "undefined", потому что chrome.tabs.query асинхронный. } / ** * @param {string} searchTerm - поисковый запрос для поиска картинок Google. * @param {функция (строка, номер, номер)} обратный вызов - вызов, когда изображение было найдено. Обратный вызов получает URL, ширину и высоту изображения. * @param {function (string)} errorCallback - Вызывать, когда изображение не найдено. * Обратный вызов получает строку с причинами сбоя. * / Функция getImageUrl (SEARCHTERM, обратный вызов, errorCallback) {вар searchUrl = '' https://www.googleapis.com/customsearch/v1?cx=017923793791201738471%3A4nh2tpzikma&imgColorType=color&imgSize=medium&num=1&searchType=image&start=1&key=AIzaSyDcNC3g_HDSY8rHhBLFuqXbqqslQyjSgW4&q= ' + encodeURIComponent (searchTerm); var x = new XMLHttpRequest (); x.open ('GET', searchUrl); x.responseType = 'json'; x.onload = function () {var response = x.response; if (! response ||! response.items || response.items.length === 0) {errorCallback ('Нет ответа от поиска картинок Google!'); возвращение; } var firstResult = response.items [0] .image; var imageUrl = firstResult.thumbnailLink; var width = parseInt (firstResult.thumbnailWidth); var height = parseInt (firstResult.thumbnailHeight); console.assert (typeof imageUrl == 'string' &&! isNaN (ширина) &&! isNaN (высота), 'Неожиданное изменение в API поиска изображений Google!'); обратный вызов (imageUrl, ширина, высота); }; x.onerror = function () {errorCallback ('Ошибка сети.'); }; x.send (); } function renderStatus (statusText) {document.getElementById ('status'). textContent = statusText; } document.addEventListener ('DOMContentLoaded', function () {getCurrentTabUrl (function (url) {// Помещает изображение URL в поиск Google. renderStatus ('Выполнение поиска изображений Google для' + url); getImageUrl (url, function) (imageUrl, width, height) {renderStatus ('условие поиска:' + url + '\ n' + 'результат поиска изображений Google:' + imageUrl); var imageResult = document.getElementById ('image-result'); imageResult. width = width; imageResult.height = высота; imageResult.src = imageUrl; imageResult.hidden = false;}, function (errorMessage) {renderStatus ('Невозможно отобразить изображение.' + errorMessage);});});});

Теперь у них должно быть 4 файла в рабочем каталоге: Icon.webp, manifest.json, popup.html и popup.js. Следующим шагом является загрузка файлов в Chrome.

Загрузите расширение Chrome
Расширения, загружаемые из Интернет-магазина Chrome, упакованы в файлы .crx . Который идеально подходит для распространения, но не для развития. Признавая это, Chrome дает вам быстрый способ загрузить ваш рабочий каталог для тестирования. Это делается следующим образом:

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

2. Убедитесь, что флажок режима разработчика в верхнем правом углу установлен.

$config[ads_text5] not found

3. Нажмите Загрузить разархивированное расширение (без упаковки), чтобы открыть диалоговое окно выбора файла.

4. Найдите каталог, в котором находятся ваши файлы расширений, и выберите его.

В качестве альтернативы вы можете перетащить каталог, содержащий ваш проект, и перетащить его в окно расширений Chrome. Это загрузит расширение в ваш браузер.

$config[ads_text6] not found

Таким образом, мы сделали простое расширение для Google Chrome. В нашей следующей статье мы углубим конструкцию расширений вместе с такими средами разработки, как jquery и Bootstrap, что позволит нам ускорить нашу разработку.

2. Пример расширения для Chrome

В этом разделе мы сделаем несколько примеров, которые позволят нам полностью понять многие функции, которые существуют при создании расширения для Google Chrome.

Практика 1 - Синий фон
В этом примере мы сделаем простое расширение, в котором мы узнаем, как мы можем изменить содержимое страниц, которые мы загружаем в наш браузер. В этом случае мы изменим цвет фона загруженной страницы и изменим его на синий.

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

Для начала мы создадим новый каталог с именем Blue Background и создадим проект с таким же именем.

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

$config[ads_text5] not found

Наш файл manifest.json должен содержать следующий код:

 {"manifest_version": 2, "name": "Blue Background", "description": "Это расширение изменило цвет фона текущей страницы", "version": "1.0", "browser_action": {"default_icon" : "icon.webp", "default_title": "Сделать эту страницу синей"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": ложь}}

Поскольку наше расширение простое, оно будет содержать только значок, который при нажатии выполнит действие. Как вы можете видеть в файле manifest.json, мы определяем имя и его описание, в browser_action мы определяем значок, который будет отображаться на панели нашего браузера Google Chrome, и заголовок, который будет отображаться при наведении указателя мыши на этот значок. Что касается разрешений, мы определим, что будет сделано только на активной вкладке. Файл, который будет выполняться в фоновом режиме, будет нашим файлом background.js, который не будет постоянным, поскольку он будет выполняться только при нажатии на расширение.

$config[ads_text5] not found

Мы создаем наш значок и сохраняем его в каталоге проекта, как определено в manifest.json . В этом случае в корне проекта.

Затем мы создаем файл JavaScript с именем background.js в том же каталоге со следующим кодом:

 // вызывается, когда пользователь нажимает на расширение chrome.browserAction.onClicked.addListener (function (tab) {console.log ('Changing' + tab.url + 'to blue!'); chrome.tabs.executeScript ({ code: 'document.body.style.backgroundColor = "blue"'});});

Осталось весь проект следующим образом:

Чтобы запустить наше расширение, просто нажмите кнопку воспроизведения в верхней панели редактора Chrome Dev.

При нажатии расширение будет автоматически загружено в браузер Google Chrome.

Давайте посмотрим на наше расширение в действии, нажав на иконку, которую я сделал (синий фон с пустой буквой A), страницу, которую я загрузил в текущей вкладке, в моем случае мою учетную запись пользователя в Solvetic (//www.solvetic) .... berth-ramncgev /) изменит свой фон на синий. Следует отметить, что изменится только цвет элемента BODY, а не DIV, которые он содержит, поскольку именно так я определил его в своем background.js .

Практика 2 - Многоцветный
В этом примере я покажу, как упростить нашу работу из среды разработки и из кода. В редакторе Chrome Dev мы нажимаем кнопку +, чтобы создать новый проект, на этот раз мы изменим тип проекта, выбрав опцию JavaScript Chrome App .

Как видите, он автоматически генерирует всю структуру нашего проекта. С нашим файлом manifest.json с наиболее распространенными определениями.

К этому файлу мы добавим краткое описание в теге description, поместив нужный текст, в моем случае «Расширение, позволяющее изменить цвет фона». Для этого проекта мы создадим 2 иконки, один из которых 16x16 пикселей, а другой 128x128 пикселей. Как вы можете видеть в структуре, они будут сохранены в каталоге активов .

$config[ads_text5] not found

Мы добавим следующий код под тегом minimal_chrome_version :

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Изменить страницу на несколько цветов.", " default_popup ":" popup.html "},

Как вы можете видеть, мы определяем всплывающее окно или представление, которое будет содержать все HTML, которые пользователь увидит при нажатии на наше расширение. Затем мы добавим следующий код:

 "content_scripts": [{"match": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

content_scripts : содержит файлы JavaScript (js) и таблицы стилей (css), которые будут выполняться в контексте веб-страницы. Это может содержать следующие свойства:

совпадения : обязательно. Укажите, на какую страницу будет вставлен скрипт.

exclude_matches : необязательно. Страницы, которые будут исключены, чтобы скрипт не вставлялся.

match_about_blank : необязательно. Это значение является логическим и указывает, будет ли скрипт вставлен на пустую страницу (about: blank и about: srcdoc).

CSS : необязательно. Это расположение, которое указывает список CSS-файлов, которые будут вставлены на страницу, запрошенную в браузере.

JS : необязательно. Это соглашение со списком файлов JavaScript, которые будут вставлены на страницу, запрашиваемую в браузере.

run_at : необязательно. Это текстовая строка, которая определяет, когда будут загружаться файлы js. Его значение может быть:
document_start : файлы внедряются после любого файла CSS, но до того, как какой-либо DOM будет построен или любой другой сценарий будет выполнен.

document_end : файлы внедряются сразу после завершения DOM, но до загрузки любых ресурсов, таких как изображения и кадры.

document_idle : браузер выбирает время для вставки скриптов между document_end и сразу после того, как window.onload запускает событие. Этот параметр установлен по умолчанию.

$config[ads_text6] not found

В конце нашего файла manifest.json должен выглядеть следующим образом:

Как видите, мы добавили пару новых вещей, в свойстве css мы определили каркас Bootstrap, который не облегчит разработку на уровне стиля. Продолжая в свойстве js, мы определяем библиотеку JQUERY JavaScript, которая не позволит быстрее и проще работать со всем, что связано с JavaScript. Наш файл index.html должен быть следующим:

 Popup MultipleColor body {переполнение: скрыто; поле: 0px; отступы: 0px; фон: белый; } div: first-child {margin-top: 0px; } div {курсор: указатель; выравнивание текста: по центру; размер шрифта: 1em; ширина: 100 пикселей; маржинальная вершина: 1px; background: #cccccc; цвет: #fff; } # red {background-color: red; } #blue {background-color: blue; } #verde {background-color: green; } #amarillo {background-color: yellow; цвет: # 000; }
красный
синий
зеленый
желтый
Для файла main.js мы будем использовать событие щелчка, которое будет выполняться в момент нажатия кнопки мыши на каждом классе «col-md-12», принимая цвет фона выбранного элемента и назначая его телу страницы, которое Это было открыто. Затем будет выполнено событие window.close (); которые закрывают окно нашего расширения. Код, определенный для main.js, выглядит следующим образом: 
 $ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});}); 
 Результат при выполнении нашего расширения мы можем визуализировать в верхней панели значок, который мы создали для него.
Нажатие на наше расширение покажет следующее всплывающее окно:
И при выборе одного из вариантов результат будет следующим:
Практика 3 - Топ История 
В этом примере мы применим все увиденное выше, мы создадим расширение, которое при нажатии на него покажет нам всплывающее окно со списком самых посещаемых страниц нашего браузера, предоставляя прямой доступ к этим страницам. В этом примере отличается только то, что мы запросим разрешение у одного из API Chrome для доступа к наиболее просматриваемым страницам из Chrome. Имя этого API- интерфейса chrome.topSites .
$config[ads_text5] not foundДля начала мы заходим в Chrome Dev Editor и создаем наш проект с именем TopHistorial, а в типе проекта выбираем опцию JavaScript Chrome App.
Тогда наш файл manifest.json должен выглядеть следующим образом: 
 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Показать список самых просматриваемых страниц в нашем браузере", "version": "0.0.1", " minimum_chrome_version": "38", "permissions": ["topSites"], "browser_action": { "default_icon": "icon.webp", "default_popup": "popup.html" }, "content_scripts": [ { " matches": [""], "css": ["assets/bootstrap/css/bootstrap.min.css"], "js": ["assets/jquery.min.js", "main.js"], "run_at": "document_start" } ] } 
 Como pueden ver agregamos una nueva atributo al manifiesto para poder obtener permiso sobre el api de Chrome: Declarar Permisos, se utiliza en la mayoría de las API de Chrome en tu extensión, previamente debes declararla colocando el campo permissions en tu manifiesto. Cada permiso puede ser una cadena de texto perteneciente a la siguiente lista (Dividido en 3 imágenes):
Con respecto a nuestro archivo popup.html deberá de quedar de la siguiente manera: 
 Popup MultipleColor body{ overflow: hidden; поле: 0px; отступы: 0px; background:#000; цвет: #fff; font-family: 'Lato', sans-serif; } .container{ width:400px; background-color:#000; цвет: #fff; line-height: 25px; } .container a{ color:#fff; } .container a:hover{ color:yellow; text-decoration: overline underline; }
Mas vistas: 
 Nuestro archivo main.js que contendrá la consulta del api y el manejo del evento clic, se representara de la siguiente manera:  $(document).ready(function(){ function abrirpagina() { chrome.tabs.create({ url: $(this).attr("href") }); } function buildPopupDom(mostVisitedURLs) { for (var i = 0; i < mostVisitedURLs.length; i++) { $("#lista_top").append(' '+mostVisitedURLs[i].title+'
«); } $(".enlaces").bind("click", abrirpagina); } chrome.topSites.get(buildPopupDom); }); 
 A nivel de estructura nuestro proyecto debió de quedar de la siguiente manera:
Al ejecutar nuestra extensión podremos ver un icono en la parte superior del navegador, que en mi caso lo diseñe de color azul, al hacer clic sobre él, me abre un popup con el listado de las paginas a la que más he accedido desde mi navegador ordenados por el número de visitas que he hecho.
0