Convenient CSS editing (Chrome + Save CSS + autoIt)
Many people know that Chrome Development Tools has a built-in CSS editor that displays changes instantly. The only problem is the lack of convenient automatic saving of changes.
To solve the autosave task, there are three extensions for Chrome: DevTools Autosave , Tincr, and Save CSS . Since working with files on the disk with extensions is impossible, they all intercept the CSS change event, and the text of the modified file (or just a fragment in the case of DevTools autosave) is sent by a request to localhost, on which the server program already saves directly to the file.
The above extensions to save to a file using scripts in Python, Node.js or Ruby. As a PHP programmer not connected with these languages, I just wanted a simple One-click solution for Windows, without having to install any servers that I do not need in my work.
Therefore, I decided to write a simple utility for Windows that solves this problem.
The AutoIt scripting language was chosen as the easiest way to get results quickly.
')
Captain Paranoia suggests that instead of the third paragraph, you can do the following:
If there are comments or vendor prefixes in the CSS file, they will also be saved.
Update 02/16/2013:
Fixed a bug due to an unclosed socket. Now the server is working correctly.
The script above and the exe file by reference updated.
Update 18/04/2013:
Fixed a bug where CSS was saved along with the http header.
The script above and the exe file by reference updated.
The first photo by Exey Panteleev
Text and screenshots of the “Use” section are taken from the author's site Save CSS
To solve the autosave task, there are three extensions for Chrome: DevTools Autosave , Tincr, and Save CSS . Since working with files on the disk with extensions is impossible, they all intercept the CSS change event, and the text of the modified file (or just a fragment in the case of DevTools autosave) is sent by a request to localhost, on which the server program already saves directly to the file.
The above extensions to save to a file using scripts in Python, Node.js or Ruby. As a PHP programmer not connected with these languages, I just wanted a simple One-click solution for Windows, without having to install any servers that I do not need in my work.
Therefore, I decided to write a simple utility for Windows that solves this problem.
The AutoIt scripting language was chosen as the easiest way to get results quickly.
')
Script text (Updated April 18, 2013)
#cs # save-css-server.au3: receive CSS and JS files from Chrome extension # and save files locally # # Author: Ilya Zenin # Based on AutoIt HTTP Server by Manadar # 18.01.2013 - Created # 16.02.2013 - Updated # 18.04.2013 - Updated #ce Local $sIP = "127.0.0.1"; ip address Local $iPort = 8080 ; the listening port Local $sBuffer = ""; Local $aSavedFilepaths = ""; needed to show tray tip only once per file Local $iStartTime = TimerInit() TCPStartup() $iMainSocket = TCPListen($sIP, $iPort, 10) If @error Then MsgBox(0x20, "Save CSS server", "Unable to create a socket on port " & $iPort & ".") Exit EndIf ConsoleWrite("Save CSS server running at port " & $iPort & "..."& @CRLF) TrayTip("Save CSS server", "Save CSS server running at port " & $iPort & "...", 0, 0) While True $iSock = TCPAccept($iMainSocket) ;Check for new connections If TimerDiff($iStartTime) > 250 Then ;reset tray icon to standart TraySetIcon() EndIf sleep(10) If $iSock = -1 Then ContinueLoop If _TCP_Server_ClientIP($iSock) <> "127.0.0.1" Then ConsoleWrite("External connection! Disconnect." & @CRLF) TCPCloseSocket($iSock) ; Kill any not local connections ContinueLoop EndIf ConsoleWrite("A new client has connected!" & @CRLF) $sBuffer = "" $break = false; Do $sRecv = TCPRecv($iSock, 2048) If $sRecv Then $sBuffer &= $sRecv $receivedLength = StringLen($sRecv); $bufferLength = StringLen($sBuffer); $headerLength = StringInStr($sBuffer, @CRLF&@CRLF) + 3 $array = StringRegExp($sBuffer, 'Content-Length: (.*)', 2) $contentLength = StringStripCR($array[1]) If ($contentLength + $headerLength == $bufferLength) Then $break = True EndIf EndIf Until $break ConsoleWrite("READY!" & @CRLF) $array = StringRegExp($sBuffer, 'X-origurl: (.*)', 2) $xOrigurl = StringStripCR($array[1]); $array = StringRegExp($sBuffer, 'X-filepath: (.*)', 2) $xFilepath = urldecode(StringStripCR($array[1])); $body = StringTrimLeft($sBuffer, $headerLength) ConsoleWrite("Saving file " & $xFilepath) Local $file = FileOpen($xFilepath, 2) $result = FileWrite ($file, $body) FileClose($file) If $result == 1 Then ConsoleWrite(" - Success " & @CRLF); If Not StringInStr($aSavedFilepaths, $xFilepath) Then ; show tray bubble only once per file TrayTip("Save CSS server", $xFilepath & " - saved!", 1, 0) $aSavedFilepaths &= '|'&$xFilepath; EndIf TraySetIcon("info"); $iStartTime = TimerInit() Else ConsoleWrite(" - ERROR!!!"& @CRLF); TrayTip("Save CSS server ERROR", $xFilepath & " - file save error!", 0, 3) EndIf $sBuffer = "" $sRecv = "" $iSock = -1 TCPSend($iMainSocket, "HTTP/1.1 200 OK"& @CRLF) TCPSend($iMainSocket, "Content-Length: 2"& @CRLF) TCPSend($iMainSocket, @CRLF) TCPSend($iMainSocket, "OK") TCPCloseSocket($iMainSocket) sleep(1000) TCPShutdown () TCPStartup() $iMainSocket = TCPListen($sIP, $iPort, 1) WEnd Func urldecode($str) Local $i, $return, $tmp $return = "" $str = StringReplace ($str, "+", " ") For $i = 1 To StringLen($str) $tmp = StringMid($str, $i, 3) If StringRegExp($tmp, "%[0-9A-Fa-f]{2}", 0) = 1 Then $i += 2 While StringRegExp(StringMid($str, $i+1, 3), "%[0-9A-Fa-f]{2}", 0) = 1 $tmp = $tmp & StringMid($str, $i+2, 2) $i += 3 Wend $return &= BinaryToString(StringRegExpReplace($tmp, "%([0-9A-Fa-f]*)", "0x$1"), 4) Else $return &= StringMid($str, $i, 1) EndIf Next Return $return EndFunc ; Function to return IP Address from a connected socket. ;---------------------------------------------------------------------- Func _TCP_Server_ClientIP($hSocket) Local $pSocketAddress, $aReturn $pSocketAddress = DllStructCreate("short;ushort;uint;char[8]") $aReturn = DllCall("Ws2_32.dll", "int", "getpeername", "int", $hSocket, "ptr", DllStructGetPtr($pSocketAddress), "int*", DllStructGetSize($pSocketAddress)) If @error Or $aReturn[0] <> 0 Then Return 0 $aReturn = DllCall("Ws2_32.dll", "str", "inet_ntoa", "int", DllStructGetData($pSocketAddress, 3)) If @error Then Return 0 $pSocketAddress = 0 Return $aReturn[0] EndFunc Installation
- We put the Save CSS extension in chrome from the store
- You may need to enable the experimental API in the chrome settings : chrome: // flags /
- Download and run the exe file of the server part (people with fear of downloading EXE read below)
- In chrome, in the Developer Tools, we configure the correspondence of the virtual server paths and files on the disk, for example:
- Profit: Now immediately after changing the styles in the tray, a notification about saving the file will pop up. To constantly pop-up messages do not interfere, they pop up only 1 time per file, the subsequent autosave will only blink icon:
Captain Paranoia suggests that instead of the third paragraph, you can do the following:
- Download and install autoit ( http://www.autoitscript.com/ )
- Save the above script as save-css-server.au3
- Right-click on the file -> compile script
- Run exe
Using
| To change the CSS property, click on the property name or value and type on the keyboard. Numeric values can also be changed with the mouse wheel or up / down arrows on the keyboard. |  |
| To add a new property, double-click on the line with the “}” symbol and write the name of the property |  |
| To delete a property, delete its name and press enter |  |
If there are comments or vendor prefixes in the CSS file, they will also be saved.
Update 02/16/2013:
Fixed a bug due to an unclosed socket. Now the server is working correctly.
The script above and the exe file by reference updated.
Update 18/04/2013:
Fixed a bug where CSS was saved along with the http header.
The script above and the exe file by reference updated.
The first photo by Exey Panteleev
Text and screenshots of the “Use” section are taken from the author's site Save CSS
Source: https://habr.com/ru/post/166587/
All Articles