Да, именно с такой проблемой я столкнулся при посещении очередной Landing page, продавшей мне якобы первоклассный товар. Но после визита курьера понимаешь, что тебя развели, а оставить отзыв или еще как-либо предупредить остальных ты не в силах. В этот момент в голову и пришла мысль о расширении для браузера, которое позволило бы оставлять комментарии, заметки, отзывы или читать чужие, прямо на посещаемом сайте.
Имя всему этому CommentAll. Если еще интересно — прошу под кат. Даже если не интересно, все равно загляните под кат, может быть, ещё рано делать выводы, а оставить свой гневный комментарий — это всегда пожалуйста.
Как все было
Выбирал я как раз подарок супруге, наткнувшись на сайт, продающий ночной проектор, проецирующий на потолок звездную галактику. Я был в шоке — его презентация на сайте купила меня. Вернувшись на сайт после того, как покрутил в руках то, что привез курьер и не найдя сходства с тем, что рекламировано на сайте, я увидел только статичные комментарии и форму, которая отправляет мой отзыв в никуда.
Поучаствовать можно было лишь в издевательском опросе, вот и он:
• Мы в восторге, теперь спим как в сказке
• Оригинальный подарок, спасибо!
• Отлично, что работаете круглосуточно
• Обязательно куплю!
• Заказывал, остались довольны, спасибо огромное
В итоге задело это все меня, и появилась цель так просто это не оставить. Задумка расширения Commentall — это предоставить возможность интернет-аудитории общаться напрямую на сайтах, никуда не переходя, предупредить других пользователей сети о возможном размещении опасного контента, порой не точной или даже лживой информации, т.е. даже там, где сам автор не предусмотрел возможность комментирования или счел это лишним.
Вместо тысячи слов о принципе работы самого расширения предлагаю посмотреть короткое минутное видео:
Немного о технической стороне проекта
Расширение написано под браузеры на движке WebKit, такие как Google Chrome( + его производные Яндекс.Браузер, Амиго, и т.д.), под Opera отдельный релиз, так как у Opera свой магазин расширений, и отличный от остальных Firefox, под все остальное пока нет, под IE даже не знаю стоит ли.
Главная трудность, с которой пришлось столкнуться – современные браузеры не позволяют делать кроссдоменные запросы. Причем применительно для расширений большинство найденных в сети методов, таких как JSONP, CORS не действовали или не могли быть применены. Решение пришло от самого расширения – в браузерах на WebKit они состоят из «основной» части и так называемого «background’a». И получается, что все запросы, которые проходят в background’е – браузер пропускает. Осталось связать все это вместе. Выходит такая цепочка:
Т.е. для всех запросов нужна была обертка в виде функции, которая принимала параметры запроса в background’e, формировала сам запрос и по завершении вызывала CallBack. В интернете нашел единственное рабочее решение – от romannurik и немного доработал его (для обработки POST запросов).
var XHR_PROXY_PORT_NAME_ = 'XHRProxy_'; function setupXHRProxy() { chrome.extension.onConnect.addListener(function(port) { if (port.name != XHR_PROXY_PORT_NAME_) return; port.onMessage.addListener(function(xhrOptions) { var xhr = new XMLHttpRequest(); xhr.open(xhrOptions.method || "GET", xhrOptions.url, true); if ( xhrOptions.method=='POST' ) { xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.setRequestHeader("Content-length", xhrOptions.params.length); xhr.setRequestHeader("Connection", "close"); } xhr.onreadystatechange = function() { if (this.readyState == 4) { port.postMessage({ status: this.status, data: this.responseText, xhr: xhr, url: xhrOptions.url, post_data:xhrOptions.params }); } } if ( xhrOptions.method=='POST' ) { xhr.send(xhrOptions.params); }else{ xhr.send(); } }); }); } function proxyXHR(xhrOptions) { xhrOptions = xhrOptions || {}; xhrOptions.onComplete = xhrOptions.onComplete || function(){}; var port = chrome.extension.connect({name: XHR_PROXY_PORT_NAME_}); port.onMessage.addListener(function(msg) { xhrOptions.onComplete(msg.status, msg.data, msg.xhr, msg.url, msg.post_data); }); port.postMessage(xhrOptions); } setupXHRProxy();
proxyXHR({ method : 'POST', url : url, params : post_data, onComplete : CommentAll.loadComment });
"background": { "scripts": ["includes/xhrproxy.js"] }
Если у кого есть решения лучше – буду рад выслушать, адекватная критика только приветствуется. Если тема разработки расширений интересна, то буду писать продолжение.
P.S.
Для удобства комментирования внедрена социальная авторизация для Вконтакта, Facebook’а и Twitter’а. Но комментарий можно оставить и анонимно. Да, есть конечно и небольшое ограничение обусловленное пока малой аудиторией расширения – комментарии и заметки будут видны только тем, у кого тоже стоит расширение. В дальнейшем, планируется расширение функционала расширения (простите за тавтологию), но на самом деле перед ним уже сейчас открыты и другие возможности.
Вот только примерные варианты применения:
• При просмотре объявлений (например, продажи автомобиля или квартиры), оставляя заметку после звонка или осмотра объекта (или увидеть уже существующий отзыв)
• При работе двух и более лиц над одним контентом, редактируя или обсуждая его на месте, чтобы не запутаться.
• Когда необходимо не афишировать сам факт переписки, общаясь при этом на не популярных сайтах.
• Использовать для квестов, разоблачений и может быть чего еще.
Добавить хотелось только то, что в расширении нет ни рекламы, ни другой монетизации. Чуть не забыл предупредить, работает самописный фильтр нецензурной лексики, преобразующий мат в синонимы, а иногда даже и в антонимы.
И исключительно для тех, кто читал статью с самого начала этот исключительный опрос.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
ссылка на оригинал статьи http://habrahabr.ru/post/252457/
Добавить комментарий