हैबर पर लेखों के प्रकाशन के लिए सब्लिम टेक्स्ट पर प्लग इन करें

हेबर पर लेख लिखने के लिए मैं टेक्स्ट एडिटर सबलिम टेक्स्ट का उपयोग करता हूं। क्यों यह Habré पर एक अच्छा संपादक है कई बार पहले से ही लिखा है (उदाहरण के लिए यहाँ )। हालांकि, एक लेख लिखते समय, एक ऐसा क्षण होता है, जब इसे Habr के प्रकाशन के लिए स्थानांतरित करने की आवश्यकता होती है, ठीक है, आप जानते हैं: Habr-> पोस्ट जोड़ें- नाम, हब, पाठ (Ctrl + C / Ctrl + V), लेबल, पूर्वावलोकन। इस समय, यह पता चला है कि किसी भी तरह चित्रों के साथ पाठ को हबेरी बदसूरत पर बनाया गया था, संपादन शुरू होता है। ब्राउज़र में संपादित करें? असुविधाजनक और असुरक्षित। उदात्त में संपादित करें और लगातार कॉपी-पेस्ट करें? असुविधाजनक और कष्टप्रद।

इसलिए, मैंने खुद के लिए एक छोटा सा प्लग-इन सबलाइम बनाया, जो क्रोम और हैबर के साथ बातचीत कर सकता है, पूर्वावलोकन बटन के स्वचालित क्लिक के साथ एक नया विषय बनाने के लिए पृष्ठ पर संपादक को हॉटकी द्वारा लिखित पाठ को स्थानांतरित कर सकता है। यह आपको सबलाइम में एक लेख लिखने की अनुमति देता है और एक क्लिक के साथ हैबर पर इसके प्रदर्शन का परिणाम देखता है।

कट के तहत, हम सीखेंगे कि सबलेम के लिए प्लगइन्स कैसे लिखें और हम यह पता लगाएंगे कि अपने दूरस्थ डिबगिंग प्रोटोकॉल का उपयोग करके पायथन कोड से क्रोम के साथ कैसे बातचीत करें। GitHub पर पूरा प्लगइन कोड संलग्न है।

प्रस्तावना

सब्लिम टेक्स्ट 3 और गूगल क्रोम के लिए प्लगइन। न्यूनतम संपादन के साथ, यह उदात्त पाठ 2 के लिए और फ़ायरफ़ॉक्स के लिए थोड़े बड़े संस्करणों के साथ अनुकूलित किया जा सकता है। यह सिर्फ इतना है कि मुझे बहुत दिलचस्पी नहीं है, लेकिन कौन चाहता है - अच्छी तरह से, आप जानते हैं कि कैसे GitHub पर फोर्क बटन काम करता है।

एक नया उदात्त पाठ प्लगइन बनाना

कुछ भी आसान नहीं है। उदात्त पाठ चलाएँ, मेनू पर जाएँ - " उपकरण -> नया प्लगइन ... " और निम्नलिखित सामग्री के साथ एक नई पाठ फ़ाइल प्राप्त करें:

import sublime, sublime_plugin class ExampleCommand(sublime_plugin.TextCommand): def run(self, edit): self.view.insert(edit, 0, "Hello, World!") 

Ctrl + S दबाएं और देखें कि सेव फाइल डायलॉग हमें यूजर प्रोफाइल में यूजर फोल्डर में सेव करने की सुविधा देता है। हम सहमत नहीं हैं, एक स्तर ऊपर (संकुल फ़ोल्डर में) जाएँ, यहाँ SublimeHabrPlugin फ़ोल्डर बनाएँ और SublimeHabrPlugin.py नाम के साथ इस फ़ोल्डर में हमारी फ़ाइल सहेजें। उदात्त पाठ की सुंदरता यह है कि आपको कुछ भी बनाने, कनेक्ट करने या पुनः आरंभ करने की आवश्यकता नहीं है। जब कोई फ़ाइल सहेजी जाती है, तो यह स्वचालित रूप से संपादक को अपलोड कर दी जाएगी। आप इसे सब्मिट टेक्स्ट कंसोल (Ctrl + ~ दबाएं), कुछ इस तरह खोलकर सत्यापित कर सकते हैं

reloading plugin HabrPlugin.HabrPlugin

अब आप एक ही कंसोल में कमांड चला सकते हैं
view.run_command('example')

और सुनिश्चित करें कि वाक्यांश "हैलो, वर्ल्ड!" वर्तमान फ़ाइल के पाठ में जोड़ा गया है। कमांड नाम "उदाहरण" प्रत्यय "कमांड" को हटाकर और कैमेलके के शेष को अंडरस्कोर_केस में परिवर्तित करके उदाहरणकमांड वर्ग के नाम से प्राप्त किया गया था। यानी हब्र कमांड को जोड़ने के लिए, हमारी कक्षा को हबरकामंड कहा जाना चाहिए।

क्रोम की तैयारी

हम अपने टेक्स्ट को उप-पाठ से Google Chrome में कैसे स्थानांतरित करेंगे, न कि केवल "कहीं और", अर्थात्, नए Habr विषय के पृष्ठ पर पाठ संपादक फ़ील्ड में, "पूर्वावलोकन" बटन के बाद के क्लिक के साथ? यह वह जगह है जहां क्रोम रिमोट डीबगिंग प्रोटोकॉल आता है। यह एक प्रोटोकॉल है जो आपको क्रोम से कनेक्ट करने की अनुमति देता है, उनमें से प्रत्येक पर खुले टैब और पूर्ण नियंत्रण की एक सूची प्राप्त करें (सामग्री को संशोधित करना, घटनाओं की सदस्यता लेना, जावास्क्रिप्ट को निष्पादित करना, ब्रेकपॉइंट्स सेट करना) - i.e. वास्तव में, F12 पर खुलने वाले "डेवलपर टूल" आपको यह करने की अनुमति देते हैं। मैं एक और भी भयानक रहस्य प्रकट करूंगा - ये उपकरण इस प्रोटोकॉल के अनुसार स्वयं ठीक काम करते हैं, जिससे एक क्रोम से दूसरे क्रोम में एक दूरस्थ मशीन या मोबाइल संस्करण में डीबगिंग पृष्ठों से कनेक्ट करना संभव हो जाता है।

बाहरी कनेक्शन की अनुमति देने के लिए, हमें क्रोम को कमांड लाइन पैरामीटर के साथ चलाना होगा

chrome.exe --remote-debugging-port = 9222

व्यक्तिगत रूप से, मैंने अपने आप को डेस्कटॉप पर "हैबर पर अनुच्छेद" शॉर्टकट बनाया, जैसे क्रोम को लॉन्च करना:

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --remote-debugging-port = 9222 habrahabr.ru/topic/add

परिणामस्वरूप, एक क्लिक में हमें एक नए लेख का खुला पृष्ठ मिलता है और क्रोम दूरस्थ डिबगिंग के लिए कनेक्ट करने की क्षमता के साथ लॉन्च किया जाता है।

हम प्लगइन ही लिखते हैं

प्लगइन का विचार पहले से ही स्पष्ट है। हम वर्तमान फ़ाइल के सभी पाठ ले जाएंगे, क्रोम से कनेक्ट करें, टैब की एक सूची प्राप्त करें, वेबस्केट प्रोटोकॉल का उपयोग करके एक खुले हैबर पेज के साथ एक टैब से कनेक्ट करें, और जावास्क्रिप्ट को निष्पादित करें, जो पाठ को वांछित क्षेत्र में सम्मिलित करेगा और पूर्वावलोकन बटन पर क्लिक करेगा। तो, हम कदम से कदम मिलाकर चलते हैं।

वर्तमान फ़ाइल के सभी पाठ कैसे लें

 text = self.view.substr(sublime.Region(0, self.view.size())) 

क्रोम से कैसे जुड़ें और टैब की एक सूची प्राप्त करें

हमें 9222 पोर्ट पर HTTP से स्थानीय मशीन के माध्यम से कनेक्ट करने की आवश्यकता है, JSON को मेटाडेटा के साथ प्राप्त करें, इसे पार्स करें और इससे वेब स्ट्रॉकेट प्रोटोकॉल का उपयोग करके हेरा टैब के कनेक्शन स्ट्रिंग का लिंक प्राप्त करें।

 import json import urllib import sys def download_url_to_string(url): request = urllib.request.Request(url) response = urllib.request.urlopen(request) html = response.read() return html info_about_tabs = download_url_to_string('http://localhost:9222/json') info_about_tabs = info_about_tabs.decode("utf-8") decoded_data = json.loads(info_about_tabs) first_tab_websocket_url = decoded_data[0]['webSocketDebuggerUrl'] print(first_tab_websocket_url) 

यदि आप इस कोड को चलाते हैं, तो कुछ ऐसा है
ws://localhost:9222/devtools/page/FD3D0027-0D2D-4DD0-AD1C-156FCA561F7E

यह टैब डीबगिंग से कनेक्ट करने के लिए URL है।

WebSocket के माध्यम से टैब डिबगिंग से कनेक्ट करें

दो-तरफ़ा संचार में अपनी सुविधा के कारण, यहाँ पर WebSocket प्रोटोकॉल को क्रोम द्वारा चुना गया था - सर्वर अपने अगले अनुरोध की प्रतीक्षा किए बिना, तुरंत होने वाली घटनाओं के बारे में ग्राहक को सूचनाएं भेज सकता है। HTTP के विपरीत WebSocket सपोर्ट, मानक पायथन लाइब्रेरी का हिस्सा नहीं है, इसलिए हमें थर्ड-पार्टी लाइब्रेरी लेनी होगी। मुझे यह एक मिला, यह कार्यों से मुकाबला करता है।

तो, हम वांछित टैब से जुड़ते हैं और आरंभ करते हैं, शुरुआत के लिए, इसके संदर्भ में सरल जावास्क्रिप्ट:

 import json import urllib import SublimeHabrPlugin.websocket def send_to_socket(socket, data): socket.send(data) def send_script_to_socket(socket, script): send_to_socket(socket, '{"id": 1, "method": "Runtime.evaluate", "params": { "expression": "' + script + '", "returnByValue": false}}') def on_open(ws): print('Websocket open') send_script_to_socket(ws, 'alert(\'!\')') def on_message(ws, message): decoded_message = json.loads(message) print(decoded_message) ws.close() def connect_to_websocket(url): res = SublimeHabrPlugin.websocket.WebSocketApp(url, on_message = on_message) res.on_open = on_open return res first_tab_websocket = connect_to_websocket(first_tab_websocket_url) first_tab_websocket.run_forever() 

जावास्क्रिप्ट जो संपादक को Habré में पाठ सम्मिलित करता है और पूर्वावलोकन बटन दबाता है
खैर, यह काफी सरल है:

 document.getElementById('text_textarea').innerHTML = 'text'; document.getElementsByName('preview')[0].click(); 

खैर, अब यह सब एक साथ है।

 import sublime, sublime_plugin import json import urllib import SublimeHabrPlugin.websocket import sys import base64 def download_url_to_string(url): request = urllib.request.Request(url) response = urllib.request.urlopen(request) html = response.read() return html def send_to_socket(socket, data): socket.send(data) def send_script_to_socket(socket, script): send_to_socket(socket, '{"id": 1, "method": "Runtime.evaluate", "params": { "expression": "' + script + '", "returnByValue": false}}') def on_open(ws): text_to_send = str(base64.b64encode(bytes(ws.text, "utf-8")), encoding='UTF-8') send_script_to_socket(ws, 'document.getElementById(\'text_textarea\').innerHTML = atob(\'' + text_to_send + '\');document.getElementsByName(\'preview\')[0].click();') def on_message(ws, message): decoded_message = json.loads(message) ws.close() def connect_to_websocket(url): res = SublimeHabrPlugin.websocket.WebSocketApp(url, on_message = on_message) res.on_open = on_open return res class HabrCommand(sublime_plugin.TextCommand): def run(self, edit): text = self.view.substr(sublime.Region(0, self.view.size())) info_about_tabs = download_url_to_string('http://localhost:9222/json') info_about_tabs = info_about_tabs.decode("utf-8") decoded_data = json.loads(info_about_tabs) first_tab_websocket_url = decoded_data[0]['webSocketDebuggerUrl'] print(first_tab_websocket_url) first_tab_websocket = connect_to_websocket(first_tab_websocket_url) first_tab_websocket.text = text first_tab_websocket.run_forever() 

पायथन से जावास्क्रिप्ट में स्थानांतरित करते समय पाठ में किसी भी उद्धरण, स्लैश और अन्य विशेष पात्रों के भागने पर पहेली न करने के लिए, मैं बस पायथन कोड में बेस 64 में लपेटता हूं और इसे जावास्क्रिप्ट में वापस तैनात करता हूं (धन्यवाद, बेस 64 समर्थन दोनों भाषाओं के मानक पुस्तकालयों में शामिल है) ।

हम उदात्त पाठ में हॉटकी पर हाब कमांड को लटकाते हैं

"प्राथमिकताएं -> कुंजी बाइंडिंग - उपयोगकर्ता" खोलें। हम वहां जोड़ते हैं:

 { "keys": ["alt+shift+h"], "command": "habr" } 

परिणाम

Chrome चलाएं, उदात्त पाठ खोलें, "टेस्ट" लिखें, alt + Shift + h दबाएं:



गिटहब परियोजना