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が使えるみたいです。これは便利。