क्रोम के विस्तार के रूप में एक टीवी कार्यक्रम बनाना

गीतात्मक विषयांतर

मैं लंबे समय तक क्रोम के लिए एक्सटेंशन की गैलरी में घूमता रहा, और एक टीवी प्रोग्राम जैसा कोई एक्सटेंशन नहीं मिला जो इसे बंद कर देगा। टीवी चैनलों की साइटें और जब आप एक्सटेंशन आइकन पर क्लिक करते हैं तो प्रोग्राम दिखाया जाता है। इसलिए, मैंने इसे लिखने का फैसला किया, अब मैं इसके निर्माण की प्रक्रिया के बारे में बात करूंगा।

शुरुआत

जैसे कि निर्माण प्रक्रिया सरल है, हम jQuery लाइब्रेरी का उपयोग करेंगे।
सबसे पहले, एक विस्तार विवरण फ़ाइल बनाएं:

{
"name" : "TV Program" ,
"version" : "0.1" ,
"options_page" : "options.html" ,
"browser_action" : {
"default_icon" : "img/icon.png" ,
"popup" : "popup.html"
},
"permissions" : [
"http://*/*"
]
}

* This source code was highlighted with Source Code Highlighter .

यह यहां नहीं झुकेगा, सब कुछ स्पष्ट होना चाहिए।
इसके बाद, हम popup.htm फ़ाइल बनाएँगे, मैंने फ़ाइल का पूरा कोड नहीं दिया है, मैं केवल वह हिस्सा देता हूँ जहाँ प्रोग्राम पार्स किया जाता है:

if (localStorage[ "tv" ] == "ont" ){
var now = new Date()
if (now.getDay() == 0)
{ var day = "#sunday" }
if (now.getDay() == 1)
{ var day = "#monday" }
if (now.getDay() == 2)
{ var day = "#tuesday" }
if (now.getDay() == 3)
{ var day = "#wednesday" }
if (now.getDay() == 4)
{ var day = "#thursday" }
if (now.getDay() == 5)
{ var day = "#friday" }
if (now.getDay() == 6)
{ var day = "#saturday" }
$.get( "http://ont.by/new/programma" , {}, function (data, status) {
var details = $(data).find(day);
$( '#logo' ).html( '<img src="/img/ont_logo.png" />' );
$( '#tv' ).html(details);
});
}
if (localStorage[ "tv" ] == "bt" ){
$.get( "http://www.tvr.by/rus/progtv1.asp" , {}, function (data, status) {
var details = $(data).find( '#rubricator' );
$( '#logo' ).html( '<img src="/img/bt_logo.png" />' );
$( '#tv' ).html(details);
});
}
if (localStorage[ "tv" ] == "ntv_by" ){
$.get( "http://www.tvr.by/rus/progntv.asp" , {}, function (data, status) {
var details = $(data).find( '#rubricator' );
$( '#logo' ).html( '<img src="/img/ntv_logo.png" />' );
$( '#tv' ).html(details);
});
}

* This source code was highlighted with Source Code Highlighter .

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< link href ="options.css" rel ="stylesheet" type ="text/css" />
</ head >
< body >
< div class ="menu" >
< label > </ label >
< form >
< select id ="tv" style ="width: 200px;" >
< option value ="ont" > </ option >
< option value ="bt" > </ option >
< option value ="ntv_by" > - </ option >
</ select >
</ form >
</ div >

< br />

< div class ="menu" >
< div class ="buttons" >
< input type ="button" id ="lngSave" value ="Save" onClick ="return onSave();" />
</ div >
</ div >
< script >
function onSave(){
localStorage[ "tv" ] = document .getElementById( 'tv' ).value;
}
</ script >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

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

तहखाना

ज्यादातर विस्तार में मैंने केवल अपनी स्वयं की उपलब्धियों का उपयोग किया, लेकिन इस पृष्ठ से सेटिंग पृष्ठ लिया गया था Google Chrome के लिए एक एक्सटेंशन बनाना , मुझे पहले से ही इसकी उपस्थिति और सुविधा के लिए बहुत पसंद आया था।