Это третья часть серии «Создание расширений Chrome с нуля». В этой части мы продолжим с того места, на котором остановились в предыдущей части.
- Как добавить всплывающую страницу в расширение.
- Как добавить фоновую страницу в расширение.
- Как общаться между расширениями с помощью API расширений Chrome.
В этой части серии мы попытаемся изучить другие файлы, которые вы, скорее всего, будете использовать при создании расширения Chrome.
конфигурация
Если у вас есть расширение, вы можете не хотеть, чтобы оно было активным для всех веб-страниц. Вместо этого вы можете захотеть, чтобы он был активен только для определенного веб-сайта или, если быть точным, шаблон URL Чтобы достичь этого, расширения Chrome предоставляют вам два варианта.
- Действия страницы
- Действия браузера
Расширение настраивается как действие страницы, когда вы хотите, чтобы значок расширения был виден в крайнем правом конце адресной строки, но только тогда, когда он удовлетворяет определенному условию. Например, предположим, что вы хотите, чтобы значок Mr0 был виден только при открытии страницы википедии. Действие страницы появляется в адресной строке браузера вместо панели инструментов. Давайте попробуем сделать наше расширение действием страницы.
Вот как будет выглядеть наш новый файл манифеста
manifest.json
{
"name": "Mr0",
"version": "1.0",
"background_page": "background.html",
"permissions": ["tabs"], //We will talk about this later
"page_action": {
"default_icon": "images/icon19.jpg",
"default_popup": "popup.html"
}
}
Чтобы изменить видимость значка расширения, нам нужно найти средство для уведомления при изменении URL-адреса во вкладках, то есть когда пользователь выбирает другую вкладку. Слушатель должен быть размещен на фоновой странице, потому что это единственная страница в расширении, которая существует в браузере все время. Вот что вы можете написать на странице расширения.
background.html
<script type="text/javascript">
function checkForWikiUrl(tabId, changeInfo, tab) {
// If the URL of the tab contains the string wikipedia.org
var isWikiUrl = tab.url.match(/wikipedia\.org/);
if (isWikiUrl) {
// ... show Mr0.
chrome.pageAction.show(tabId);
}
else
{
chrome.pageAction.hide(tabId);
}
};
//Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForWikiUrl);
</script>
Код довольно прост. Как вы могли заметить в предыдущем фрагменте, мы добавили новый ключ в файл манифеста — «разрешения». Это необходимо, если вы хотите предоставить вашему расширению доступ к API расширения javascript для вкладок chrome. Если вы этого не сделаете, ваш код javascript на странице расширения для регистрации обработчика события onUpdated приведет к ошибке.
Теперь, если вы перезагрузите свое расширение и откроете вики-страницу на вкладке, вы увидите, что значок расширения появляется в адресной строке каждый раз, когда вы открываете страницу википедии. Если вы откроете любую другую страницу, значок расширения автоматически исчезнет.
Действия браузера
«Действия браузера» — это то, что мы использовали во всех предыдущих частях серии. Когда вы настраиваете расширение как действие браузера, значок расширения будет виден на панели инструментов, независимо от того, на какой вкладке или на какой странице вы находитесь. На протяжении всей серии мы сохранили в расширении Mr0 действие браузера вместо действия страницы, потому что я хотел видеть значок на панели инструментов браузера. Однако вы можете сделать это по-разному в зависимости от ваших требований.
Однако между действием браузера и действием страницы есть небольшая разница. Если у вас есть действие браузера, вы можете добавить значок к расширению. Вы не можете сделать то же самое для действия на странице. Хотите знать, что это за значок? Ну, значок — это не что иное, как маленький кусочек текста, который вы можете отобразить поверх значка на панели инструментов. Вы можете сделать это на странице фона для расширения, просто добавив следующую строку кода
chrome.browserAction.setBadgeText({text:'Mr0'});
Сценарии содержания
Сценарии содержимого — это сценарии, которые вы указываете в файле манифеста, которые включаются во все страницы, для которых настроено расширение. Например, если вы создадите простой скрипт содержимого в своем расширении, который регистрирует сообщение, такое как «привет», на консоли веб-страницы, вы сможете увидеть сообщение, напечатанное на каждой веб-странице, для которой расширение настроено для запуска. на. Давайте попробуем это на нашем примере с Mr0.
Для этого все, что вам нужно сделать, это создать простой файл javascript и, возможно, назвать его myScript.js и поместить его прямо в корневой каталог вашего расширения. Мы просто добавим к этому простую строку.
console.log("Bingo");
Теперь в вашем файле manifest.mf вы должны упомянуть этот скрипт как скрипт контента. Вот как будет выглядеть наш manifest.mf после изменения
{
"name": "Mr0",
"version": "1.0",
"background_page": "background.html",
"permissions": ["tabs"],
"content_scripts": [
{
<span class="Apple-tab-span" style="white-space: pre;"> </span> "matches": ["http://*.wikipedia.org/*"],
"js": ["myScript.js"]
}
],
"page_action": {
"default_icon": "images/icon19.jpg",
<span class="Apple-tab-span" style="white-space: pre;"> </span>"default_popup": "popup.html"
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
}
Если вы внимательно присмотритесь, вы заметили, что мне пришлось использовать другое свойство — «совпадения» внутри массива content_scripts, чтобы скрипт содержимого вставлялся только в страницы, соответствующие данному шаблону URL. Может быть любой шаблон соответствия, и вы можете обратиться к документации
здесь для более подробной информации.
Теперь, когда вы откроете любую страницу википедии и нажмете F12 (ярлык, чтобы открыть фрейм Chrome Developer Tools), проверьте консоль, и вы увидите классное сообщение с надписью «Бинго». Вы можете открыть любое количество страниц википедии, и одно и то же сообщение будет напечатано на консоли каждой из этих страниц.
На самом деле это означает, что вы можете написать собственный javascript и выполнить его на каждой странице независимо. Я использовал это слово независимо, потому что ваш пользовательский скрипт будет выполнен так, что, хотя у него будет доступ к структуре DOM вашей страницы, он не сможет получить доступ к любому другому javascript, который выполняется на этой странице. Это позволяет вам писать собственные сценарии, не беспокоясь о конфликте имен переменных.
Используя ту же функцию, вы также можете включить внешние библиотеки в расширение Chrome. Например, вы можете добавить файл фреймворка jquery в ваше расширение. Версия jQuery, которую вы используете в своем расширении, может отличаться от версии jQuery, используемой клиентом, и никаких столкновений не будет.
Вы можете добавить несколько сценариев содержимого, разделенных запятыми, в объекте ‘js’. Например, следующий фрагмент кода позволит вам добавить библиотеку jQuery в ваше расширение и сделать ее доступной для использования во всех ваших пользовательских скриптах.
"content_scripts": [
{
<span class="Apple-tab-span"> </span> "matches": ["http://*.wikipedia.org/*"],
"js": ["jquery.js","myScript.js"]
}
]
Этот код предполагает, что у вас есть файл с именем ‘jquery.js’ непосредственно в корневом каталоге вашего расширения chrome.
Теперь, когда у вас есть Javascript Framework и возможность доступа к DOM страницы через ваш контент-скрипт, вы можете с легкостью делать практически все, что возможно с DOM вашей страницы.
Есть несколько других параметров конфигурации, которые пригодятся вам при создании расширений Chrome. Однако примеров из этой серии должно быть достаточно, чтобы вы могли начать работу с нуля в кратчайшие сроки.
Удачного программирования ?