2013年04月01日


Google Chrome 拡張作成入門

最新の情報は以下のリンク先です

マウスカーソル下の画像表示用 HTML コードをクリップボードにコピーする Google Chrome 拡張

▼ 以下はバージョンアップ(仕様変更)の為、動作しません
---------------------------------------------------------

以下のコードは最も簡単でかつ利用価値の高いものです。必要なファイルは、拡張アプリケーションの基本定義である『background.html』と、全体の仕様を定義する『manifest.json』と、アイコンファイルが3つです( アイコンは必ずしも必要ではありません )

以上の5つファイルを任意のディレクトリ内に配置して、Google Chrome から読み込むだけで、拡張機能として実装されて、デバッグも可能になります。もし、世の中に配布したいのであれば、そこからパッケージを作成する事も可能です
background.html(UTF-8N)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// *************************************************
// クリップボードへコピー
// *************************************************
function clip_Copy(str) {
	document.getElementById('text').value = str;
	document.getElementById('text').select();
	document.getElementById('text').focus();
	document.execCommand("Copy");
}

// *********************************************************
// 右クリックメニューの処理
// *********************************************************
function active_Action(info, tab) {

	var str = "";

	if ( info.mediaType == 'image' && typeof( info.srcUrl ) !== 'undefined' ) {
		str = '<img src="' + info.srcUrl + '"';
		str += ' style="border: solid 0px #000000" />';
		clip_Copy( str );
		chrome.tabs.executeScript(
			null,
			{ code: "alert('"+str+"');" },
			function() {
			}
		);
	}

}

// *********************************************************
// 初期処理
// *********************************************************
try {
	chrome.contextMenus.removeAll();
}catch(e) {}

// 右クリックメニューを作成
chrome.contextMenus.create(
	{
		"title": "画像HTML取得",
		"contexts":["image"],
		"onclick": active_Action
	}
);
</script>
</head>
<body>
<textarea name="text" id="text"></textarea> 
</body>
</html>

manifest.json
{
   "background_page": "background.html",
   "description": "\u53F3\u30AF\u30EA\u30C3\u30AF\u3088\u308A\u6A19\u6E96\u7684\u306A \u753B\u50CF\u7528HTML \u3092\u53D6\u5F97\u3057\u307E\u3059",
   "icons": {
      "128": "icon128.png",
      "16": "icon16.png",
      "48": "icon48.png"
   },
   "name": "\u753B\u50CFHTML\u53D6\u5F97",
   "permissions": [ "contextMenus", "tabs", "http://*/*", "https://*/*" ],
   "version": "1.0"
}

まず最初にデベロッパーモードのチェックボックスをオンにします。そうすると、読み込み用のボタンが現れるので5つのファイルを配置したフォルダを選択します






ファイルを読み込んだ状態



詳細を表示した状態



background.html のリンクをクリックすると、非表示である background.html 用のデベロッパーツールが開きます( 通常は F12 でひらくもの )

id は、仮の id で、正式に登録されるとGoogle Chrome の環境フォルダ でダウンロードしたスクリプトを実行して、さらに extentions フォルダに入るとその中にあるはずです。

この拡張機能の要点

画像を右クリックすると、コンテキストメニューに登録した機能が表示されて、選択するとその画像を使用した HTML 記述がクリップボードにコピーされます。





クリップボードへのコピー

background.html はもともと非表示なので、コピーするために必要な入力エリアを作成しておいて、データをセットして選択して document.execCommand("Copy"); でコピーします

コンテキストメニューの追加

これは、API の処理なので、まず manifest.json で利用する API を宣言する必要があります。その上で、chrome.contextMenus.removeAll(); で既存のメニューを削除しておいて、chrome.contextMenus.create で作成します。

"contexts":["image"] の記述が、対象が画像のみであることを示しています。他には、 "page", "frame", "selection", "link", "editable", "video", "audio" というようなコンテンツを複数配列で指定する仕様になっています。

実際の処理

クリックすると、定義した function が呼び出されますが、その際に API から引数が渡されて、ある程度の情報をその場で利用する事ができます。この場合は、画像の URL を使って、IMG 要素を完成させています。

1) OnClickData
2) Tab

表示されているページへの通信

セキュリティ上の理由だと思われますが、直接表示しているページへのアクセスは禁じられており、メッセージを送る事によって互いに通信するような仕様になっているようです。

その中で簡単に background から呼び出せる方法がこの、chrome.tabs.executeScript を使った実行です。

この処理はメニューとは別の API 分類になるので、manifest.json で宣言しておく必要があります。

関連する記事

Twitter用埋め込みコードを取得する Google Chrome 拡張


posted by at 2013-04-01 02:24 | Comment(0) | ツール | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します