Хромированные плагины развлекаются и могут быть полезным и персонализированным способом начать свой день.

Лучшая часть – это фактически относительно просты.

Все, что вам нужно, это HTML, CSS и JS.

Основная настройка

Основная настройка настолько базовая, я обнаружил, что уставился на мой компьютер, говоря, что?

Создание Mainest.json file Документация Chrome на самом деле велик и в глубине, если вы хотите узнать больше Но для этого вилка в манифесте будет голые кости:

{
  "manifest_version": 2,
  "name": "Chrome plugin template Devto",
  "description": "Chrome plugin template Devto",
  "version": "1",
  "author": "Jenny Judova",
  "browser_action": {
    "default_title": "Fun with Flags"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

Распечатать Hello World

Теперь давайте сделаем вещь и напечатайте «Hello World».

В Mainest.json chrome_url_overrids мы заявили, что новая вкладка переопределяет HTML-файл называется NewTab.html, поэтому давайте создам этот файл.

newtab.html.

  



  
Hello World!

Это здорово, но как мы проверим, работало ли это? Мы не можем пойти в локальный хост для этого. Вместо этого сделайте это: 1 – перейдите в Chrome://расширения/2 – Убедитесь, что переключатель режима разработчика включен 3 – нажмите на загрузочную кнопку 4 – выберите папку с вашим проектом 5 – Нажмите «Выбрать» 6 – Откройте новую вкладку

Груз!

Теперь давайте сделаем это расширение сделать что-то вроде шоу флагов и стран. Не судите весело с флагами, которые я выбрал флаг API, поскольку он не требует токена.

Как сделать вызов API

Давайте создадим файл под названием NewTab.js и связать его в NewTab.html, добавив

Непосредственно перед закрытием тега тела. Давайте сделаем чек здравомыслия и в новых tab.js Добавить

function init() {

  console.log('HI')

}

window.addEventListener('DOMContentLoaded', init)

Простой. Отечень должен сделать трюк для вызова API. Вот так:

  function getAllFlags() {
    fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
      .then(response => response.json())
      .then(response => {
        flags = response
        chrome.storage.local.set({ data: flags });
      })
      .catch(err => console.log(err))

У нас есть информация о флагах, теперь позволяет отображать их в интерфейсе интерфейса, добавив функцию для их отображения и некоторых CSS, для этого стоит смотреть на Github проекта Отказ

Как использовать Chrome.Storage.local

Способ расширения работает в данный момент, заключается в том, что каждый раз, когда вы открываете новую вкладку, происходит новый вызов API. Учитывая большую часть нас открывают дюжину вкладки каждый час, что может быть более эффективно хранить ответ запроса в Chrome.Storage.local И проверить, имеет ли он данные перед запуском вызова на API.

Для достижения этого мы должны использовать Chrome.Storage.local.Set. и Chrome.Storage.local.get

Также убедитесь, что избежать этого Общая подводная масса – Убедитесь, что ваш манифест.

  "permissions": [
    "storage"
  ]

Чтобы сохранить что-то в локальном хранилище, позволяет добавить эту строку в запрос Fetch

Chrome.Storage.local.Set ({данные: флаги});

Так что все это будет выглядеть так:

fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          console.log('empty')
          flags = response
          chrome.storage.local.set({ data: flags });
        })
        .catch(err => console.log(err))

Давайте добавим функцию, которая проверит локальное хранилище.

  function checkLocalStorage() {
    chrome.storage.local.get('data', function (result) {
      result.data == undefined ? isLocalStorageFull = false : isLocalStorageFull = true
      getAllFlags(isLocalStorageFull)
    });
  }

Давайте также обновим функцию GetAllFlags для:

  function getAllFlags(isLocalStorageFull) {
    if (isLocalStorageFull) {
      chrome.storage.local.get('data', function (result) {
        flags = result.data
        displayFlags(flags)
      })
    } else {
      fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          flags = response
          chrome.storage.local.set({ data: flags });
          displayFlags(flags)
        })
        .catch(err => console.log(err))
    }
  }

По сути, это наша подключаемость. Не стесняйтесь добавлять свои собственные CSS или копировать пасту из готового приложения здесь Отказ

Это то, с чем мы в конечном итоге.

Оригинал: “https://dev.to/jennyjudova/how-to-build-a-chrome-plugin-4jg2”