На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Расширения для браузера Chrome: быстро и просто


Интернет все разрастается, и очень многое переходит в веб. А самые популярные инструменты для работы с этим самым интернетом – браузеры. Однако функциональность «голого» Chrome или FF позволяет только просматривать сайты, не меняя их содержимого (точнее, отображаемого содержимого). Для этого и нужны расширения (дополнения, плагины). Давайте за 5 минут научимся создавать простые расширения для браузера хром.



Начнем с того, что расширения пишутся на JavaScript. По сути почти любой такой плагин просто работает с контентом страницы. Например, скрывает рекламу, или же переводит текст. А вот мы создадим расширение на примере hideCommLJ – дополнение, скрывающее комментарии в ЖЖ определенного пользователя. Расширение будет состоять из шести файлов:
  1. jquery.js
  2. offtopchik.png
  3. manifest.json
  4. popup.html
  5. content.js
  6. popup.js
Файл jquery.js – это просто любая версия jQuery. Можно засунуть её в нашу сборку, либо же подтягивать с CDN – как вам удобнее. Я предпочитаю все брать с собой; это иногда не совсем правильно, но не будем развивать тему - наша цель создать простое дополнение. Пока все.

Файл offtopchik.png – это картинка. Надо же нам как-то украсить наше приложение, верно?



Файл манифеста manifest.json

{
  "manifest_version": 2,
  "name": "hideCommLJ",
  "version": "1.0",
  
  "icons": {
    "128": "offtopchik.png"
  },
  "content_scripts": [
    {
      "matches": [ "*://*.livejournal.com/*" ],
      "js": [ "jquery.js", "content.js" ]
    }
  ],
  "permissions": [
    "activeTab",
	"storage"
  ],

      "browser_action": {
        "default_title": "hideCommLJ",
        "default_icon": "offtopchik.png",
        "default_popup": "popup.html"
    }
	
}
Здесь мы описываем наше расширение, задаем разрешения (в частности, разрешение работать с chrome.storage) и указываем имена файлов, которые будут работать с контентом страницы. Да, надо разделять скрипты JS, которые будут иметь дело со страницей и окном расширения.

Файл popup.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>hideCommLJ</title>
<script src="jquery.js"></script>
</head>
<body style="text-align: center;">
<h1>hideCommLJ</h1>
<img src="http://upread.ru/img/offtopchik.png" style="width:60px" alt="" />
</br />
 Пользователь, комментарии, которого скрыты:
 </br />
<div id="data"></div>
</br />
<input type="text" id="text"></input>
<button id="set">Изменить</button>
</br />
Вопросы, жалобы и предложения оставляйте разработчику на сайте
</br />
<a href="//upread.ru/art.php?id=221" target="blank" >upread.ru</a>
<script src="popup.js"></script>
</body>
</html>
Это всплывающее окно дополнения для хрома. Тут просто подключаем скрипты и выводим нужные (и не особо) элементы.

А вот и два последних файла, самых важных. Файл popup.js

document.body.onload = function() {
  chrome.storage.local.get("data", function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      document.getElementById("data").innerText = items.data;
    }
  });
}

document.getElementById("set").onclick = function() {
  var d = document.getElementById("text").value;
  chrome.storage.local.set({ "data" : d }, function() {
    if (chrome.runtime.error) {
      console.log("Runtime error.");
    }
  });
  window.close();
}
Что он делает? Он работает с хранилищем хрома (chrome.storage). После загрузки окна пытаемся извлечь то, что хранится в chrome.storage.local под ключом «data». Если это получается, то выводим его. Вторая функция, напротив, получает текст и после нажатия кнопки пытается занести в хранилище его.

И, наконец, последний файл content.js

var user = [];
window.onload = function () {
chrome.storage.local.get("data", function(items) {
    if (!chrome.runtime.error) {
 user[0] = items.data;
 jQuery('[data-username="'+user[0]+'"]').css('display','none');
    }
  });	
}
Дожидаемся полной загрузки целевой страницы, извлекаем имя пользователя из хранилища, с помощью селекторов jQuery находим все элементы и скрываем их. Вот и все, все файлы собираем в одну папку (можно запаковать в zip, переходим на вкладку chrome://extensions/, включаем режим разработчика и загружаем расширение.



Итог

Вот мы и научились создавать простые дополнения для браузера хром на JavaScript. Если вы знаете этот язык, то с любой страницей можете сделать все, что угодно. Например, был у меня заказ на написание расширения, которое бы обновляло страницу раз в минуту, искало элемент и кликало на него, если он появлялся – автоматический забор заказа, так сказать.

Если вам требуется создать расширения для браузера для любого сайта, то пишите мне – за небольшую плату я вам его сделаю.




тегизаметки, javascript, расширения, Google Chrome

Читайте также:




Людей в куклы, или убийства в Америке времени рабства
Какой язык лучше для разработки игр?


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.