Доброта лучше красоты (Г. Гейне).

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

Главное меню » Информация » Как сделать расширение Chrome

28.10.2019

Google тестирует новую функцию, которая ускоряет работу браузера Chrome - вот как это сделать сейчас

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

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

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

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

Создание файла manifest.json

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

{

"manifest_version": 2, 

"name": "My First Extension", 

"version": "0.1"

}

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

Загрузка расширения в Chrome

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

Сценарии содержимого

Согласно официальной документации, скрипты контента — это файлы, которые запускаются в контексте веб-страниц. Они могут читать или изменять веб-страницу и передавать информацию в родительское расширение, используя стандартную объектную модель документа (DOM). Сценарий содержимого может обмениваться «сообщениями» со своим родительским расширением и, следовательно, иметь возможность доступа к API Chrome, используемым их родительским расширением. Некоторые часто используемые API Chrome: onConnect, onMessage и sendMessage среди других.

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

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

Внедрение скриптов содержимого

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

Поэтому мы обновляем файл manifest.json следующим образом:

"permissions": ["activeTab"], 

"content_scripts": [

{

"matches": [ "https://www.youtube.com/*"], 

"js": ["contentScript.js"] 

}

]

Теперь мы можем внедрить скрипт контента в веб-страницу. Мы можем добавить часть кода или целый файл. В этом примере мы будем внедрять весь файл javascript, contentScript.js. Когда этот файл внедряется, он изменяет окно проигрывателя YouTube, чтобы уменьшить непрозрачность элементов управления проигрывателя. Этот файл содержит следующий код:

//contentScript.js

var s = document.getElementById('stylehidecontrols'); 

if (s) {

s.remove();

} 

else{ 

s = document.createElement('style'); 

s.id = 'stylehidecontrols'; 

var r = '#movie_player .ytp-gradient-top, #movie_player .ytp-gradient-bottom, #movie_player .ytp-chrome-top, #movie_player .ytp-progress-bar-container, #movie_player .ytp-chrome-controls{opacity: 0.2 !important;}'; 

s.appendChild(document.createTextNode(r));

document.body.appendChild(s);

}

Сначала мы пытаемся найти элемент с идентификатором «stylehidecontrols». Если он найден, мы удаляем его, чтобы восстановить прозрачность. Если он не найден, то нужно уменьшить непрозрачность элементов управления видеопроигрывателя. Для этого мы сначала создаем элемент «style», содержащий информацию о стиле CSS, и присваиваем ему идентификатор «stylehidecontrols», который мы пытались найти ранее. Теперь мы создаем текст с информацией в стиле CSS о различных известных элементах на веб-сайте YouTube, которые связаны с видеоплеером, и назначаем его переменной «r». Обратите внимание, что мы установили непрозрачность для всех этих элементов на 0.2, чтобы они не мешали обзору, но все же были видимы и могли использоваться.

Теперь мы создаем узел с переменной «r», а затем добавляем его к элементу стиля «s». И, наконец, мы добавляем «s» в тело документа. Это заставляет новый стиль вступать в силу немедленно и уменьшает непрозрачность элементов управления видео. Если снова щелкнуть значок расширения, он просто удалит элемент стиля из DOM, тем самым восстановив непрозрачность до оригинала.

Фоновый скрипт

Чтобы внедрить скрипт контента программным способом, нам нужен файл javascript, который всегда работает в фоновом режиме и прослушивает событие click. Сценарии содержимого имеют некоторые ограничения, поскольку они не могут прослушивать события щелчка, поэтому для этой задачи нам нужен фоновый сценарий, который может получить доступ к API Chrome, но не может получить доступ к веб-странице. Этот фоновый скрипт прослушивает определенное событие, а затем может внедрить код JavaScript в страницу, которая, в свою очередь, может получить доступ и изменить веб-страницу. Мы должны объявить файл фонового скрипта в манифесте следующим образом:

"background": {

"scripts": ["backgroundScript.js"]

}

Фоновый скрипт отвечает за прослушивание события click и затем вставку файла «contentScript.js» на страницу. Содержимое фонового скрипта:

//backgroundScript.js

chrome.browserAction.onClicked.addListener(

function(tab) {

chrome.tabs.executeScript(tab.id, {

"file": "contentScript.js"

});

});

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

Контент-скрипты также могут вводиться «декларативно». Для этого мы можем добавить что-то вроде этого в файл manifest.json:

"content_scripts": [

{

"matches": ["http://*.mywebsite.com/*"],

"css": ["styles.css"],

"js": ["contentScript.js"]

}

]

The css field is optional and can be used to inject css files for the matching pages. They are injected in the order they are declared in the array.

Действия

Расширения Chrome могут иметь два типа действий: действия на странице и действия браузера. Действия страницы могут действовать только на текущей странице, в отличие от действий браузера. Мы можем включить значки и всплывающие окна для расширения с помощью действий. Чтобы разместить значок на главной панели инструментов Google Chrome, добавьте его в файл manifest.json:

"browser_action": {

"default_icon": {

"32": "icon.png"

}

}

Вы можете создавать иконки любого размера в графическом редакторе, таком как Photoshop, Illustrator или Gimp. Также вы можете просто скачать иконку нужного размера из интернета. После того, как у вас есть значок, поместите его с текущим именем в корневую папку.

Это добавляет значок размера 32 на 32 на главной панели инструментов Chrome. Мы также можем включить значки других размеров, но если не предоставлено, Chrome автоматически изменит размер значка, чтобы соответствовать соответственно.

Полный файл manifest.json

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

//manifest.json

{

"manifest_version": 2,

"name": "Youtube Player Controls",

"version": "0.1",

"description": "This extension reduces the opacity of Youtube video player controls for better visibility of the content.",

"background": {

"scripts": ["backgroundScript.js"]

},

"permissions": ["activeTab"],

"content_scripts": [

{

//"matches": [""],

"matches": ["https://www.youtube.com/*"],

"js": ["contentScript.js"]

}

],

"browser_action": {

"default_icon": {

"32": "icon.png"

}

}

}