Мое вдохновение было моей любовью к Таиланду и любопытством к новой кроличьей норе.

Я занимался своим обычным делом, когда наткнулся на расширение 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

  1. Настройте папку корневого каталога файловой структуры, папку изображений, manifest.json, newTab.html, newTab.css, newTab.js. Дополнительные файлы для использования позже options.html, options.js, popup.html, popup.js
  2. Создайте исходный манифест
{ "name": "Random Image","version": "1.0","description": "A random  background image generator","manifest_version": 2 }
  1. Добавьте свой каталог в качестве расширения в режиме разработчика

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; 
}
  1. Создайте 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, Инстаграм