Пишем плагин для Chrome

Кирилл

Кирилл

Команда форума
Администратор
Ассоциация VN
Сообщения
14,076
Реакции
5,783
Привет.

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

Напишем плагин для нашего любимого сайта.

Этап первый.

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

Нам понадобится так же создать еще одну папку внутри,назовем ее Icon,как вы понимаете из названия эта папка будет содержать в себе разного рода изображения которые мы будем использовать.

Так же нам понадобится создать несколько файлов:

  • manifest.json
  • popup.html
  • background.html
  • code.js
Для чего они нужны и как и использовать сейчас расскажу.
Для работы с файлами понадобится текстовый редактор,лично я использую notepad++

Итак,открываем файл manifest.json.
Это файл манифеста,основа нашего плагина.
От него как корни будут писаться остальные части.

Вбиваем туда код:
JavaScript: 
{
  "manifest_version": 2, // версия манифеста,обязательная строка
  "name": "SafeZone плагин",  //Имя продукта - нашего плагина
  "version": "0.1",  //Версия продукта
  "description": "Плагин разрабатывается для sz",  //Описание нашей разработки
"icons" :  {
          "16" :  "icon/16.png",
          "48" :  "icon/48.png",
          "128" :  "icon/128.png"
        }, // Тут,соответственно мы указываем путь и имя картинок.

  "browser_action": {
    "default_title": "SafeZone plugins",  // Заголовок. Его видно если навести курсор на иконку в браузере
           "default_popup": "popup.html",  // Путь к странице с popup.html - страничке которая будет
// появляться при нажатии на иконку плагина в адресной строке
           "default_icon": "icon/48.png"  // Путь к иконке расширения в адресной строке

},
"permissions": [          // настройки разрешений
      "tabs" ,  // работает в каждой открытой вкладке
      "bookmarks" ,
      "http://www.safezone.cc/" ,
      "http://*.google.com/" , //список адресов,к которым можно будет обращаться
      "unlimitedStorage", //Снимаем ограничение наобъем кэшированных данных для сайтов  5 МБ.
      "http://*",
      "http://*/*",
      "https://*",
      "https://*/*",
      "contextMenus", //подключаем контексное меню
      "notifications"   //подключаем уведомления
],

"background": {
    "page": "background.html"  //указываем имя и адрес страницы,выполняемой в фоновом режиме (невидимая)
  },
"content_security_policy": "default-src 'self'"
}

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

popup.html - это обычная html страничка,которая будет появляться при нажатии на иконку плагина рядом с адресной строкой браузера.

upload_2014-9-13_22-11-52.png


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

В нашем случае код ее будет таков:

HTML: 
<!DOCTYPE html>
<html lang="ru">
    <head>
    <meta charset="utf-8">
    </head>
    <title>SafeZone плагин</title>

<body style='margin: 0 auto; width: 100%;'>

    <div>
    <button><a href="http://www.safezone.cc" target="_blank"><img src="icon/1.png" alt="SafeZone"  width="100%" height="10%"
          style="vertical-align: middle">  </a></button></p>
      
    <div/>


<HR WIDTH="90%" ALIGN="center" SIZE="0">

<li><a href="http://safezone.cc/account/alerts" target="_blank">Оповещения
</strong></a></li>
<li><a href="http://safezone.cc/account/" target="_blank">Профиль
</strong></a></li>
<li><a href="http://safezone.cc/conversations/" target="_blank">Личные сообщения
</strong></a></li>
<li><a href="https://www.facebook.com/safezonecc" target="_blank">SafeZone на FaseBook
</strong></a></li>

<HR WIDTH="90%" ALIGN="center" SIZE="2">

<div>
  <input type="checkbox" id="index1" checked="checked" />
  <input type="text" id="index1" class="input_date" value="" />
  Поиск


</div>

<HR WIDTH="320px" ALIGN="center" SIZE="0">
</body>
</html>

Думаю комментировать код html не буду,так как все легко находится в поисковиках.
Более того наверняка каждый захочет сам под себя ее изменить.

Но если таки будут вопросы - задавайте.

Далее background.html.

Это фоновая страница,которая выполняется при загрузке браузера,код ее у нас таков:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="code.js"></script>
    
    </head>
    <body></body>
</html>

Здесь мы указали js скрипт,который будет выполняться при загрузке background.html

Это файл code.js

Его содержимое таково:


JavaScript: 
// Общая функция OnClick обратного вызова.
function genericOnClick(info, tab) {
  console.log("item " + info.menuItemId + " was clicked");
  console.log("info: " + JSON.stringify(info));
  console.log("tab: " + JSON.stringify(tab));
}

// Создаем пункт меню перехода на sz
var contexts = ["page","selection"];
for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "Перейти на SafeZone.cc";
  var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                       "onclick": opensz});

}

//////////////////////////////////////////////////////////////////////////////////

// Создаем действие с меню для определенных типов файлов
//var contexts = ["page","selection","link","editable","image","video",
           //     "audio"];
//for (var i = 0; i < contexts.length; i++) {
  //var context = contexts[i];
  //var title = "Действие для'" + context + "'которое возможно";
// var id = chrome.contextMenus.create({"title": title, "contexts":[context],
   //                                    "onclick": genericOnClick});
// console.log("'" + context + "' item:" + id);
//}


// Создаем раскрывающееся контексное меню.
var parent = chrome.contextMenus.create({"title": "Поиск:"});
var child1 = chrome.contextMenus.create(
  //{"title": "Перейти на SafeZone.cc", "parentId": parent, "onclick": Menu1});
//var child2 = chrome.contextMenus.create(
  {"title": "Открыть поиск по SafeZone", "parentId": parent, "onclick": Menu2});
var child3 = chrome.contextMenus.create(
  {"title": "Открыть поиск по Yandex", "parentId": parent, "onclick": Menu3});
var child4 = chrome.contextMenus.create(
  {"title": "Открыть поиск по Google", "parentId": parent, "onclick": Menu4});


function opensz(info, tab) {
window.open('http://safezone.cc/');
};

function Menu1(info, tab) {
window.open('http://safezone.cc/');
};

function Menu2(info, tab) {

window.open('https://www.google.com:443/cse/publicurl?cx=011665641833326316287:1ay2gmqz5qu','info','height=520,width=520');
};

function Menu3(info, tab) {

window.open('http://www.ya.ru/','info','height=520,width=520');
};

function Menu4(info, tab) {

window.open('https://www.google.com/search','info','height=520,width=520');
};




console.log("About to try creating an invalid item - an error about " +
            "item 999 should show up");
chrome.contextMenus.create({"title": "Oops", "parentId":999}, function() {
  if (chrome.extension.lastError) {
    console.log("Got expected error: " + chrome.extension.lastError.message);
  }
});


Тут мы подключим контексное меню,другие опции...

Безымянный.png



Этап второй

Открываем браузер (Google Chrome или любой на его базе),заходим в настройки - расширения.
upload_2014-9-13_22-31-49.png


upload_2014-9-13_22-32-33.png


Ставим галочку "Режим разработчика"

upload_2014-9-13_22-33-20.png


Далее жмем "Загрузить распакованное расширение" ,указываем путь к папке с плагином.
upload_2014-9-13_22-34-47.png


Жмем ОК и готово.

Если это в первый раз - то будет создан ключ.

============================================

Вот весь исходник целиком:

sz_code.rar

А вот уже скомпиллированный плагин:


sz.rar

Его можно просто распаковать и перетащить мышкой в окно настроек браузера,плагин установится.

Появится в панели браузера,в расширениях,соответственно станут доступны опции плагина - как в панели рядом с адресной строкой,так и в контексном меню браузера.

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

p.s. для мозиллы тоже планируется.
 

Вложения

  • sz_code.rar
    77.4 KB · Просмотры: 75
  • sz.rar
    52 KB · Просмотры: 30
Последнее редактирование:
Кнопка поиск работает пока что из контексного меню,времннное решение-новое окно,сейчас задача симитировать нажатие кнопки,пока не знаю возможно ли это на js.
это наверное и будет первой просьбой к нашим программерам))

Сама суть:
Popup окно,как и фоновое не может обработать скрипт поисковой строки sz:
JavaScript: 
<script>
  (function() {
    var cx = '011665641833326316287:1ay2gmqz5qu';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

То есть вместо пользовательского поиска ничего не показывается.

Проблема так же в том,что форумный поиск не поддерживает поисковой запрос в адресной строке:
такая схема не прокатит
Код: 
http://safezone.cc/search/ + текст

Единственное что приходит на ум это либо всплывающее окно поиска как из контексного меню браузера,либо так:
пользователь вводит в форму текст (либо попадает выделенный) ,нажимает поиск.
мы в js этот текст копируем и вставляем в форму поиска которую откроем в новой вкладке.
Затем имитация нажатия кнопки найти.

Что скажете?

+ нужно ли добавить какой то функционал,например букмарклеты?
 
Последнее редактирование модератором:
Koza Nozdri написал(а):
мы в js этот текст копируем и вставляем в форму поиска которую откроем в новой вкладке.
Затем имитация нажатия кнопки найти.
Нажмите для раскрытия...

Можно поступить несколько изящнее - создать свою форму с необходимыми параметрами через JS, выставить target=' _blank' и сделать submit();
 
Я так и сделал изначально,но почему то когда я вызываю страницу с таким содержимым:
HTML: 
<!DOCTYPE html>
<html lang="ru">
    <head>
    <meta charset="utf-8">
    </head>
    <title>поиск</title>
 
<body>

    <div>  
  
<script>
  (function() {
    var cx = '011665641833326316287:1ay2gmqz5qu';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>






</div>

<HR WIDTH="320px" ALIGN="center" SIZE="0">
</body>  
</html>

То при вызове страницы через плагин поисковик не отображается,а если запустить как обычно через браузер то работает.
Какие то ограничения.
Даже кнопки js не работают из popup...
FraidZZ написал(а):
с необходимыми параметрами через JS, выставить target=' _blank' и сделать submit();
Нажмите для раскрытия...
Может я не так понял?
 
Последнее редактирование:
Я не смог так сделать потому что форумный поиск не принимает post к строке...в этом и причина того что сделал гугловский поиск.
 
Принимает)
JavaScript: 
var xhr = new XMLHttpRequest();
xhr.open('POST', '/search/search', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.onload = (function (){
   if (JSON.parse(this.responseText)._redirectTarget)
      window.location.href = JSON.parse(this.responseText)._redirectTarget;
}).bind(xhr);

xhr.send(encodeURI('keywords=Пишем плагин&users=&date=&reply_count=0&prefixes[]=&nodes[]=&child_nodes=1&order=date&type=post&_xfToken=' + XenForo._csrfToken + '&_xfRequestUri=/search/?type=post&_xfNoRedirect=1&_xfToken=' + XenForo._csrfToken + '&_xfResponseType=json'));
 
Последнее редактирование модератором:
Страшно спросить как это было вычислено!
Я так поимаю мне остается добавить +select text и отправлять в запрос?
 
Не совсем . Свой текст надо добавлять после keywords, при этом закодировав. UPD - не надо кодирования. Т.е:
JavaScript: 
var xhr = new XMLHttpRequest();
xhr.open('POST', '/search/search', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.onload = (function (){
   if (JSON.parse(this.responseText)._redirectTarget)
      window.location.href = JSON.parse(this.responseText)._redirectTarget;
}).bind(xhr);

xhr.send(encodeURI('keywords=' + selectText + '&users=&date=&reply_count=0&prefixes[]=&nodes[]=&child_nodes=1&order=date&type=post&_xfToken=' + XenForo._csrfToken + '&_xfRequestUri=/search/?type=post&_xfNoRedirect=1&_xfToken=' + XenForo._csrfToken + '&_xfResponseType=json'));
А вычислено это было встроенным оперовским дебагером с возможностью прослушки сети :)UPD - исправил очепятку :)
 
Последнее редактирование модератором:
Прямо реальное вам спасибо,дорогой FraidZZ, теперь большая проблема решена)))

Я тогда немного приборзею и спрошу: а уведомления таким же образом вычислить возможно?
 
Что то не так:

HTML: 
<!DOCTYPE html>
<html lang="ru">
    <head>
    <meta charset="utf-8">
    </head>
    <title>поиск</title>
<body>

    <div> 
 
<script>
  (function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/search/search', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.onload = (function (){
   if (JSON.parse(this.responseText)._redirectTarget)
      window.location.href = JSON.parse(this.responseText)._redirectTarget;
}).bind(xhr);

xhr.send(encodeURI('keywords' + 'Пишем плагин' +&users=&date=&reply_count=0&prefixes[]=&nodes[]=&child_nodes=1&order=date&type=post&_xfToken=' + XenForo._csrfToken + '&_xfRequestUri=/search/?type=post&_xfNoRedirect=1&_xfToken=' + XenForo._csrfToken + '&_xfResponseType=json'));
</script>







</div>

<HR WIDTH="320px" ALIGN="center" SIZE="0">
</body> 
</html>

Ни поиска ни результатов.
Запрос должен уходить со страницы sz?
 
FraidZZ, спасибо)
В общем примочки от google слишком привередливые,то же самое прикрутил от яндекса - работает и поисковое поле,и фоновый скрипт и все остальное.
Н яндексе думаю и остановлюсь пока.
 
помогите написать плагин для chrome движка, который "вытаскивает" URL вкладки (страницы) и записывает их в текстовый файл
 
Notepad++
Все никак до лисы и оперы не доберусь.
+ так и не придумал как сделать что бы уведомления отображались в режиме реального времени.
 
Koza Nozdri написал(а):
и оперы не доберусь.
Нажмите для раскрытия...
в Опере поиск добавляется намного проще. Вот на примере поиска по вирустотал описывал здесь https://safezone.cc/threads/dobavlenie-v-opera-presto-poiska-po-nuzhnomu-sajtu.22911/
Порой тоже задумывался о том, что добавить поиск по Хромо расширениям, но всё лень. Не так часто нужно и не все есть в магазине.
 
regist написал(а):
Не так часто нужно и не все есть в магазине.
Нажмите для раскрытия...
Ну лично мне нравится))
Три поисковика + маркет вполне конкретно ищется.
Когда то над белым списком думал но отказался от идей - так как id пересекаются и не вечные.
Завтра может как раз и дойдет до того,после учбеы.
 

Похожие темы

  • Подмена указателя на структуру
  • Подмена указателя на данные переменной
  • VBS Открыть путь в regedit.exe из буфера обмена
  • Изучение Visual Basic 6 для заявки на работу
  • [VBS] Скрипт с MsAgent
    • Назад
    Сверху Снизу