Расширение для браузера на js. Notepad

Начнём со структуры файлов. Т.к. я только начинаю в этом всём разбираться то всё лежит в одной папке:

└background.js
└icon.png
└index.html
└manifest.json
└style.css

Я не буду разбирать структуру html и css. Всё что необходимо знать что в файле html есть <textarea cols="82" rows="20" id='GetText' autofocus></textarea> с которой и будет происходить взаимодействие на стороне js скрипта.

Начнём разбор с файла manifest.json

{
  "manifest_version": 2,
  "name": "NOTEPAD",
  "description": "Notepad, creator: t.me/CodingCommunity",
  "version": "0.0.1",
  "icons": {"128": "icon.png"},
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  }
}

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

Перейдем к js коду. У нас будет всего одна функция которая будет отвечать за сохранение и загрузку данных из локального хранилища. При загрузки страницы мы достаём из локального хранилища данные которые там имеются по ключу "text" и заносим их в html файл в тег textarea, а если быть точнее то в его значение. Далее мы назначаем слушателя onkeyup который реагирует на отпущенную клавишу, после чего заносим в локальное хранилище данные из textarea. Вот что про onkeyup пишет гугл:

keyup() привязывает JavaScript обработчик событий "keyup" (нажатая клавиша была отпущена), или запускает это событие на выбранный элемент. Событие "keyup" посылается элементу в тот момент, когда пользователь отпустит нажатую клавишу на клавиатуре.

window.onload = () => {
  let getTextFromTextArea = document.getElementById('GetText');
  getTextFromTextArea.value = localStorage.getItem('text')
  getTextFromTextArea.onkeyup = () => {
    localStorage.setItem('text', getTextFromTextArea.value);
  }
}

Да, это полный листинг. Его мало но расширение невероятно полезное. Можете не смотреть css, там я просто позаимствовал код для текста сверху. В общем, вот как работает расширение:

Расширение было протестировано в Google Chrome (Версия 86.0.4240.198) и Opera (Версия:72.0.3815.378)

Прошу меня простить за мой ужасный код, вы всегда можете модифицировать мой код и использовать как хотите, я не несу за это ответственности.

Телеграм канал: https://t.me/CodingCommunity