Мы уже рассмотрели наше первое расширение, которое не имеет вида и пользовательской темы.
Теперь давайте рассмотрим, как сделать расширение новой вкладки.
Идея этих расширений заключается в том, что они заменяют новую вкладку на созданную нами веб-страницу.
В результате мы получим новую вкладку, как показано здесь:
Настройка расширения новой вкладки
Чтобы начать работу, нам сначала нужно создать новую папку и перейти в нее.
mkdir new-tab-extension && cd new-tab-extension
Теперь откройте проект в вашем любимом редакторе.
Первое, что мы добавим, это manifest.json. Это всегда основная точка входа для любого браузерного расширения.
{
"manifest_version": 3,
"version": "1.0",
"name": "New Tab Extension",
"description": "A demo first new tab experience",
"action": {
"default_icon": "icons/icon-48.png"
},
"icons": {
"48": "icons/icon-48.png"
},
"chrome_url_overrides" : {
"newtab": "new-tab.html"
}
}
Мы определили его как манифест версии 3 и заполнили все необходимые детали.
Основное отличие здесь заключается в chrome_url_overrides.
Вы можете указать, что хотите переопределить некоторое поведение браузера по умолчанию.
В нашем примере мы перезаписываем newtab, чтобы открыть файл под названием new-tab.html.
Этот файл мы создадим и сделаем своим собственным.
Добавьте файл new-tab.html в корень вашего проекта.
Я добавил в него следующую базовую html-структуру.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DDT New Tab</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<h1>Hello world 👋</h1>
</body>
</html>
Вы можете расширить эту структуру настолько, насколько захотите.
Как вы видите, мы даже можем ссылаться на таблицы стилей.
Я добавил новую таблицу стилей в каталог css.
Я делаю базовый сброс внутри файла и центрирую текст на странице.
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
display: grid;
place-items: center;
background-color: rgb(238 242 255);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h1 {
font-size: 10vmin;
color: rgb(218 0 96);
}
Тестирование расширения
Мы не хотим публиковать в магазинах, не протестировав наше расширение, поэтому давайте посмотрим, что нужно сделать, чтобы опробовать его локально.
Я предпочитаю использовать Chrome, так как он имеет более быстрый интерфейс.
В Chrome нажмите кнопку «Плагины» и откройте страницу.
Затем включите режим разработчика. У вас появится еще одно меню, в котором вы сможете выбрать опцию загрузки распакованных расширений.
Нажмите кнопку загрузить распакованные и перейдите в папку new-tab-extension.
Chrome сообщит вам, что новая вкладка перезаписана и хотите ли вы ее сохранить.
Вы также можете скачать это расширение с GitHub и опробовать его самостоятельно.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь на Facebook или Twitter.