📜 ⬆️ ⬇️

If you can not leave a comment, but really want, you can

Yes, I faced this problem when I visited the next Landing page, which supposedly sold me a first-class product. But after the courier's visit, you realize that you were bred, and you can’t give any feedback or warn the others. At that moment, the thought of an extension for the browser, which would allow to leave comments, notes, reviews or read someone else’s, directly to the visited site, came to my head.



The name of all this is CommentAll . If it is still interesting - I ask under cat. Even if you are not interested , still look under the cut, it may be too early to draw conclusions, and to leave your angry comment is always welcome.

How it was


I chose just a gift to his wife, stumbled upon a website selling a night projector, projecting a star galaxy on the ceiling. I was shocked - his presentation on the site bought me. Returning to the site after twisting in the hands of what the courier brought and finding no resemblance to what is advertised on the site, I saw only static comments and a form that sends my review to nowhere.
')
It was possible to participate only in a mocking survey, here he is:
• We are delighted, now we sleep like in a fairy tale.
• Original gift, thank you!
• It's great that you work around the clock.
• Be sure to buy!
• Ordered, satisfied, thank you very much

In the end, it hurt all of me, and the goal appeared so easy not to leave it. The idea of ​​the Commentall extension is to provide an opportunity for Internet users to communicate directly on websites, without going anywhere, to warn other network users about the possible placement of dangerous content, sometimes not accurate or even false information, i.e. even where the author himself did not provide for the possibility of commenting or found it superfluous.

Instead of a thousand words about the principle of the expansion itself, I propose to watch a short minute video:



Little about the technical side of the project


The extension is written for WebKit browsers, such as Google Chrome (+ its derivatives Yandeks.Brouser , Amigo , etc.), under Opera a separate release, because Opera has its own extension store, and different from the rest of Firefox , under all The rest is not yet, under IE, I do not even know whether it is worth it.

The main difficulty encountered was that modern browsers do not allow cross-domain queries. And with regard to extensions, most of the methods found on the network, such as JSONP, CORS, did not work or could not be applied. The solution came from the extension itself - in WebKit browsers they consist of the “main” part and the so-called “background”. And it turns out that all requests that pass in the background, the browser skips. It remains to tie all this together. It turns out such a chain:



Those. for all requests, a wrapper was needed as a function that took the request parameters in the background, formed the request itself and at the end called CallBack. I found the only working solution on the Internet - from romannurik and slightly modified it (for processing POST requests).

part of the - Xhrproxy.js
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(); 


An example of a call from the extension itself:
 proxyXHR({ method : 'POST', url : url, params : post_data, onComplete : CommentAll.loadComment }); 


and in the manifest.json file
  "background": { "scripts": ["includes/xhrproxy.js"] } 


If anyone has better solutions, I will be glad to hear, adequate criticism is only welcome. If the topic of developing extensions is interesting, then I will write a sequel.

PS


For the convenience of commenting, social authorization for Vkontakte, Facebook and Twitter has been introduced. But the comment can be left anonymously. Yes, of course, there is also a slight restriction due to the expansion of a small audience so far - comments and notes will be visible only to those who also have an extension. In the future, expansion of the expansion functionality is planned (sorry for the tautology), but in fact other possibilities are already open to it.

Here are just approximate uses:
• When viewing ads (for example, selling a car or an apartment), leaving a note after calling or inspecting the object (or see an existing review)
• When working with two or more people on the same content, editing or discussing it on the spot, so as not to get confused.
• When it is necessary not to advertise the fact of correspondence, while communicating on non-popular sites.
• Use for quests, revelations, and maybe something else.
I just wanted to add that there is no advertising or other monetization in the extension. I almost forgot to warn, a self-written filter of obscene vocabulary works, transforming the mat into synonyms, and sometimes even antonyms.

And only for those who read the article from the very beginning this exceptional survey.

Source: https://habr.com/ru/post/252457/


All Articles