Лирической отступление
Я долго бродил по галерее расширений для 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, очень уже она мне понравилась своим внешним видом и удобством.