Рецепт быстрого приготовления расширений под популярные браузеры

    0147 (1)

    Возникла задача написание простенького расширения под все (по возможности) популярные браузеры. Деятельность расширения заключается во внедрении javascript`а в тело документа.

    Доктор прописал инъекции javascript`а


    Казалось бы все просто, выполняем в строке браузера код:

    1. javascript: var s = document.createElement('script');
    2. s.type='text/javascript';
    3. document.body.appendChild(s);
    4. s.src='script.js';
    5. void(0);
    Но что делать если ваш скрипт должен обрабатывать все страницы чужого сайта. Не заставлять же пользователя постоянно click`ать по закладке с кодом инъекции после каждого перехода на новую страницу. Наивные поиски простого решения не увенчались успехом:
    • Это был перехват всех ссылок на страничке и добавление своего кода «javascript:”, разумеется код выполнялся в рамках открытой страницы и потом переходил на новую «чистую” страницу через (location.href).
    • Вариант с setTimeout был вообще в порядке бреда… выполение отваливалось после начала загрузки новой страницы.
    Написание расширений под множество браузеров меня пугала больше всего, но что делать, начал вспоминать наиболее популярные:
    • IE 7+ (на 6-ку решил просто забить, много затрат ради небольшой аудитории пользователей – уж простите меня)
    • Firefox 1.5+
    • Chrome 4+
    • Opera 9+ (в итоге оказалось extension`ы можно писать только под Opera 11)
    • Safari 3+
    «С Firefox и Chrome проблем не должно возникнуть” – подумал я.

    Google Chrome


    За час был написал extension для Chrome – масса документации на официальном сайте, масса примеров. В общем рай для разработчика.

    Примеры и Руководство

    фрагмент из background.html

    1. function onRequest(tabId, changeInfo, tab) {
    2.         if (changeInfo.status == 'complete'){
    3.                 chrome.tabs.executeScript(tabId, { code:"код без javascript:" });
    4.         };
    5. };
    6. chrome.tabs.onUpdated.addListener(onRequest);

    Все получилось просто и со вкусом. Напрямую вставить в тело документа 
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 51

      +1
      В Firefox у меня была трудность с одним плагином для снятия скриншотов, который работал на основе внедрения javascript в страницу. Он блокировался аддоном Noscript. Мне приходилось включать скрипты, чтобы воспользоваться им.
        +2
        Я думал весь код вынести в расширения, но его много, там есть jQuery, плюс кросс-доменные вызовы. Да и под IE писать такой функционал это тяжко, тут точно в 3 дня не уложишься.
          0
          > функциональность

          fixed.
          +3
          Если честно, никогда не понимал веб разработчиков которые блокируют Javascript. Ради чего?
          Ребята, если вам надоедает всплывающая реклама и всякая подобная дребедень поставьте «Adblock»… и вообще, хватит лазить по варезникам.
            +1
            Это больше не из-за рекламы, а из-за всяких уязвимостей — то во флеш-плагине найдут возможность удаленно исполнять код, то в акробате, то еще где… Полностью отключать все плагины не хочется, но и чтоб запускалось автоматически сразу и на любом сайте — тоже не хочется, и дело даже не в варезниках, а просто, мало ли куда приведет ссылочка с того же хабра. И пусть даже сайт будет трижды белый и пушистый, но вот не повезло с хостингом — сломали, или ftp-пароль кто-то увел, вставил на сайте iframe — и привет. Хочется какого-то минимального контроля.

            А так как всех их поименно в AdBlock не занесешь при всем желании, то удобнее просто вырубить скрипты. Разрешить youtube, gmail и парочку других сайтов, а остальные — только вручную, когда реально видишь что яваскрипт нужен. Все-таки не так часто он и нужен.

            И по опыту скажу, что Noscript под виндой — это конечно не панацея, но значительно удобнее и надежнее всяких касперских. Если сам левых екзешников не запускаешь, то 99% оставшихся путей заражения — через бровзер.
              –1
              Я не хочу отходить от темы и холиварить, но я уже более 10 лет пользуюсь компьютером, и мне почему то кажется что у таких товарищей паранойя. Уж поверьте мне, вас никто не хочет хакнуть! Достаточно поставить современную операционную систему, лецензионный антивирус, фаервол в конце концов, для обычного пользователя этого хватит, не запускайте подозрительные приложения и не кликайте по странным ссылкам, в браузерах давно есть режим «инкогнито» в конце концов.
              Если вас захотят хакнуть или украсть у вас информацию целенаправленно, вас noscript не спасёт, вас не спасёт даже третье высшее ITшное образование и работа в отделе «К».
              Я веб девелопер, и трачу на написание Javascript кода целую кучу времени, чтобы людям было удобнее, чтобы использование моих сайтов и приложений приносило людям удовольствие. И я думаю что тот кто выключает скрипты на сайтах просто на просто не уважают мою работу, а ещё хуже если они своей работы не уважают!.. Ведь просидев несколько часов или дней за решением какой нибудь простенькой задачки на JS вы врятли бы стали отключать скрипты в браузере.
                +2
                Ну хочется ему так, чего ты привязался?
                  0
                  Скажи, тебе понятна мотивация людей, отключающих у себя авторан на флешках и сидюках? Ведь создатели CD-визиток тоже небось считают, что кто-то не уважает их работу и далее по тексту. Вот это примерно то же самое. Я не против яваскрипта, я знаю зачем он нужен, я сам веб-разработчик. Просто запускаю его вручную, двумя лишними кликами. Пис!
                +1
                Некоторые сайты со включенным жабаскриптом безбожно тормозят. Например, «Компьютерра Онлайн» этим страдала, по крайней мере до недавнего редизайна.

                На многие сайты я захожу один раз за всю жизнь, и мне нафиг не сдались тамошние динамические приблуды, загружающие лишней работой мой комп. Сочту нужным — включу скрипты.
              +1
              Если вы просто Javascript добавляете на страницу, почему не воспользовались UserJS/Greasemonkey?
                0
                И еще вопрос: не пробовали Mozilla Jetpack?
                  0
                  Старые версии FF не поддерживают Jetpack, а нужно 1.5+ А ставить что-то отдельно вышеописанная проблема сложности
                    +2
                    А разве на столько старыми версиями Фокса не полтора землекопа из тысячи пользуются?
                      –4
                      Чем больше народу — там лучше, у меня например знакомая принципиально сидит на FF2… не спрашивайте почему)
                        +2
                        Пользователей Safari, которых вы вообще обошли стороной, намного больше чем пользователей FF 1.5 поэтому ваш аргумент не совсем понятен и выглядит как попытка оправдать создание какого-то адского велосипеда.

                        С одной стороны «Чем больше народу — там лучше», с другой — «Safari меня огорчил отсутствием бесплатных средств разработки addon`ов, перешел к IE». /0
                          0
                          Ну а пользователей ie6, по идее, больше чем пользователей Safari, FF 1.5, Konqueror и т.п. вместе взятых. + еще и мобильные браузеры имеют место быть.
                            0
                            Под ff1.5 никаких проблем в разработке не существует, поэтому они в списке. Максимально расширить аудиторию — мне кажется ничего плохого в этом нет.
                            Под ie6 реально уйдет время-деньги, чего пока нету. Нет смысле без финансирования охватывать все и вся. Мобильные браузеры в списке присутствуют (iPad, iPhone, Android).
                            +1
                            Пользователей safari действительно много, и с чего вы решили что я их обошел — я так и не понял. Я написал что не нашел быстрого решения, и перешел к след. по списку чтобы не терять время. Человек Tails подсказал как они создаются, и я приступил к разработке…
                    –1
                    Сложность установки главная проблема. Плагин рассчитан на домохозяек, а значит количество действий нужно свести к минимуму, плюс IE и UserJS/Greasemonkey — это как?
                      –1
                      Для Opera Unite есть замечательная вещь UJS Manager, который позволяет установить любой *.js в качестве пользовательского скрипта в два клика. Минус в том, что устанавливать его долго и нудно. Возможно, когда-нибудь подобное появится из коробки и будет просто рай.
                        0
                        Да ладно, сложности установки. Для совсем домохозяек можно написать инсталятор.
                          0
                          Для IE придется писать по-любому, думаю и для Opera напишу авто установку UserJS… оперой много нынче народу пользуется…
                            0
                            Автоустановку можно сделать силами какого-нибудь NSIS, даже ничего писать кроме самого инсталятора не надо будет.
                          –1
                          Для IE есть плагин IE7Pro добовляет потдержку Greasemonkey
                            –1
                            для фф можно скрипты Greasemonkey конвертировать в отдельные расширения.
                          0
                          Чем вас не устроили UserJS для Opera 9,10?
                            0
                            «Плагин рассчитан на домохозяек, а значит количество действий нужно свести к минимуму»
                              0
                              Скачать эксешник, запустить эксешник.
                                –1
                                только думаю потребуются админские права для установки, вот это конечное не айс(
                                  0
                                  Для оперы не потребуются.
                                    0
                                    Спасибо за инфу, дополнил статью.
                          • UFO just landed and posted this here
                              +3
                              Хорошо что я голую женщину не поставил, а так бы, предполагаю, был бы эротический рассказ)
                                0
                                А баночка со спиртом то, кажется пустая уже =)
                                –1
                                Много лет не программировал под Windows, но насколько помню у IE DocumentComplete это не единственное на что нужно подписаться (и кстати само событие complete может быть вызвано еще и по несколько раз, в зависимости от разных условий). Логика определения полной загрузки странички действительно не маленькая, но в итоге очень гибкая.
                                  +2
                                  Да, так и есть, пока это решается в самом плагине проблема двойной загрузки. В разных версиях IE количество «ложных» срабатываний различно и неподдается логике… А как рабочий прототип моя версия работает… разумеется после финансирования все будет допиливаться и фикситься. Но до этого еще работать и работать… Кстати вспомнил забавную вещь — когда окно IE не активно — событие DocumentComplete не срабатывает
                                  0
                                  Safari меня огорчил отсутствием бесплатных средств разработки addon`ов
                                  Xcode бесплатен. Extension Builder, встроенный в Safari, бесплатен.
                                    0
                                    Хм… Интересно, спасибо за информацию, в гугле беглый поиск ничего не дал, а оф. сайт предлагал за 299$ удобную IDE. Разберусь — добавлю в статью.
                                      0
                                      Если вы имеете в виду www.addonbuilder.com/, то это не официальный сайт. Просто чья-то IDE для аддонов.
                                      Только вы выберите, что именно хотите — плагин или расширение. Если плагин — то нужен Xcode, знание Objective-C и это будет инсталлятор. Взамен получаете довольно приличный контроль над браузером. Если расширение — то JS, XML, CSS. Установка будет проще.
                                    0
                                    Оно просто не вызывается при обновлении странички через F5
                                    Для решения проблемы с F5, вешаем hook и по нажатию выполняем код
                                    Рефреш страницы можно вызвать не только с помощью клавиши F5, но так же нажав кнопку «обновить» браузера, так что это решение сработает далеко не всегда
                                      –1
                                      Блин, точно… про эту кнопочку я как-то забыл. А есть ли какое-нибудь решение?
                                      –1
                                      Я, конечно, извиняюсь, но зачем вы мне что-то хотите внедрить в страницу?
                                        0
                                        Любое расширение либо что-то внедряет, либо редактирует страницу средствами api браузера
                                          0
                                          Извиняюсь, не заметил слово «мне», вам лично ничего не хочу, это платный проект в сфере интернет торговли, про который я попозже напишу.
                                          0
                                          Статья прекрасна!

                                          PS: Бутылочки вызывают дрожь и воспоминания о фильме «Морфий»…
                                            +2
                                            Такой нюанс при публикации Google Chrome расширений требуется активировать аккаунт разработчика, что стоит $5. Проблема в том, что у вас скорее всего не получится произвести оплату посредствам российской Visa Classic/Electron или MasterCard карточки в связи с корявостью особенностью работы российских биллинговых систем. Для оплаты подходят специальные «Интернетные» карточки типа Visa E-Card.

                                            Я для себя решил этот вопрос так: завёл виртуальную карточку с номером и пин-кодом на Entropay, пополнил её баланс минимальным платежём в $20, и активировал с помощью неё аккаунт разработчика.
                                              0
                                              Пару месяцев назад оплачивал простой Сбербанковской «визой классик» — никаких проблем не возникло.
                                                0
                                                Пробовал карточки ВТБ24 и Альфабанк — не получилось.
                                                0
                                                эта… Сергей, ты уверен? У меня как-то всё бесплатно!
                                                  0
                                                  Ну конечно уверен. При чём подобная проблема не только у меня была — в инете много дискуссий на эту тему, но решения никто не предлагает, так что мне даже пришлось с гугловой тех. поддержкой переписываться. Сейчас опять таки проверил платность этой услуги для своего второго гуглового аккаунта — так вот: «A one-time developer registration fee of $5.00 is required to verify your account and publish items.» см. прув скрин
                                                    0
                                                    слушай, я как-то сомневаюсь, что являюсь привилегированным пользователем гугла :) Когда я в марте-апреле делал расширения под хром было всё бесплатно.
                                                    Или это имеются ввиду хромос?

                                                    Кстати, свяжись со мной, есть один забавный проект…

                                              Only users with full accounts can post comments. Log in, please.