Making a TV program as an extension for chrome

Lyrical retreat

I have been wandering around the gallery of extensions for chrome for a long time, so I haven’t found any extensions like a TV program that would be turned off. TV channels sites and showed the program when clicking on the extension icon. Therefore, I decided to write it, now I will talk about the process of its creation.

Start

As if the creation process is simple, we will use the jQuery library.
First, create an extension description file:

{
"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 .

There will not be delayed, everything should be clear.
Next, we will create a popup.htm file; I will not give all the code of the file, I will give only the part where the program is parsed:

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 .

')
It all depends on the channel site itself, for some you just need to select the div block, for another you need to know the name of the day and then select the div block.
The code shows that the program of one channel is displayed in the pop-up window, the name of the channel is taken from the local storage, now we will create a settings page with which you can configure which channel to output:

<! 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 .

Well, that's all. The extension is ready, here is the extension itself assembled Download , if you want the source code, then download the file to your computer and change the extension to zip, then unpack it as a regular archive.
Since the expansion was done initially for myself and I live in Belarus, only the Belarusian channel was added, but if you wish, any channel is added very quickly. In the near future I plan to add a page on which several selected channels will be published plus another Belarusian and Russian channels. And now I would really like to hear criticism from other users.

Basement

Mostly in the extension I used only my own work, but the settings page was taken from this post. Creating an extension for Google Chrome , I already liked it very much with its appearance and convenience.