叙情的な余談
私は長い間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ブロックを選択する必要があります。
コードは、1つのチャネルのプログラムがポップアップウィンドウに表示され、チャネルの名前がローカルストレージから取得されることを示しています。次に、表示するチャネルを構成できる設定ページを作成します。
<! 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の拡張機能の作成」から引用したもので、外観と利便性の面で既に気に入っています。