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


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

今回はウェブスクラップブックを使いやすくします。シングルクリックで取得する範囲を不透明で表示して、ダブルクリックで実際に取り込みます。「script.js」だけの変更となります。

$( function()
{
	var $flag = false;
	var $target;

	//ページ中の何かをクリックしたら
	$( 'div' ).on( 'mousedown' , function()
	{
		//クリックフラグがなければ
		if(! $flag )
		{
			//不透明度20%にする
			$( this ).css( 'opacity' , '0.2' );
			//ターゲットをコピーする
			$target = this;
			//フラグを上げる
			$flag = true;
		}
	});

	//ページ中の何かをクリックしたら
	$( 'div' ).on( 'mouseup' , function()
	{
		//クリックフラグがあれば
		if( $flag )
		{
			//ターゲットの不透明度を元に戻す
			$( $target ).css( 'opacity' , '1.0' );
			//フラグを下げる
			$flag = false;
		}
	});


	//ページ中の何かをダブルクリックしたら
	$( document ).on( 'dblclick' , function( $O_obj )
	{

		//クリックした要素のHTMLを取得する
		var $text		= $O_obj.target.offsetParent.innerHTML;

		//現在のサイト名を取得する
		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 );
			}

		});

	});

});

マウスイベントの「mousedown」「mouseup」を取得しています。
取得する対象はなんでもOKにしてしまうと全体を取得してしまうため「DIV」タグに制限します。
「DIV」タグはレイアウトによく使われるタグですね。

関連記事