hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

Chromeの拡張でもつくるか。のメモ

基礎の基礎

基本必要なのは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]

そのものずばりなサンプル

How to copy to clipboard in Chrome extension

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]


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください