as 5a3i: 6月 2012

2012年6月24日日曜日

【chrome extension】chrome拡張ソースの場所

chrome extensionの開発をしているときに、
「このエクステンションのソース見たいなー」なんてよく思う。
そんなときはソースを見ちゃえばいい。

【macの場合】

~[username]/Library/Application Support/Google/Chrome/Default/Extensions

【windowsの場合】

[username]\AppData\Local\Google\Chrome\User Data\Default\Extensions\

ソース見てると「ソースの配置が超きれい」とか
「こんな簡単に書いちゃうか」とか色々参考になります。
ぜひお試しあれー。

2012年6月22日金曜日

【JavaScript】確認ダイアログ表示

ユーザにフォームの入力をしてもらい、最後に確認をしたいとき、
JavaScriptでダイアログ表示を行うとよい。

以下の入力フォームでボタンが押されたら
入力内容を確認するようなダイアログを実装してみよう。

--フォームの実装--
<body>
<span>入力してね</span>
<form name="form1">
<input type="text" name="text1" id="text1">
<input type="button" value="ボタン" onClick="check();">
</form>
</body>

onClick="check();"⇒ ボタンを押したらcheck()がスタート。
check()内の処理のイメージとしては
①"内容はこんな感じでいいかな？"的メッセージを表示
②OKを押したら"内容変更しました"的メッセージを表示
③キャンセルなら何もせずダイアログを閉じる
それでは実装。

--JavaScriptの実装--
<script>
function check(){
var text1 = document.getElementById("text1").value;
var res = confirm("入力内容は「" + text1 + "」で良いでしょうか？");

if(res == true){
// OKを選択したときの処理
alert("変更しました。");
}
}
</script>

confirm()の時点でダイアログを表示してくれて、
リアクションがOK(true)なら~、キャンセル(false)なら~って感じでいけるんですね。
らくちん、らくちん。

2012年6月21日木曜日

【Javascript(Chrome Extension)】タブの情報を取得する

Chrome拡張開発でタブの情報をしたいときは以下のようにしようー

１ manifest.json⇒permissions⇒tabsの追加
２操作したいファイル上でchrome.tags.* APIを用いる

これだけ。。
意外と１番忘れるとAPI見ながらなんでなんで？？状態に陥るので、
１番をお忘れなくー

１ manifest.json⇒permissions⇒tabsの追加
--manifest.json--
{
"name": "拡張名",
...
"permissions": [
"tabs"
],
...
}

２操作したいファイル上でchrome.tags.* APIを用いる
ひとまずこのAPIでできることを一覧にしてみた。
これみてマニュアル(Chrome API)見てコード書くみたいな感じで。

選択中のタブの情報げっと	getSelected
特定のタブの情報げっと	get
タブを新しく作る	create
タブを削除する	remove
スクリプトを実行	executeScript

タブだけでなく、ブックマークの操作もできたりしちゃうのがChrome拡張のすごさだが、
そこいらの話は次回に。

2012年6月20日水曜日

【Javascript】オブジェクト表示/非表示の切り替え

同一テンプレートで正常時、エラー時の出し分けを実装したいときに
Javascript上で出し分けちゃおうということで。

次のhtmlをサンプルにする。
フォームの中が空なら「入力してね」を表示する。



<body onLoad="hideErrorParts();">
<form name="form1">
<input type="text" name="text1">
<input type="button" value="ボタン" onClick="checkForm();">
</form>
<span id="error">入力してね</span>

--以下の２点を実装する--
•ソースが呼び出されたときは「入力してね」は非表示。
•テキストボックスに入力してボタンを押した時にテキストボックスが空の場合に「入力してね」を表示。
実際のスクリプトが下記のようになる。

<script>
function hideErrorParts(){
document.getElementById("error").style.display = "none";
}

function checkForm(){
var content = document.form1.text1.value;

// テキストボックスの中が空なら表示する
if( content == "" ){
document.getElementById("error").style.display = "block";
}
}
</script>

display属性を"none"か"block"に変えちゃえば出し分けできるということですな。
簡単なバリデーションに使えそうです。（もちろんサーバ側でもバリデーションは実装しなきゃだが）