基礎の基礎
基本必要なのはmanifest.jsonというjsonファイル。
Chromeさんご用意のサンプルとかから記述をまなんでさっくり作れる。
アイコンとかも必要に応じて自分が作ったフォルダ内に突っ込めば読み込んでくれる。
公開するには$5かかるらしいので、ローカルで試して終了☆
Chromeさんのサンプル集はこちらから検索!
Sample Extensions – Google Chrome
https://developer.chrome.com/extensions/samples
参考URL
↓なんかいっぱい説明してくれているありがたいサイト。
ブラウザアクション | Chrome Extensions API リファレンス : http://dev.screw-axis.com/doc/chrome_extensions/guide/browser_action/
↓上記を見る前に見たサイト。
特定サイトだけで動く拡張なら下記ですぐできちゃう。
jQuery を使って 30 分で Chrome 拡張を作ってみた (フェンリル | デベロッパーズブログ) :
http://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html
↓clipboardについての注意書き
chrome-extension – Chrome Extension で content_scripts から clipboard を使う – Qiita : http://qiita.com/ororog/items/146b7cdac85a48690c1e
↓ホントはこういうの先に見てからやるもんだと思う
独自のブラウザー拡張機能を作成する: 第 1 回、Chrome を拡張する : http://www.ibm.com/developerworks/jp/opensource/library/os-extendchrome/
↓自分の環境の拡張の一覧はここ
とりあえずはクリップボードにアイコンワンクリックでURLコピーしたいんだけど、
まだアイコンとアラートが出ただけで感動しているところ。(アホみたいやけど)
アンダーバー使うな使うな言われて全然動かんかったけど、バックアップ用に_script.jsとか置いてたのがじゃまだっただけみたい。
続きはまたアイドルタイムに!!!
再開。
色々見てたら(全然見てないけど)現在アクティブなtabの内容は簡単に取れるらしい・
[html]
var text = tab.title + tab.url;
[/html]
そのものずばりなサンプル
demoのままだと改行が入んないからなんでだろ?とおもったらdivでむりくり編集可能にしているからだった。textareaに変更したらばっちすできました!
出来上がったファイル
↓出来上がったソースがこちら↓
■manifest.json
[html]
{
“browser_action”: {
“default_icon”: “logo.png”,
“default_title”: “**********”
},
“name”: “**********”,
“version”: “0.0.1”,
“manifest_version”: 2,
“description”: “ページのURLとtitleをブログに貼り付けやすいようにクリップボードにコピーする”,
“permissions”: [
“activeTab”
],
“background”: {
“scripts”: [“copy.js”],
“persistent”: false
}
}
[/html]
■copy.js
[html]
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
var text = tab.title +’\r\n’+ tab.url;
var copyArea = document.createElement(‘textarea’);
// copyArea.contentEditable = true;
document.body.appendChild(copyArea);
copyArea.innerHTML = text;
// copyArea.unselectable = “off”;
copyArea.focus();
document.execCommand(‘SelectAll’);
document.execCommand(“Copy”, false, null);
document.body.removeChild(copyArea);
});
[/html]
コメントを残す