ＳＱＬの窓
<< Windows の システ… | TOP | Android : 画面定義… >>

2013年01月26日


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

 


Manifest のバージョンが『2』に変更されて、以前のものが動かなくなっていたので変更しました。"manifest_version":2 という記述が必要になっていますが(省略していると 1 になるらしいですがエラーが出て登録できません)、変更箇所はそれだけではありません。

拡張としては、実用というよりサンプルとして作ったものでしたが、以前は処理部分を HTML で書く事ができました。しかし、"manifest_version":2 では、js ファイルでスクリプトのみで記述する事になっていました。ですから、コンテンツ等は全て createElement で作成するよう変更が必要でした。また、その js ファイルの Manifest での指定の仕方も変更されていました。

▼ 以下は変更後の manifest.json です。

{
   "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",
   "background": {
     "scripts": ["action.js"]
   },
   "manifest_version": 2
}


description と name を unicode で記述していますが、できるだけ問題の出る事を避けたかったのでこうしています。変換は、こちらの unicode ボタンで変換できます。内容を確認したい場合は、開発者ツールの console.log を使うといいと思います。

インストール方法は、Google Chrome の拡張 / 1クリックで Javascript をオン・オフする を参照して下さい。



Google のサンプルページ

http://developer.chrome.com/extensions/samples.html

action.js(utf-8n)

// *************************************************
// クリップボードへコピー
// *************************************************
function clip_Copy(str) {
	text.value = str;
	text.select();
	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) {}

var text = document.createElement("textarea");
document.body.appendChild( text );

// 右クリックメニューを作成
chrome.contextMenus.create(
	{
		"title": "画像HTML取得",
		"contexts":["image"],
		"onclick": active_Action
	}
);
タグ：Google Chrome
【Google Chromeの最新記事】
posted by lightbox at 2013-01-26 02:55 | Google Chrome | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり