Два года назад я создал множество расширений для Firefox (всего 23), также известных как надстройки. Постепенно я перешел к другим сторонним проектам и забыл о них. Недавно я получил несколько положительных отзывов о некоторых расширениях и получил уведомления по электронной почте.
Далее я хотел попрактиковаться в Vanilla JS и, как всегда, хочу сделать в нем несколько проектов. Поскольку расширения Firefox создаются с использованием HTML, CSS и Vanilla JS, они являются отличным способом попрактиковаться в Vanilla JS.
Вы можете найти все мои расширения для Firefox здесь. Итак, продолжайте и установите их.
Еще одна вещь, прежде чем мы углубимся в кодирование, в чем я должен признаться. Я потерял доступ к своей учетной записи Mozilla, в которой была включена двухэтапная аутентификация. Я потерял приложение для проверки подлинности на своем старом телефоне, а также ключи восстановления.
Итак, я не могу обновить существующие расширения. Я добавлю их все снова с некоторыми обновлениями и запишу весь процесс в блог.
Лучшее место, где можно узнать о создании расширения для firefox, — это эта ссылка на mdn. Кроме того, есть эта потрясающая серия YouTube от The Coding Train.
Мы собираемся создать Динамическую тему путешествия и опубликовать ее на сайте дополнений Mozilla. Точкой входа и самым важным файлом любого расширения является файл mainfest.json. Вы можете прочитать больше об этом здесь". В основном он содержит метаданные о расширении, а также предоставляет указатели на другие файлы в расширении.
Итак, откройте редактор кода и создайте файл mainfest.json. Поместите в него содержимое ниже.
Самое главное в файле mainfest.json — это фоновый сценарий. Этот скрипт очень важен для этого плагина, так как нам нужно постоянно запускать его в фоновом режиме, чтобы проверять время пользователя и менять тему. Подробнее о фоновых скриптах можно прочитать здесь.
Итак, создайте в папке файл background.js. Сначала просто добавьте в него журнал консоли, так как нам нужно проверить, работает ли он.
Затем откройте браузер Firefox и введите указанный ниже URL. После этого нажмите кнопку Загрузить временную надстройку….
about:debugging#/runtime/this-firefox
После этого перейдите в свою папку и щелкните файл mainfest.json.
Далее загружается наше расширение, поэтому нажмите кнопку Проверить.
И мы получим лог консоли в новой вкладке. Обратите внимание, что фоновый скрипт не показывает журнал в консоли браузера.
Давайте обновим background.js, чтобы добавить прослушиватель событий. Мы сделаем это с помощью browser.alarms.onAlarm. Вы можете прочитать больше об этом здесь".
Теперь мы запускаем функцию checkTime() каждые 5 минут с помощью browser.alarms.create. Вы можете прочитать больше об этом здесь".
Мы также вызываем функцию checkTime() сначала один раз, так как нам нужно показать нашу тему, когда расширение запускается в первый раз.
Снова перейдите к расширению и нажмите кнопку Обновить, чтобы новые изменения вступили в силу.
Теперь нажмите кнопку Загрузить временную надстройку…, и внутренний журнал checkTime будет увеличиваться каждые 5 минут.
Далее давайте обновим нашу функцию checkTime(), чтобы получить часы, а затем передаем часы новой функции setTheme().
Теперь функция setTheme() использует browser.theme для обновления темы. Вы можете прочитать больше об этом здесь".
Далее нам нужно создать объект темы, в котором будет передаваться каждая тема.
var currentTheme = '';
const themes = {
'travel0': {
images: {
theme_frame: 'sun.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: '#111',
}
},
'travel1': {
images: {
theme_frame: 'travel1.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel2': {
images: {
theme_frame: 'travel2.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel3': {
images: {
theme_frame: 'travel3.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel4': {
images: {
theme_frame: 'travel4.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel5': {
images: {
theme_frame: 'travel5.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel6': {
images: {
theme_frame: 'travel6.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel7': {
images: {
theme_frame: 'travel7.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel8': {
images: {
theme_frame: 'travel8.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel9': {
images: {
theme_frame: 'travel9.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel10': {
images: {
theme_frame: 'travel10.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel11': {
images: {
theme_frame: 'travel11.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel12': {
images: {
theme_frame: 'travel12.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel13': {
images: {
theme_frame: 'travel13.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel14': {
images: {
theme_frame: 'travel14.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel15': {
images: {
theme_frame: 'travel15.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel16': {
images: {
theme_frame: 'travel16.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel17': {
images: {
theme_frame: 'travel17.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel18': {
images: {
theme_frame: 'travel15.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'black',
}
},
'travel19': {
images: {
theme_frame: 'travel19.jpeg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel20': {
images: {
theme_frame: 'travel20.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel21': {
images: {
theme_frame: 'travel21.jpg',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel22': {
images: {
theme_frame: 'travel22.png',
},
colors: {
frame: '#CF723F',
tab_background_text: 'white',
}
},
'travel23': {
images: {
theme_frame: 'moon.jpg',
},
colors: {
frame: '#000',
tab_background_text: '#fff',
}
}
};
Затем добавьте все изображения в папку.
Теперь, когда вы перезагружаете расширение, тема загружается в зависимости от часа.
Мы закончили с расширением, но давайте добавим несколько значков перед публикацией на сайте дополнений Mozilla. Обновите приведенный ниже файл manifest.json, а также добавьте значки папок, содержащие эти значки.
Нам нужно опубликовать это расширение, но, поскольку этот пост становится длиннее, мы сделаем это в следующем посте.
Вы можете найти код этого расширения здесь. Вторую часть сериала можно найти здесь.
