https://nakamura001.hatenablog.com/entry/20110319/1300539054

Chrome Extensions作成の勉強としてまずは簡単なものとして、Firefoxで良く使っているMake Linkの様なものを作ってみました。

Soylent Red | Make Link
http://www.soylentred.net/projects/make-link

Make Linkは現在開いているWebページのタイトルとURLを以下の様な感じでクリップボードに保存するアドオンです(フォーマットは変更可能)。

Webページのタイトル
WebページのURL

manifest.json

{
   "content_scripts": [ {
      "js": [ "jquery-1.3.2.min.js" ],
      "matches": [ "http://*/*", "https://*/*" ]
   } ],
  "name": "MakeURL",
  "version": "1.0",
  "description": "",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ]
}

popup.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style>
body {
	min-width: 300px;
	min-height: 50px;
}
#url {
	width: 280px;
	height: 70px;
}
</style>
<script>
$(document).ready(function() {
	//$("#info").text('test');
	chrome.tabs.getSelected(null, function(tab) {
		var url = '';
		url += ">>\n";
		url += tab.title+"\n";
		url += tab.url+"\n";
		url += "<<\n";
		$("#url").text(url);
		$("#url").select();
	});
});
function click() {
  window.close();
}
</script>
</head>
<textarea id="url"></textarea>
<div id="info"></div><!--Debug用の出力などに利用-->

クリップボードに貼り付けるのは方法がちょっと見つからなかったのでtextareaに表示する様にしてみました。フォーマットは「はてなダイアリーの引用用」のフォーマットにしました。

同じフォルダにjQueryのファイルを置いて、manifest.jsonのcontent_scripts読み込むJSファイルを記述するとExtensionの中でも問題なくjQueryが使えるみたいです。これは便利。