💍 🏂🏾 🍰 Google क्रोम एक्सटेंशन: हैबरहाब्र के साथ लेख प्रिंट करें ➗ 💅🏼 👩🏽‍⚖️

एक शाम, काम छोड़कर, मैं यहाँ एक दिलचस्प लेख लेकर आया। चूंकि मुझे मुद्रित संस्करण पढ़ना पसंद है, और समय पहले ही बाद में था - मैं घर जाना चाहता था, लेकिन मैं भी पढ़ना चाहता था - मैंने सड़क पर प्रिंट करने और पढ़ने का फैसला किया।

खैर, मैं टाइपिंग में लग गया, ब्राउज़र ने सुझाव दिया कि मैं 35 से अधिक पृष्ठों को प्रिंट करता हूं, लेकिन 20 पृष्ठ कहां हो सकते हैं? तथ्य यह है कि प्रेस सभी तत्वों के साथ चला गया, जो पोस्ट को क्रमशः संकीर्ण बनाता है, और टिप्पणियां समान हैं।

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

इस प्रकार Google Chrome ब्राउज़र के लिए एक्सटेंशन का जन्म हुआ - HabraPrint ।
आप सभी की आवश्यकता है कि एक बटन दबाएं और प्रिंट करें।

यह मेरा पहला विस्तार है, साथ ही साथ पहली पोस्ट, मुझे आशा है कि वे मुझे सही कर देंगे जहां मैंने गलती की।
और इसलिए हमारे अंदर क्या है:

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

{ "name": "HabraPrint", "version": "0.1", "description": "       habrahabr.ru", "icons": { "128": "img/icon_128.png", "64": "img/icon_64.png", "48": "img/icon_48.png", "32": "img/icon_32.png", "16": "img/icon_16.png" }, "minimum_chrome_version":"6.0", "permissions": [ "tabs","http://habrahabr.ru/*", "https://habrahabr.ru/*"], "background_page": "background.html", "content_scripts": [ { "js": [ "js/jquery-1.7.1.min.js","js/content.js" ], "css": ["css/content.css"], "run_at": "document_end", "matches": [ "http://habrahabr.ru/*", "https://habrahabr.ru/*" ] } ], "page_action": { "default_icon": "img/icon_19.png", "default_title": "HabrPrint" }, "options_page": "options.html" }

हम संकेत देते हैं:
नाम - विस्तार नाम
संस्करण - वर्तमान संस्करण
विवरण - आपके विस्तार का विवरण
आइकन - एक्सटेंशन आइकन का पथ निर्दिष्ट करें < key / size>: < value / path to the image>
icon_128

minimal_chrome_version - न्यूनतम ब्राउज़र संस्करण इंगित करें
अनुमतियाँ - यहाँ हम इंगित करते हैं कि आपको किस चीज़ की आवश्यकता है
बैकग्राउंड_पेज - पृष्ठ पर उस पथ को निर्दिष्ट करें जिसे पृष्ठभूमि में निष्पादित किया जाएगा
content_scripts - पृष्ठ में एम्बेडेड फ़ाइलों के लिए पथ निर्दिष्ट करेगा
page_action - यह गुण इंगित करता है कि एक्सटेंशन बटन ब्राउज़र के एड्रेस बार में रखा जाएगा, आइकन और नाम के लिए पथ निर्दिष्ट करें
options_page - सेटिंग पेज का पथ

फ़ाइल का विस्तृत विवरण प्रलेखन में पाया जा सकता है

प्रत्येक एक्सटेंशन के लिए यह फ़ाइल आवश्यक है, जैसे इसमें निर्दिष्ट सभी फाइलें।

अब हम सूची के माध्यम से आगे बढ़ेंगे।
मैंने उपयोग में आसानी के लिए फ़ोल्डर्स में उनके प्रकार के अनुसार फ़ाइलों को सॉर्ट किया है।
निम्न फ़ाइल पृष्ठभूमि_पृष्ठ बनाती है :

 <!DOCTYPE html> <html> <head> <script src="js/background.js"></script> </head> </html>

जैसा कि आप देख सकते हैं, केवल एक पृष्ठ फ़्रेम है, और एक जावास्क्रिप्ट स्क्रिप्ट कनेक्शन है जो पृष्ठभूमि में क्रियाओं के लिए जिम्मेदार है

background.js

  chrome.tabs.onCreated.addListener(function(tab){ urlDetected(tab.id, null, tab); }); chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){ if(changeInfo.status=='complete'){ urlDetected(tabId, changeInfo, tab); } }); function urlDetected(tabId, changeInfo, tab){ chrome.tabs.getSelected(null,function(tab) { var re=/.+habrahabr.+\/(\d+)\//; if(re.test(tab.url)){ chrome.pageAction.show(tabId); }else{ chrome.pageAction.hide(tabId); } }); } chrome.pageAction.onClicked.addListener(function(tabId) { //      if(!localStorage["radio"]||localStorage["radio"]=='popup'){ PrintIt(); }else if(localStorage["radio"]=='same'){ chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendRequest(tab.id, { type:'print-same' }); }); } });

इस फ़ाइल में हम टैब बनाने और अपडेट करने के लिए ईवेंट हैंडलर लटकाते हैं, हमारे डोमेन और नंबरों की उपस्थिति के लिए url की जांच करते हैं (मैं चेक का उपयोग ~~सैद्धांतिक रूप से~~ यह निर्धारित करने के लिए करता हूं कि उपयोगकर्ता पोस्ट के साथ पृष्ठ पर है या नहीं), जिसके आधार पर मैं एक्सटेंशन आइकन दिखाता या छिपाता हूं। इस प्रकार, विस्तार ~~सैद्धांतिक रूप से~~ केवल पोस्ट के साथ पृष्ठ पर प्रदर्शित किया जाता है।
अगला, हम अपने आवेदन के बटन पर क्लिक करके हैंडलर को लटकाते हैं और हमारे एक्सटेंशन की सेटिंग्स के आधार पर, हम एक कार्रवाई करते हैं।
सेटिंग्स में, आप एक ही विंडो में या पॉप-अप में प्रिंट करना चुन सकते हैं, लेकिन बाद में उस पर अधिक।
एक ही खिड़की में

चूंकि पॉप-अप विंडो पर कॉल करने के लिए मुझे केवल इस फ़ाइल (बैकग्राउंड_पेज) को निष्पादित करने की अनुमति दी गई थी, यहां फ़ंक्शन उसी विंडो को प्रदर्शित करने के लिए जिम्मेदार है।

  function PrintIt(){ if(wnd){ wnd.close(); } stext=''; chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendRequest(tab.id, { type:'returnHtml' }, function(response) { stext=response.html; wnd=window.open("", "habrPrint", 'statusbar=no,toolbar=no,scrollbars=yes,resizable=yes''); wnd.document.write("<!DOCTYPE html>\ <html lang='ru'>\ <head>\ <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>\ <meta content='ru' name='language'>\ <title>"+response.title+"</title>\ <link href=\"/css/print.css\"rel=\"stylesheet\"type=\"text/css\" media=\"all\"/></style>\ </head>\ <body onclick=\"window.close()\">\ <div class='post'>"); wnd.document.write(stext); wnd.document.write("</div><body></html>"); wnd.document.close(); setTimeout(function(){ wnd.print(); wnd.close(); }, 100) }); }); }

फिर मैंने फ़ंक्शन को थोड़ा और स्पष्ट रूप से छोटा कर दिया। जैसा कि आप देख सकते हैं, सामान्य window.open का उपयोग किया जाता है और HTML को पोस्ट पाठ के साथ पृष्ठ से इसे स्थानांतरित कर दिया जाता है। पाठ प्राप्त करने के लिए, हम एक अनुरोध भेजते हैं, कार्रवाई के नाम के साथ, सामग्री स्क्रिप्ट के लिए, जवाब में हम पोस्ट के भीतर का HTML प्राप्त करते हैं और इसे wnd.document.write () विंडो पर लिखते हैं।

आगे, हम अपनी सामग्री स्क्रिप्ट लिखेंगे:

 var getElementsByClassName = function(getClass){ if(document.querySelectorAll) { return document.querySelectorAll("." + getClass); } else if(document.getElementsByClassName) { return document.getElementsByClassName(getClass); } else { var list = document.getElementsByTagName('*'), i = list.length, classArray = getClass.split(/\s+/), result = []; while(i--) { if(list[i].className.search('\\b' + classArray + '\\b') != -1) { result.push(list[i]); } } return result; } }; function pageCleaner(){ $('body *').removeClass('habrNoPrint').removeClass('habrPrint'); } function printSame(){ $('body *').addClass('habrNoPrint'); $('#layout, .content_left, .company_post, .post, .post *').removeClass('habrNoPrint'); $('.content_left').addClass('habrPrint'); window.print(); window.setTimeout(pageCleaner, 0); } chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { if(request.type == 'print-same'){ printSame(); } if(request.type == 'returnHtml'){ var elem=getElementsByClassName('post')[0]; var title=document.getElementsByTagName('title')[0]; sendResponse({'html':elem.innerHTML,'title':title.innerHTML}); } });

यहां हम अनुरोध श्रोता को देते हैं, और इसे प्राप्त करने पर, हम मापदंडों में निर्दिष्ट कार्रवाई करते हैं।
केवल दो क्रियाएं हैं, या तो पिछले स्क्रिप्ट को html पोस्ट देने के लिए, या उस फ़ंक्शन को निष्पादित करने के लिए जो मुद्रण के लिए जिम्मेदार है। इस फ़ंक्शन में मैं मुद्रण के लिए शैलियों का उपयोग करता हूं, अर्थात, मैं शैलियों के साथ संकेत देता हूं कि क्या प्रिंट करना है और क्या छिपाना है।

और अंत में हम सेटिंग पेज लिखेंगे।
Options.html में हम पेज फ्रेम बनाते हैं

 <!DOCTYPE html> <html lang='ru' xml:lang='ru' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta content='text/html; charset=utf-8' http-equiv='Content-Type'> <meta content='ru' name='language'> <style>@import "css/options.css";</style> <script src="js/options.js"></script> </head> <body> <header> <h3>:</h3><span id="options_callback"></span> </header> <div id='habrPrint_options'> <form name="habr_options_form"> <div class='options_form'> <div> <input id="radio_popup" type="radio" name="window" value='popup' checked="checked"/> <label id="append-label">  </label> <p>       </p> </div> <div> <input id="radio_same" type="radio" name="window" value='same' /> <label id="append-label">   </label> <p>    ,    ,       5- </p> </div> </div> </form> <div class="button"> <div class="button_blue"> <button id="save"></button> </div> </div> </div> </body> </html>

केवल कुछ रेडियो बटन हैं जो प्रिंट मोड और सेव बटन को सेट करते हैं, शैलियों को css / options.css में दर्शाया गया है, मैंने यहां उनका वर्णन नहीं किया है।

इसलिए यह पृष्ठ सामने आया:

विकल्प.जेएस फ़ाइल में, जावास्क्रिप्ट को लिखें जो सेटिंग्स को बचाने के लिए जिम्मेदार होगा।

  function getRadioGroupValue(radioGroupObj) { for (var i=0; i < radioGroupObj.length; i++) if (radioGroupObj[i].checked) return radioGroupObj[i].value; return null; } function readProperty(property, defValue) { if(localStorage[property] == null) { return defValue; } return localStorage[property]; } window.addEventListener("load", function(){ chrome.tabs.getSelected(null, function(tab) { var save = document.getElementById("save"); if(localStorage["radio"]){ document.getElementById("radio_"+localStorage["radio"]).checked =readProperty("radio", false); } save.addEventListener("click", function(){ var radio_value = getRadioGroupValue(document.habr_options_form.window); localStorage["radio"] = radio_value; if(localStorage["radio"]){ var sum=document.getElementById('options_callback'); sum.innerHTML=' ' } }); }); });

हम हैंडलर को सेव बटन पर क्लिक करते हैं और उस पर लोकलस्टोरेज ऑब्जेक्ट में वैल्यू एंटर करते हैं।
लोकलस्टोरेज एक सहयोगी सरणी है जो जोड़े को "नाम", "मान" संग्रहीत करती है। मान बचाने के लिए, बस लिखें:

  localStorage["radio"] = radio_value;

यह, सिद्धांत रूप में, ब्राउज़र में हमारे विस्तार को लोड करने के लिए रहता है।
टैब "एक्सटेंशन प्रबंधित करें" (टूल-> एक्सटेंशन) पर जाएं, "डेवलपर मोड" चालू करें, और अनपैक किए गए एक्सटेंशन को लोड करें।

एक्सटेंशन का उपयोग करने के लिए, habrahabr पर किसी भी पोस्ट को खोलें और ब्राउज़र के एड्रेस बार में दिखाई देने वाले एक्सटेंशन आइकन पर क्लिक करें।

समस्याएं हैं:
मैंने देखा कि जब मैंने पहली बार एक्सटेंशन डाउनलोड किया था, तो एक त्रुटि दिखाई दी जैसे "आपको टैब के लिए फ़ंक्शन का उपयोग करने की अनुमति नहीं है, प्रकट की जांच करें", यही कारण है कि मैं अभी भी इसका पता नहीं लगा सका, अगर मैं समझाता हूं, तो मैं आभारी रहूंगा।

सूत्रों का कहना है:
Google Chrome एक्सटेंशन FAQ
Google Chrome के लिए एक एक्सटेंशन बनाएं

एक्सटेंशन:
डाउनलोड

पीएस दुर्भाग्य से, लेखन एक्सटेंशन के बारे में मेरा ज्ञान मुझे सृजन प्रक्रिया का अधिक विस्तार से वर्णन करने की अनुमति नहीं देता है, लेकिन मुझे आशा है कि यह एक्सटेंशन किसी के लिए उपयोगी है।
मैं सुझाव, संपादन और टिप्पणियां भी सुनना चाहूंगा। आप सभी को अग्रिम धन्यवाद।

UPD : bo883 के अनुरोध पर, मैंने सिंटैक्स हाइलाइटिंग को जोड़ा और कोड के लिए एक वॉटरमार्क जोड़ा (अब तक यह केवल "पॉप-अप विंडो में काम करता है", मैं इसे जल्द ही जोड़ दूंगा जब एक ही विंडो में छपाई होगी)। लागू करते समय, मैं एक समस्या में भाग गया था कि सीएसएस के माध्यम से जोड़ा गया बैकग्राउंड क्रोम प्रिंट नहीं करता है, लेकिन यह चित्रों को पूरी तरह से प्रिंट करता है (<img ...>), इसके आधार पर हम कोड के साथ ब्लॉक में एक तस्वीर जोड़ते हैं, इसकी चौड़ाई और ऊंचाई को कोड ब्लॉक के आकार के बराबर सेट करते हैं, इसे अपने आप से पूरे ब्लॉक तक खींचना, और कोड के तहत चित्र लगाने के लिए इसे z-index के साथ बदलना, परिणामस्वरूप, जब हम प्रिंट करते हैं, तो कोड क्षेत्र में एक सब्सट्रेट होता है। ( एक्सटेंशन अपडेट किया गया)

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

More articles: