Разработка расширения для Chrome за 15 минут

Пытаясь снова и снова очистить локальное хранилище моего браузера, я подумал, почему бы не автоматизировать мой браузер для этого? Я ведь разработчик, и за каждую минуту, потраченную вручную, я должен часами пытаться это автоматизировать!!

Шучу, это займет всего минуту.

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

Моя цель — очистить локальное хранилище браузера с помощью этого расширения. Скажем, у меня уже есть мой ключ в хранилище, как показано ниже,

и мне нужно удалить этот мой ключ с помощью расширения.

Настраивать

Количество файлов, необходимых для разработки расширения, на удивление меньше. Начнем с создания пустой папки с именем my-extension.

После этого первое, что мы должны сделать, это добавить файл manifest.json.

{
 "name": "Clear Local Storage",
 "description": "Deletes local storage items",
 "version": "1.0",
 "manifest_version": 3
}

Файл манифеста управляет метаданными проекта. Всем расширениям нужен файл манифеста.

Скрипт

Затем добавьте файл сценария popup.js, который удалит элементы локального хранилища, используя существующие API-интерфейсы JavaScript на стороне браузера.

function clearTokens() {
 window.localStorage.removeItem('my-key');
}

Здесь ничего особенного, вы можете попробовать эту же функцию в браузере, вызвав консоль (F12).

UI

Теперь давайте добавим пользовательский интерфейс. Для этого создайте файл popup.html.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="clear">Clear</button>
<script src="popup.js"></script>
</body>
</html>

Мы добавили сюда кнопку вместе с тегом сценария, в котором упоминается сценарий, который мы только что написали. По сути, при нажатии этой кнопки нам нужно выполнить скрипт. Мы также упомянули файл css на случай, если нам понадобится какой-то стиль.

Изменениеpopup.js

let clearButton = document.getElementById("clear");
clearButton.addEventListener("click", async () => {
 let [tab] = await chrome.tabs.query({ active: true, currentWindow:      true });
 chrome.scripting.executeScript({
 target: { tabId: tab.id },
 function: clearTokens,
 });
});
function clearTokens() {
 window.localStorage.removeItem('my-key');
}

Сначала мы добавляем на кнопку прослушиватель кликов, затем с помощью chrome API узнаем активную вкладку пользователя и затем выполняем скрипт только для этой активной вкладки, так как мы не хотим выполнять это расширение на каждой вкладке.

Разрешения

Большинство API необходимо зарегистрировать в поле "permissions" в манифесте, чтобы расширение могло их использовать. Мы использовали API tabs и scripting.

{
 "name": "Clear Local Storage",
 "description": "Deletes local storage items",
 "version": "1.0",
 "manifest_version": 3,
 "permissions": [
  "activeTab",
  "scripting"
 ]
}

Действия

Чтобы определить, что происходит, когда мы нажимаем на расширение, мы используем поле actions в файле манифеста. В нашем случае мы хотим показать файл popup.html при загрузке.

{
 "name": "Clear Local Storage",
 "description": "Deletes local storage items",
 "version": "1.0",
 "manifest_version": 3,
 "permissions": [
  "activeTab",
  "scripting"
 ],
 "action": {
  "default_popup": "popup.html"
  }
}