Мое вдохновение было моей любовью к Таиланду и любопытством к новой кроличьей норе.
Я занимался своим обычным делом, когда наткнулся на расширение Momentum для Chrome. Это было очень вдохновляюще и полностью оправдало профессиональную цену. Так что мой аналитический ум сказал, что было бы весело перепроектировать это.
Итак, я сделал то, что делают большинство людей, и выполнил поиск в Google. Мой первый вопрос заключался в том, как создать расширение для Chrome. Первоначально я обнаружил, что мое внимание привлекла публикация Андрея Элекеса на Medium, которая меня подтолкнула и очень помогла. Но мне захотелось узнать больше, поэтому я зашел в Документы Google.
Я раньше не создавал расширения Chrome, поэтому для ознакомления я сделал то, что делают большинство разработчиков, и начал создавать версию Hello World из документации.
Я выполнил первые несколько шагов, а затем обнаружил свою первую ошибку, эй, без проблем, я подумал, давай просто прочтем?
«Ключ« background.scripts »нельзя использовать с manifest_version 3. Вместо этого используйте ключ« background.service_worker ».»
После того, как я немного поработал и поработал, я обнаружил, что Google находится в процессе реализации версии 3, которая использует сервис-воркеров вместо фона. Это одно из изменений V3, но в руководстве по началу работы в файле манифеста написано «manifest_version»: 3, но у него все еще была версия V2.
"background": {"scripts": ["background.js"],"persistent": false}
Увидев, что по состоянию на 29.12.20 руководство по началу работы не было обновлено, я решил просто продолжить с учебником по началу работы в manifest V2 Ответом на первоначальную ошибку для меня просто объявить «manifest_version»: 2
После того, как снова нашел фокус и захотел закрыть эту кроличью нору. Я решил, что хочу создать базовое расширение Chrome с использованием манифеста V3, которое будет загружать случайное фоновое изображение на вкладке браузера Chrome.
Чтобы продолжить знакомство, я продолжил руководство по началу работы в документации. Оно на самом деле неплохое и простое в использовании в контексте manifest V2. Я обнаружил, что вместо того, чтобы воссоздавать каждый шаг заново, он дает вам основы и его нетрудно реализовать.
В конце концов, у него есть всплывающее окно и есть кнопка, с помощью которой вы можете изменять цвета в опциях, это здорово, чтобы понять основы.
Я хотел большего, поэтому, копаясь, я обнаружил этот файл в документации Google. GitHub - GoogleChrome / chrome-extensions-samples: Chrome Extensions Samples В разделе руководств в файле get_started_complete вы можете увидеть, что popup.js имеет вариант, в котором прослушиватель onclick может изменить цвет фона URL-адреса, который прослушивает сообщение в background.js
Итак, как я создал простое расширение, которое добавляет случайное фоновое изображение в браузер Chrome?
Сначала я сделал то, что делают большинство разработчиков, я гуглил. В конце концов, я обнаружил, что если бы я задал правильный вопрос раньше, решение было бы гораздо быстрее.
На самом деле это было довольно просто, поскольку я уже написал код для установки случайного изображения в теге body в моем первом одностраничном приложении JavaScript, которое я создал Thailand explorer
Какой был правильный вопрос? Как создать расширение Chrome для изменения вкладки по умолчанию
Шаги по созданию расширения фона случайного изображения версии 1.0
- Настройте папку корневого каталога файловой структуры, папку изображений, manifest.json, newTab.html, newTab.css, newTab.js. Дополнительные файлы для использования позже options.html, options.js, popup.html, popup.js
- Создайте исходный манифест
{ "name": "Random Image","version": "1.0","description": "A random background image generator","manifest_version": 2 }
- Добавьте свой каталог в качестве расширения в режиме разработчика
1а. Откройте страницу управления расширениями, перейдя по адресу chrome: // extensions.
2а. Включите режим разработчика, щелкнув переключатель рядом с режимом разработчика.
3а. Нажмите кнопку ЗАГРУЗИТЬ РАСПАКОВАННЫЙ и выберите каталог расширения.
3. Добавьте значки
Вы можете создать свои собственные или взять их из
руководства Google по началу работы. Вот ссылка на документы о размерах и о том, для чего они нужны. Icon Docs
4. Обновите manifest.json
{ "name": "Random Image", "version": "1.0", "description": "A random background image generator", "permissions": ["activeTab", "declarativeContent", "storage"], "chrome_url_overrides": { "newtab": "newtab.html" }, "action": { "default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "default_title": "Random Image", "default_popup": "popup.html" }, "icons": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "manifest_version": 3 }
5. Создайте netTab.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial- scale=1.0" /> <title>Thailand Images</title> <link rel="stylesheet" href="newTab.css" /> </head> <body class="pageBody"> <script src="newTab.js"></script> </body> </html>
6. Создайте newTab.css
body { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(“https://thailand-exp-images.s3-us-west-2.amazonaws.com/komloy.jpg”); background-repeat: no-repeat; background-size: cover;
}
- Создайте newTab.js
const pageBody = document.body; const ready = (callback) => { if (document.readyState != "loading") callback(); else document.addEventListener("DOMContentLoaded", callback); }; // TODO: Add images dynamically from extension settings const setRandomImage = () => { const IMG_URL = "https://thailand-exp-images.s3-us-west- 2.amazonaws.com/"; const backgroundImages = [ "riceLady.jpg", "raileyBeach.jpg", "monksTemple.jpg", "monkeys.jpg", "manChang.jpg", "maeYai.jpg", "girlsWater.jpg", "girlChang.jpg", "floatingMarket.jpg", "buddha.jpg", "boyBudah.jpg", "ancient.jpg", "thaiBackground.jpg", "Yipeng.jpg", "islands.jpg", "Loy_Krathong.jpg", "thaiBudah.jpg", "komloy.jpg", ]; const randomImage = backgroundImages[Math.floor(Math.random() * backgroundImages.length)]; pageBody.style.backgroundImage = `url(${IMG_URL}${randomImage})`; }; ready(() => { setRandomImage(); });
7. Дополнительные файлы для более поздних опций и всплывающих окон.
Если вам нравится видеть код, вот мои репозитории.
GitHub - Ongomobile / random-bg-extension
GitHub - Ongomobile / change-bg-color-chrome-extension
Следующая задача - добавить изображения в параметрах или всплывающем окне и не зависеть от жестко запрограммированных изображений.
Я надеюсь, что это было полезно, не стесняйтесь обращаться с отзывами или вопросами.
Ваше здоровье,
Майк Хаслам
Спасибо, что нашли время прочитать мою статью, если вы ищете больше подобных сообщений, вы можете найти меня в LinkedIn, Dev, Medium, Facebook, Twitter, Инстаграм