14.09.2023 в 17:25

Создавайте расширения в кратчайшие сроки

Вы когда-нибудь мечтали о собственном расширении для браузера? Вы когда-нибудь хотели, чтобы существовало расширение, которое делает то и это? Ну, просто создайте его! Для начала вам понадобится только файл manifest.json.

Создайте/используйте расширение

Создайте папку с именем вашего расширения и добавьте в нее файл manifest.json.

В манифесте добавьте { } и создайте там ключ имени:

{
  "name": "tutorial"
}

После этого нам понадобится manifest_version, version ключ:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0"
}

Version — это просто версия вашего расширения, поэтому не имеет значения, 1.0.0, 0.1.0 или 34.110.01.

Теперь откройте браузер, перейдите по адресу edge://extensions/ и включите режим разработчика.

Наконец, перетащите свою папку в окно расширений и найдите свое расширение в списке расширений (нажмите "Reload" на своем расширении, если вы что-то измените):

Добавьте базовый функционал

Всплывающее окно при нажатии на расширение

Вы можете добиться этого, просто добавив в манифест action > default_popup.

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  }
}

И создадим файлы popup.html и style.css в каталоге всплывающих окон:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
└── manifest.json

В popup.html создайте простое всплывающее окно с HTML/CSS, например:

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
}

body {
  background: #222;
  color: white;
  font-family: sans-serif;
}

h1 {
  padding: 40px;
  width: max-content;
}

Теперь это должно выглядеть так (НЕ ЗАБУДЬТЕ НАЖАТЬ «ПЕРЕЗАГРУЗИТЬ» НА РАСШИРЕНИИ НА СТРАНИЦЕ РАСШИРЕНИЙ):

Внедрите JavaScript/CSS на страницу

Просто добавьте "content_scripts" > "js" / "css" в манифест.

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [
    {
      "js": ["inject/inject.js"],
      "css": ["inject/inject.css"],
      "matches": ["*//example.com*"]
    }
  ]
}

Структура папок сейчас:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json

Для этого урока я сделаю фон сайта example.com черным и добавлю текст Hello World:

inject.css

html, body {
  background-color: black !important;
}

html, body {
  background-color: black !important;
}

Теперь просто перезагрузите расширение и перейдите на example.com.

Для JavaScript то же самое, и если вы хотите добавить HTML на страницу, просто добавьте это в свой inject.js:

const p = document.createElement("p");
p.innerText = "Hello World";
p.style.color = "white";
p.style.padding = "40px";
p.classList.add("CLASS NAME FOR STYLING IN INJECT.CSS")
document.body.appendChild(p);

Теперь вы посмотрите на это:

Добавить значок в расширение

Добавьте "icons" в манифест:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [
    {
      "js": ["inject/inject.js"],
      "css": ["inject/inject.css"],
      "matches": ["https://example.com/"]
    }
  ],
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

После этого добавьте файлы значков следующим образом:

tutorial/
├── icons/
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-64.png
│   └── icon-128.png
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json

Источник:

Selected Sort Option

#CSS #HTML

Войти на сайт