Можно не только устанавливать готовые расширения для браузера Chrome, но и создавать собственные.
Список установленных расширений можно увидеть по адресу chrome://extensions/. Если вы забудете адрес, то можно открыть эту страницу через меню More tools | Extensions (в англ. версии).
Домашняя страница для подписанных расширений - https://chrome.google.com/webstore/category/extensions
При создании расширения используются технологии HTML, CSS, JavaScript, а также иногда JSON.
На основе книги Introduction to Google Chrome Extensions.
Создадим первое собственное расширение ShowTime, которое добавит кнопку (Browser-Action button) на панель браузера. При щелчке откроется всплывающее окно, в котором будет отображаться текущее время и дата.
Для начала нужно создать папку с любым именем с вложенными файлами. Среди всех прочих файлов обязательно должен содержаться файл manifest.json, остальные файлы могут иметь любые имена.
Для первого примера понадобятся файлы popup.html, popup_script.js, icon.png (несколько версий), manifest.json.
Внутри файла manifest.json размещаются обязательные и необязательные параметры.
К числу обязательных относятся параметры manifest_version, name, version.
Параметр manifest_version указывает на версию манифеста и должно содержать целочисленное значение больше 0. На данный момент актуальной считается версия 2. Параметр name указывает на имя расширения в виде строки. К параметру name можно добавить дополнительный атрибут description для описания расширения. Параметр version указывает на версию расширения в виде строки, которая должна содержать число.
Если мы хотим добавить кнопку на панель браузера, то в манифесте следует прописать данное поведение. Кнопка имеет название Browser-Action и в манифесте прописывается как browser_action с необходимыми атрибутами.
Пропишем данные в манифесте.
{
"manifest_version" : 2,
"name" : "ShowTime",
"description" : "Extension to show the current time and date",
"version" : "1.2",
"browser_action" : {
"default_title" : "ShowTime", // в т.ч. подсказка при наведении мыши
"default_icon" : "icon.png", // значок на панели
"default_popup" : "popup.html"
},
"icons" : {
"16" : "icon16.png", //Used as the favicon for an extension's pages
"48" : "icon48.png", //Used on the extension management page
"128" : "icon128.png" //Used during installation & in the Chrome Web Store
}
}
С манифестом разобрались. Теперь можно написать код для расширения. Для этого используется стандартный JavaScript. Откроем файл popup_script.js и добавим код.
//region {variables and functions}
var timeId = "time";
var dateId = "date";
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct","Nov", "Dec"];
var consoleGreeting = "Hello World! - from popup_script.js";
function setTimeAndDate(timeElement,dateElement) {
var date = new Date();
var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
var time = date.getHours() + ":" + minutes;
//In "date.getMonth", 0 indicates the first month of the year
//In "date.getDay", 0 represents Sunday
var date = days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear();
timeElement.innerHTML = time;
dateElement.innerHTML = date;
}
//end-region
//region {calls}
console.log(consoleGreeting);
document.addEventListener("DOMContentLoaded",function(dcle) {
var timeElement = document.getElementById(timeId);
var dateElement = document.getElementById(dateId);
setTimeAndDate(timeElement,dateElement);
});
//end-region
Теперь создадим страницу popup.html.
<!DOCTYPE html>
<html>
<head>
<!-- The following tag is not obeyed -->
<title>ShowTime (Custom)</title>
<!--
<script>
// Inline scripts are not allowed
alert('Hello World');
</script>
-->
<!-- Referring scripts is allowed -->
<script src="popup_script.js"></script>
<style>
body {
padding:0px;
margin:0px;
width:300px;
height:200px;
}
div {
height:100%;
width:100%;
display:table;
font-family:"Tahoma","Verdana";
font-size:15px;
font-weight:bold;
text-shadow:0px 0px 1px #000000;
background-color:#555;
color:#fff;
}
h1,h2 {
display:table-row;
vertical-align:middle;
text-align:center;
}
h2 {
background-color:#777;
}
.unselectable {
-webkit-user-select:none;
cursor:default;
}
</style>
</head>
<body>
<div class="unselectable">
<h1 class="empty"></h1>
<h1 id="time"></h1>
<h2 id="date"></h2>
</div>
</body>
</html>
Путь к скрипту всегда должен быть относительным. Можно создать несколько js-файлов, если скрипты сложные и требуется разделение по логике поведения. CSS-свойства также можно вынести в отдельный файл.
<link type="text/css" rel="stylesheet" href="some_file.css" />
Приготовления закончены. Можно загрузить расширение в браузер и протестировать его. Откройте страницу chrome://extensions и включите режим разработчика Developer mode. В этом режиме будут доступны кнопки LOAD UNPACKED, PACK EXTENSION, UPDATE.
Щёлкните по кнопке LOAD UNPACKED и загрузите своё первое расширение. Оно появится в списке расширений, а также появится значок на панели. Щёлкните по значку, чтобы увидеть работу расширения в действии.
Вы можете использовать DevTools для отладки и тестирования как для обычных страниц и скриптов. Один из примеров для вывода в лог специфичных функций расширений (режим Инкогнито).
chrome.extension.isAllowedIncognitoAccess(function(isAllowed) {
console.log(isAllowed);
});
Можно разместить своё расширение в специальном магазине расширений. Для этого заходим на страницу https://chrome.google.com/webstore/developer/dashboard. При первом заходе вам будет предложено войти в свою учётную запись и оплатить регистрацию (5$). После оплаты вам будет доступен весь функционал. Вам нужно будет упаковать свою папку в zip-файл и загрузить его на сервер. В успешном случае вы подтверждаете публикацию и ваше расширение будет доступно в магазине.
В первом примере мы познакомились с компонентом Browser-Action. Доступны и другие компоненты.
Также доступны скриптовые компоненты со своими областями видимости.