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

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Привет.

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

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

Этап первый.

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

Нам понадобится так же создать еще одну папку внутри,назовем ее 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. для мозиллы тоже планируется.
 

Вложения

Последнее редактирование:

akok

Команда форума
Администратор
Сообщения
19,056
Реакции
13,202
Баллы
2,203
Кнопка поиск еще не работает?
 

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Кнопка поиск работает пока что из контексного меню,времннное решение-новое окно,сейчас задача симитировать нажатие кнопки,пока не знаю возможно ли это на 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 этот текст копируем и вставляем в форму поиска которую откроем в новой вкладке.
Затем имитация нажатия кнопки найти.

Что скажете?

+ нужно ли добавить какой то функционал,например букмарклеты?
 
Последнее редактирование модератором:

FraidZZ

Активный пользователь
Сообщения
16
Реакции
18
Баллы
233
Koza Nozdri написал(а):
мы в js этот текст копируем и вставляем в форму поиска которую откроем в новой вкладке.
Затем имитация нажатия кнопки найти.
Можно поступить несколько изящнее - создать свою форму с необходимыми параметрами через JS, выставить target=' _blank' и сделать submit();
 

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Я так и сделал изначально,но почему то когда я вызываю страницу с таким содержимым:
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...
с необходимыми параметрами через JS, выставить target=' _blank' и сделать submit();
Может я не так понял?
 
Последнее редактирование:

FraidZZ

Активный пользователь
Сообщения
16
Реакции
18
Баллы
233
Я имел в виду не пользовательский поиск гугла, а встроенный поиск по форуму через POST-запрос.
 

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Я не смог так сделать потому что форумный поиск не принимает post к строке...в этом и причина того что сделал гугловский поиск.
 

FraidZZ

Активный пользователь
Сообщения
16
Реакции
18
Баллы
233
Принимает)
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'));
 
Последнее редактирование модератором:

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Страшно спросить как это было вычислено!
Я так поимаю мне остается добавить +select text и отправлять в запрос?
 

FraidZZ

Активный пользователь
Сообщения
16
Реакции
18
Баллы
233
Не совсем . Свой текст надо добавлять после 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 - исправил очепятку :)
 
Последнее редактирование модератором:

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Прямо реальное вам спасибо,дорогой FraidZZ, теперь большая проблема решена)))

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

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Что то не так:

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?
 
  • Like
Реакции: akok

FraidZZ

Активный пользователь
Сообщения
16
Реакции
18
Баллы
233
Koza Nozdri, не 'keywords' , а 'keywords=' ;
А вот насчёт страницы не знаю, что там позволяет API.
 

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
FraidZZ, спасибо)
В общем примочки от google слишком привередливые,то же самое прикрутил от яндекса - работает и поисковое поле,и фоновый скрипт и все остальное.
Н яндексе думаю и остановлюсь пока.
 

soy

Активный пользователь
Сообщения
5
Реакции
4
Баллы
83
помогите написать плагин для chrome движка, который "вытаскивает" URL вкладки (страницы) и записывает их в текстовый файл
 

Dragokas

Very kind Developer
Команда форума
Супер-Модератор
Разработчик
Клуб переводчиков
Сообщения
6,320
Реакции
5,788
Баллы
718
soy, что за интересненькое дополнение разрабатываете? :)
 

Dragokas

Very kind Developer
Команда форума
Супер-Модератор
Разработчик
Клуб переводчиков
Сообщения
6,320
Реакции
5,788
Баллы
718
Koza Nozdri, а в каком редакторе пишешь эту разработку?
 

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Notepad++
Все никак до лисы и оперы не доберусь.
+ так и не придумал как сделать что бы уведомления отображались в режиме реального времени.
 

regist

гоняюсь за туманом
Ассоциация VN/VIP
VIP
Разработчик
Сообщения
12,613
Реакции
5,872
Баллы
1,008
и оперы не доберусь.
в Опере поиск добавляется намного проще. Вот на примере поиска по вирустотал описывал здесь http://safezone.cc/threads/dobavlenie-v-opera-presto-poiska-po-nuzhnomu-sajtu.22911/
Порой тоже задумывался о том, что добавить поиск по Хромо расширениям, но всё лень. Не так часто нужно и не все есть в магазине.
 

Кирилл

Команда форума
Администратор
Сообщения
14,056
Реакции
6,109
Баллы
993
Не так часто нужно и не все есть в магазине.
Ну лично мне нравится))
Три поисковика + маркет вполне конкретно ищется.
Когда то над белым списком думал но отказался от идей - так как id пересекаются и не вечные.
Завтра может как раз и дойдет до того,после учбеы.
 
Сверху Снизу