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

Мені подобається 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++) — а якщо ні?
Ну і головне — не забути вимкнути цей конектор в продакшне)

Дякую за увагу.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.