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

Тема в разделе "Visual Basic 6 / Сценарии VBScript, JScript", создана пользователем Kиpилл, 13 сен 2014.

  1. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Привет.

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

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

    Этап первый.

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

    Нам понадобится так же создать еще одну папку внутри,назовем ее 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 КБ
      Просмотров:
      29
    • sz.rar
      Размер файла:
      52 КБ
      Просмотров:
      13
    Последнее редактирование: 13 сен 2014
    machito, Arbitr, Drongo и 4 другим нравится это.
  2. akok
    Оффлайн

    akok Команда форума Администратор

    Сообщения:
    12.453
    Симпатии:
    13.952
    Кнопка поиск еще не работает?
     
  3. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Кнопка поиск работает пока что из контексного меню,времннное решение-новое окно,сейчас задача симитировать нажатие кнопки,пока не знаю возможно ли это на 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>
    То есть вместо пользовательского поиска ничего не показывается.

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

    Что скажете?

    + нужно ли добавить какой то функционал,например букмарклеты?
     
    Последнее редактирование модератором: 14 ноя 2015
    machito нравится это.
  4. FraidZZ
    Оффлайн

    FraidZZ Новый пользователь

    Сообщения:
    16
    Симпатии:
    18
    Можно поступить несколько изящнее - создать свою форму с необходимыми параметрами через JS, выставить target=' _blank' и сделать submit();
     
    Dragokas и Kиpилл нравится это.
  5. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Я так и сделал изначально,но почему то когда я вызываю страницу с таким содержимым:
    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...
    --- Объединённое сообщение, 14 сен 2014 ---
    Может я не так понял?
     
    Последнее редактирование: 14 сен 2014
  6. FraidZZ
    Оффлайн

    FraidZZ Новый пользователь

    Сообщения:
    16
    Симпатии:
    18
    Я имел в виду не пользовательский поиск гугла, а встроенный поиск по форуму через POST-запрос.
     
  7. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Я не смог так сделать потому что форумный поиск не принимает post к строке...в этом и причина того что сделал гугловский поиск.
     
  8. FraidZZ
    Оффлайн

    FraidZZ Новый пользователь

    Сообщения:
    16
    Симпатии:
    18
    Принимает)
    Код (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 ноя 2015
    Kиpилл нравится это.
  9. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Страшно спросить как это было вычислено!
    Я так поимаю мне остается добавить +select text и отправлять в запрос?
     
  10. FraidZZ
    Оффлайн

    FraidZZ Новый пользователь

    Сообщения:
    16
    Симпатии:
    18
    Не совсем . Свой текст надо добавлять после 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'));
    --- Объединённое сообщение, 14 сен 2014 ---
    А вычислено это было встроенным оперовским дебагером с возможностью прослушки сети :)
    --- Объединённое сообщение, 14 сен 2014, Дата первоначального сообщения: 14 сен 2014 ---
    UPD - исправил очепятку :)
     
    Последнее редактирование модератором: 14 ноя 2015
    Kиpилл и Dragokas нравится это.
  11. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Прямо реальное вам спасибо,дорогой FraidZZ, теперь большая проблема решена)))

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

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Что то не так:

    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?
     
    akok нравится это.
  13. FraidZZ
    Оффлайн

    FraidZZ Новый пользователь

    Сообщения:
    16
    Симпатии:
    18
    Koza Nozdri, не 'keywords' , а 'keywords=' ;
    А вот насчёт страницы не знаю, что там позволяет API.
     
    Kиpилл нравится это.
  14. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    FraidZZ, спасибо)
    В общем примочки от google слишком привередливые,то же самое прикрутил от яндекса - работает и поисковое поле,и фоновый скрипт и все остальное.
    Н яндексе думаю и остановлюсь пока.
     
  15. soy
    Оффлайн

    soy Новый пользователь

    Сообщения:
    5
    Симпатии:
    4
    помогите написать плагин для chrome движка, который "вытаскивает" URL вкладки (страницы) и записывает их в текстовый файл
     
  16. Dragokas
    Оффлайн

    Dragokas Very kind Developer Команда форума Супер-Модератор Разработчик Клуб переводчиков

    Сообщения:
    4.492
    Симпатии:
    4.308
    soy, что за интересненькое дополнение разрабатываете? :)
     
    Kиpилл нравится это.
  17. Dragokas
    Оффлайн

    Dragokas Very kind Developer Команда форума Супер-Модератор Разработчик Клуб переводчиков

    Сообщения:
    4.492
    Симпатии:
    4.308
    Koza Nozdri, а в каком редакторе пишешь эту разработку?
     
  18. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Notepad++
    Все никак до лисы и оперы не доберусь.
    --- Объединённое сообщение, 15 апр 2016 ---
    + так и не придумал как сделать что бы уведомления отображались в режиме реального времени.
     
  19. regist
    Оффлайн

    regist гоняюсь за туманом Ассоциация VN/VIP VIP Разработчик

    Сообщения:
    11.382
    Симпатии:
    5.268
    в Опере поиск добавляется намного проще. Вот на примере поиска по вирустотал описывал здесь http://safezone.cc/threads/dobavlenie-v-opera-presto-poiska-po-nuzhnomu-sajtu.22911/
    Порой тоже задумывался о том, что добавить поиск по Хромо расширениям, но всё лень. Не так часто нужно и не все есть в магазине.
     
    Kиpилл нравится это.
  20. Kиpилл
    Оффлайн

    Kиpилл Команда форума Администратор

    Лучший автор месяца

    Сообщения:
    12.224
    Симпатии:
    4.979
    Ну лично мне нравится))
    Три поисковика + маркет вполне конкретно ищется.
    Когда то над белым списком думал но отказался от идей - так как id пересекаются и не вечные.
    --- Объединённое сообщение, 15 апр 2016 ---
    Завтра может как раз и дойдет до того,после учбеы.
     

Поделиться этой страницей