Demogor Nov 14 2014 at 20:49

Простой односторонний универсальный коннектор для Chrome

3 min

7.6K

Мне нравится Netbeans Connector. Удобная штука, знаете ли. Редактируешь css в браузере, а IDE сохраняет и выгружает ее на сервер.
Но вот руки дошли до asp — и вот неожиданность, из вещей подобного плана для студии нашел только LiveStyle. Но чукча не читатель, чукча — писатель, так что возникла идея написать свой велосипед.
В принципе, идея простая: отлавливаем изменения в редактируемом файле, читаем содержимое файла, отсылаем в обработчик, который запишет это содержимое в нужный файл. Вот только облом — на уровне страницы это сделать проблематично(по крайней мере, так и не нашел ни 1 адекватного способа).
Хорошо, лезем курить мануалы по плагинам chrome(именно chrome потому, что мне нравится его консолька. Подозреваю, что любой нормальный браузер, поддерживающий плагины, может делать то же самое). Пара часов, что бы разобраться с нуля — и простенький плагин готов(нужен будет посложнее — база уже есть). Отсылка реализована через post, но способ — на ваше усмотрение(к примеру, NetBeans Connector использует веб-сокеты).

Итак, собственно код.

manifest.json

{
  "name": "UniConvertor",
  "version": "1.0",
  "manifest_version": 2,
  "devtools_page": "devtools.html"
}

devtools_page — страница, через которую подключается скрипт, срабатывающий при открытии консоли.

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 - содержимое измененного файла
});

Собственно, это весь код плагина.

Ну и обработчик на сервере(в примере — asp.net, хотя к языку это никак не привязано):

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;
        }
    }

Собственно, вот и весь код.

Несколько неудобно, что нет обратной связи с IDE — хорошо, если изменения происходят на локальной машине + IDE'шка предупреждает о том, что файл был изменен(к примеру, Visual Studio или Notepad++) — а если нет?
Ну и главное — не забыть отключить этот коннектор в продакшне)

Спасибо за внимание.

Tags:

Hubs: