GoogleReadere पर habrahabr.ru का टैंकर

शुभ दिन। शायद बहुत से लोग Google रीडर से habrahabr पढ़ना पसंद करते हैं। और मैं कोई अपवाद नहीं हूं। लेकिन यह बहुत कष्टप्रद है कि यदि आपको लेख पसंद आया है, तो आपको एक नया टैब खोलने और इसे साइट से पहले से पढ़ने की आवश्यकता है। आपके पास सभी लेखों को पढ़ने का समय नहीं है, टैब जमा होते हैं, ट्रैफ़िक बर्बाद होता है। सामान्य तौर पर - एक गड़बड़ और आपको कुछ हल करने की आवश्यकता है।

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

विस्तार

इसमें दो js फाइलें हैं - contentcript.js और jquery-1.4.2.min.js। मैंने सोचा था कि डोम के आसपास बहुत कुछ चल रहा होगा, इसलिए मैंने जकीरी को कसने का फैसला किया (मुझे उससे प्यार है)।

File Background.html - ब्राउज़र टैब की पृष्ठभूमि में लटका हुआ।

मुख्य विस्तार कॉन्फ़िगरेशन फ़ाइल मैनिफ़ेस्ट। Json फ़ाइल है। यह आइकनों के लिए पथ को इंगित करता है, जो अनुमति देने के लिए संबोधित करता है, जो HTML पृष्ठ का उपयोग करने के लिए है, आदि। मेरी अभिव्यक्ति इस तरह दिखती है:

 {
   "नाम": "कटर",
   "संस्करण": "0.0.2",
   "विवरण": "एक सुखद पढ़ने के लिए हेबर से पूरे आकार के सभी लेखों को क्रॉप करता है।"
   "अनुमति": [
     "टैब", "http://www.google.com/reader/*"
   ]
   "आइकन": {
     "48": "सर्प- molot_48.png",
     "128": "सर्प- molot_128.png"
   }
   "background_page": "background.html",
   "content_scripts": [
     {
       "मैच": ["http: // * / *"],
       "js": ["contentcript.js"]
     }
     {
       "js": ["jquery-1.4.2.min.js"],
       "मैच": ["http: // * / *", "https: // * / *"]
       "run_at": "document_start"
    }
   ]
 }

आप इस लेख से क्रोम के लिए एक्सटेंशन लिखने के बारे में अधिक जान सकते हैं ।

यह सब कैसे काम करता है

सबसे पहले, पाठक की उपस्थिति को थोड़ा बदल दें। हम "मैजिक" लिंक जोड़ते हैं और उस पर ऑन-क्लिक हैंडलर लटकाते हैं।

 $ ("# gbg")। ("<div style = 'मार्जिन-टॉप: 10px;"> <a href ='javascript: void (0)' id ='special-magic'> विशेष जादू) </ div> ")
 $ ('# विशेष-जादू')। क्लिक करें (फ़ंक्शन () {
    $ ("प्रविष्टि-शीर्षक")। प्रत्येक (फ़ंक्शन () {
       var लिंक = $ (यह) .children ("। प्रविष्टि-शीर्षक-लिंक")। Attr ('href')
          if ($ (यह) .parent ("div")। find। ("raskukozzz")। attr ("वर्ग")! = "raskukozzz") {
             $ (यह)। बाद में ($ ("<a href='javascript:void(0)' class='raskukozzz'> बकवास </a>") .click (फ़ंक्शन () {
	           chrome.extension.sendRequest ({'action': 'fetchTwitterFeed', 'uri': link}, onText);
                })
            )
	 }
    })
 })

chrome.extension.sendRequest ({'action': 'fetchTwitterFeed', 'uri': link}, onText); - क्रोम टूल के साथ एक क्रॉस-डोमेन अनुरोध भेजें। फिर हम अनुरोध की घटनाओं की सदस्यता लेते हैं: chrome.extension.onRequest.addListener (onRequest);

 समारोह fetchwitterFeed (कॉलबैक, उरी) {
    	 var url = uri;
         var xhr = new XMLHttpRequest ();
         xhr.onreadystatechange = function (डेटा) {
           अगर (xhr.readyState == 4) {
           
               var data = xhr.responseText;
               कॉलबैक (डेटा, यूआरएल);
           }
         }
         xhr.open ('GET', url, true);
         xhr.send ();
       };

       समारोह पर सबसे अच्छा (अनुरोध, प्रेषक, कॉलबैक) {
         अगर (request.act == 'fetchTwitterFeed') {
           fetchTwitterFeed (कॉलबैक, request.uri);
         }
       };

       chrome.extension.onRequest.addListener (onRequest);

खैर, यह सब है। पेज हमारी जेब में है। जेकर की मदद से, हम जल्दी से डोम को इकट्ठा करते हैं, आवश्यक शैलियों को जोड़ते हैं और खिड़की में दिखाते हैं।

 $ ("# प्रीलोड-फ़्र")। html ($ (समाचार) .find ("div.hentry")। html ())
 $ ("# प्रीलोड-फ्र")। शो (500)

इसका उपयोग कैसे करें

पाठक में, हब्रहा फ़ीड का चयन करें और "विशेष जादू" पर क्लिक करें



उसके बाद, प्रत्येक शीर्षक के तहत "बकवास करने के लिए" लिंक दिखाई देता है



जब क्लिक किया जाता है, तो समाचार के पूर्ण पाठ के साथ एक विंडो दिखाई देती है।

मुझे यह सब कहां से मिल सकता है

प्लगइन गैलरी में पहले से ही पोस्ट किया गया है - डाउनलोड । एक अधिक लगातार अद्यतन Google कोड होगा ।

भविष्य की योजना

1. सबसे पहले, ये टिप्पणियां हैं। बिना टिप्पणी के हबर कोई केक नहीं है। मुझे एक घंटे का खाली समय मिलेगा और मैं निश्चित रूप से टिप्पणियों के साथ ऐसा करूँगा - किया!

2. अन्य साइटों के साथ मित्र विस्तार करें।

3. सेटिंग्स जोड़ें। उदाहरण के लिए: खिड़की का आकार, फ्रेम, पृष्ठभूमि, टिप्पणी दिखाएं आदि।

4. एक विस्तार करने की कोशिश करें जो पाठक के विषय को बदल देगा।



यूपी १ । लिंक का स्थान बदल दिया है, अब यह दूसरी तस्वीर की तरह है।

यूपी २ । प्लगइन के साथ बहुत मदद के लिए उपयोगकर्ता हाँ के लिए बहुत धन्यवाद।

यहाँ इसके जोड़ और सुधार हैं:

- सीएसएस को एक अलग फाइल में ले जाया गया

- बूट पर जोड़ा गया एनीमेशन

- पुराने पेज लोडिंग मैकेनिज्म को हटा दिया और इसे आईफ्रेम के साथ माइक्रोब्रैब से बदल दिया :)

- थोड़ा पृष्ठ पुनः लोड किया, एक विंडो समापन आइकन जोड़ा

- Esc द्वारा जोड़ा गया विंडो क्लोजिंग

- एक चेक जोड़ा गया ताकि यह केवल खाबरोवस्की टेप पर काम करे



नया संस्करण पहले से ही गैलरी में है



और खिड़की अब इस तरह दिखती है:





अभी भी पोस्टों पर "वापस" और "आगे" जाने के लिए बटन जोड़ने का विचार है

यूपी ३ । प्लगइन को कुछ बग फिक्स के साथ गैलरी में अपडेट किया गया है। इसके अलावा, एक परियोजना Google कोड पर दिखाई दी।

यूपी 4 । प्लगइन फिर से अपडेट किया गया है।