📜 ⬆️ ⬇️

Simple one-sided universal connector for Chrome

I like the Netbeans Connector. Convenient thing, you know. You edit css in the browser, and the IDE saves and uploads it to the server.
But then the hands reached asp - and then a surprise, from the things of such a plan for the studio found only LiveStyle . But the Chukchi is not a reader, the Chukchi is a writer, so the idea arose to write your bicycle.
In principle, the idea is simple: we catch changes in the file being edited, read the contents of the file, send it to the handler, which will write this content to the desired file. That's just a bummer - at the page level it’s problematic to do (at least, I didn’t find one adequate way).
Well, we’ve quit smoking manuals for chrome plugins (it’s chrome because I like its console. I suspect that any normal browser that supports plugins can do the same). A couple of hours to figure out from scratch - and a simple plugin is ready (it will be needed more difficult - the base is already there). The referral is implemented via the post, but the way is up to you (for example, the NetBeans Connector uses web sockets).

So, the actual code.


manifest.json
')
{ "name": "UniConvertor", "version": "1.0", "manifest_version": 2, "devtools_page": "devtools.html" } 


devtools_page - the page through which the script is activated that is triggered when the console is opened.

devtools.html

 <!doctype html> <html> <head> <script src="jquery.js"></script> <script src="test.js"></script> </head> <body> </body> </html> 


test.js

 var log = function(obj) { var str = JSON.stringify( obj ); chrome.devtools.inspectedWindow.eval('console.log(' + str + ');'); } //Listener,      console/sources -  ,       chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) { var s = resource.url.split('/'); var protocol = resource.url.indexOf("https:")!=-1?"https://":"http://"; var url = protocol + (s[2] || s[0]) + "/Updater"; //   ,      -  ... log(url); jQuery.ajax({ type: "POST", url: url, data: {'url':resource.url, 'data':content}, success: function(data) { log(data); } }); //...  . resource.url -    , content -    }); 


Actually, this is all the plugin code.

Well, the handler on the server (in the example, asp.net, although this is not tied to the language):

UpdaterController.cs

  public class UpdaterController : Controller { // // GET: /Updater/ public ActionResult Index() { return null; //View  ,   } [HttpPost] public ActionResult Index(string url, string data) { var path = url.Replace(Request.Url.GetLeftPart(UriPartial.Authority), ""); //  path = Server.MapPath(path); //     var exists = System.IO.File.Exists(path); if(exists) //,    System.IO.File.WriteAllText(path, data); //?  -  . return null; } } 


Actually, that's all the code.

It is somewhat inconvenient that there is no feedback from the IDE - it’s good if the changes occur on the local machine + IDE’s warn that the file has been changed (for example, Visual Studio or Notepad ++) and if not?
Well and the main thing - do not forget to disconnect this connector in production)

Thanks for attention.

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


All Articles