Лирической отступление
Я долго бродил по галерее расширений для chrome, так и не нашёл расширения типа TV-программа, которое бы парсело офф. сайты TV-каналов и показывало программу при нажатие на иконку расширения. Поэтому решил его написать, сейчас я расскажу о процессе его создания.
Начало
Как бы процесс создания просто, мы будем использовать библиотеку 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.Всё зависит от самого сайта канала, для некоторый нужно лишь выделить div блок, для другого понадобилось узнать название дня и по��ом выделить div блок.
По коду видно что во всплывающее окно выводится программа одного канала, название канала берётся из локального хранилища, теперь создадим страницу настроек при помощи которой и можно будет настраивать, какой канал выводить:
<!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.Ну, вот собственно и всё. Расширение готово, вот само расширение в собранном виде Скачать, если хотите исходный код то скачайте файл на компьютер и поменяйте расширение на zip, далее распакуйте как обычный архив.
Так как расширение делал изначально для себя и сам живу в Белоруссии добавлены лишь белорусский канала, но при желании любой канал добавляется очень быстро. В ближайшее время планирую добавить страницу, на которой будут публиковаться несколько выбранных каналов плюс добавить ещё белорусский и русский каналов. А сейчас очень хотел бы услышать критику других пользователей.
Подвал
В основном в расширении использовал лишь свои наработки, но страница настроек взята из этого поста Создание расширения для Google Chrome, очень уже она мне понравилась своим внешним видом и удобством.
