この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Google Chrome Extention講座 第十回「ウェブスクラップブックを完成させる1」

前回は一通りオプションページへの保存と読込をやったので、今回はウェブスクラップブックをオプションページに保存する機能を実装します。全体的にマイナーチェンジします。
まずは「script.js」を見ていきましょう。

$( function()
{
	//ページ中の何かをクリックしたら
	$( document ).on( 'click' ,  function( $O_obj )
	{
		//クリックした要素のHTMLを取得する
		var $text		= $O_obj.target.innerHTML;
//		var $text		= $O_obj.target.innerTEXT;

		//現在のサイト名を取得する
		var $site_name	= document.title;

		//現在のURLを取得する
		var $url		= location.href;

		//現在のサイトのドメイン名を取得する
		var $domain		= location.protocol + "//" + location.hostname + "/";

		//バックグラウンドにデータを送信する
		chrome.runtime.sendMessage(
		{
			cmd			: 'scrap' ,
			text		: $text ,
			site_name	: $site_name ,
			url			: $url ,
			domain		: $domain
		},
		//通信が成功した時の処理
		function( $O_res )
		{
			//バックグラウンドから返ってきたデータを取得する
			if( $O_res.cmd == "test_ok" )
			{
				//バックグラウンドページと通信が成功した場合はコンソールログにtest_okと表示される
				console.log( $O_res.cmd );
			}

		});

	});

});

変更箇所はドメイン名を取得しているところだけです。
次に「background.js」を見ていきます。

//グローバル変数として宣言
$scrap_text = "";

$(function(){


//メッセージを受信する
chrome.runtime.onMessage.addListener( function( $O_req , sender , sendResponse )
{
	//スクラップするなら
	if( $O_req.cmd == "scrap" )
	{
		var $text		= $O_req.text;
		var $site_name	= $O_req.site_name;
		var $url		= $O_req.url;
		var $domain		= $O_req.domain;

		//コンテンツスクリプトに応答を返す
		sendResponse(
		{
			cmd		: "test_ok",
		});

		//<base href="...">を付加する
		$text = '<base href="' + $domain + '">' + $text;

		//整形する
		$text = $text + "<br><div class='site-info'>" + "サイト名 " + $site_name + " : <a href='" + $url + "' target='_blank'>" + $url + "</a><hr></div>\n";

		//ポップアップに受け渡し用のグローバル変数に代入
		$scrap_text = $text + $scrap_text;
		console.log( $scrap_text );

	}

});

});

変更箇所は相対リンクにパスを通すために「<base href=”…”>」を付加しているところだけです。
次に「options.html」です。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>オプションページ</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="options.js"></script>
</head>

<body>

<h1>ウェブスクラップブック</h1>

	ウェブログ<br />
	<textarea rows="30" style="width:80%;" id="text" type="text" /></textarea><br />

	<input id="key" type="text" value="" />保存名(変更可能)<br />
	<input id="save" type="submit" value="保存する" />
	<input id="load" type="submit" value="読込する" />
	<input id="clear" type="submit" value="クリアする" />

	<div id="msg"></div>

	<p><div id="preview"></div></p>


</body>
</html>

ログ表示にはテキストボックスからテキストエリアに変更し、localStorageに保存するキーを変更可能にしたことと、クリアボタンを付けました。

「options.js」は以下のように改作しました。

$(function()
{

	//localStorageのキー
	var $key = "webscrapbook";	

	//初回だけオプションを読み込む
	LOAD_OPTION( $key );

	//localStorageのキーを置き換え
	$( '#key' ).val( $key );

	//保存ボタンをクリックしたら
	$( '#save' ).click( function()
	{
		//オプションに保存する
		SAVE_OPTION();
	});

	//読み込みボタンをクリックしたら
	$( '#load' ).click( function()
	{
		//オプションを読み込む
		LOAD_OPTION();
	});

	//クリアボタンをクリックしたら
	$( '#clear' ).click( function()
	{
		//オプションをクリア
		CLEAR_OPTION();
	});


//オプションを削除/////////////////////////////////////////////////////////////
function CLEAR_OPTION( $key )
{
	//localStorageキーが指定されていなければ
	if( $key == null )
	{
		//localStorageのキーを取得
		$key = $( '#key' ).val();
	}

	//テキストエリアのデータをクリア
	$( '#text' ).val( "" );

	//ローカルストレージからキーを元に保存データを取得
	var $str = localStorage.getItem( $key );

	//オブジェクトがなければ空のオブジェクトを作成する
	var $obj = new Object();

	//保存するオブジェクトをセットする
	$obj[ $key ] = '';

	var $str = JSON.stringify( $obj );

	localStorage.setItem( $key , $str );

	$( "#msg" ).html( "クリア完了" );

}
//オプションを読み込む/////////////////////////////////////////////////////////
function LOAD_OPTION( $key )
{
	//localStorageキーが指定されていなければ
	if( $key == null )
	{
		//localStorageのキーを取得
		$key = $( '#key' ).val();
	}

	//テキストエリアのデータをクリア
	$( '#text' ).val( "" );

	//ローカルストレージからキーを元に保存データを取得
	var $str = localStorage.getItem( $key );

	//JSON形式をデコードする
	var $obj = JSON.parse( $str );

	//オブジェクトが空でなければデータを取得する
	if( $obj != null) { var $text = $obj[ $key ]; }

	//空であれば空文字を代入する
	if(! $text ) { $text = ""; }

	//テキストエリアのデータを更新
	$( '#text' ).val( $text );

	$( "#msg" ).html( "ロード完了" );

}
//オプションに保存する/////////////////////////////////////////////////////////
function SAVE_OPTION( $key , $text )
{
	//localStorageキーが指定されていなければ
	if( $key == null )
	{
		//localStorageのキーを取得
		$key = $( '#key' ).val();
	}

	//保存する情報が指定されていなければテキストエリアに入力された情報を取得
	if(! $text )
	{
		//テキストエリアのデータを取得する
		var $text	= $( '#text' ).val();
	}


	//ローカルストレージからキーを元に保存データを取得
	var $str = localStorage.getItem( $key );

	//オブジェクトがなければ空のオブジェクトを作成する
	var $obj = new Object();

	//保存するオブジェクトをセットする
	$obj[ $key ] = $text;

	var $str = JSON.stringify( $obj );

	localStorage.setItem( $key , $str );

	$( "#msg" ).html( "セーブ完了" );

}
});

localStorageの保存と読込などの処理を関数化してすっきりさせています。
次に「popup.html」です。こちらは変更はありません。

関連記事