chrome拡張にて入力欄のコピペ機能を作ってみる。

chrome拡張で、最初に作ってみたかった、入力欄のコピー＆ペースト機能を
作ってみた。Webアプリケーションなんかで入力欄がいっぱいあったりすると
コピーしたくなるときがあるのだけど、今までは、手で一つ一つコピーして
しのいでいた。

この苦労から解放されるのはうれしい。

これは、もっと、無図化しかと思ったけども、非常に簡単に作れた。
ほとんど今までの組み合わせでできた。

今回新たに登場したのは、localStrageだけ。
コピーした内容を保存する部分にlocalStrageを利用した。

使い方は簡単で、グローバル変数である、localStrageを利用して、

localStorage.setItem(KEY, VALUE);


localStorage.getItem(KEY);


とするだけ。
 
削除は、localStorage.clear();
でいける。


流れはこんな感じです。

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/set_page_color/popup.html?revision=33581&view=markup

このサンプルを参考にして、「コピー」、「貼り付け」というポップアップメニューを作成する。

また、上記サンプルを参考に、コピーするJavaScriptと張り付けするJavaScriptを作る。

エディットの中身の取り出しは、以前書いた。

http://ttimez.blogspot.com/2010/05/google-chrome-extensions_13.html

を利用する。

これで、コピペアプリケーションの出来上がりです。

多分、どこかに似たようなツールは公開されていると思いますが、万が一
欲しい人が多いようなら公開したいと思います。

Javaでデフォルトのタイムゾーンを切り替える

デフォルトのタイムゾーン設定を切り替える方法のメモ。

VMの引数に下記を与える。

java -Duser.timezone=JST　XXXXX

Google Chrome Extensions エディットに文字を入れる

前回書いた物を参考にして、入力欄に文字を入れ込むという
サンプルプログラムを作ってみる。
http://ttimez.blogspot.com/2010/05/content-scripts.html

とりあえず、Googleの検索文字列入力欄に「aiueo」という文字を入れてみる。
サンプルを書いて見た。

JavaScript自体あまり書いたことが無いので、
W3C CSS Selectors APIの仕様については、下記を参考にした。
http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

とりあえず、content_script.jsを下記のように書いてみたら、思ったとおり動作した。

====================================

// ==UserScript==
// @name          InputTextTest
// @namespace      http://ttimez.blogspot.com/
// @include        http://www.google.com/*
// @include        http://www.google.co.jp/*
// ==/UserScript==
(function (){
    var links = document.querySelectorAll('input[name=q]');
    for (var i = 0, len = links.length;i < len; i++) {
      var link = links[i];
      link.value=link.value+'aiueo';
    }
})();

====================================

また、’aiueo’の部分を日本語にするとうまくいかなかったが、content_script.jsを
UTF-8で保存したら、うまく動くようになった。

Content Scriptsのサンプル

ContentsScriptに関しては、下記の記事が非常にわかりやすく解説されていた。

第2回　User ScriptsとContent Scripts

CntentsScriptとはどういうものかというとhtmlを動的に書き換えてしまう
というような感じのイメージのものです。

例えは、URL文字列がリンク形式になっていないものをリンク形式に
変換するなんて事ができるための機能らしい。

この記事で、紹介されていたContent ScriptsのサンプルはGoogleの検索
結果の左側に、順位とアイコン(Favicon)を表示するというhtmlを埋め込むみたいな
サンプルになっている。

このContentsScriptをプラグインボタンを押した時に実行するように変更するには、
どうすればいいかをちょっと試してみた。

結論を言うと下記のようにスクリプトを実行するAPIを使えば
ボタンを押したときに実行するということが出来た
 chrome.tabs.executeScript(null, {file: "content_script.js"});

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/background.html?revision=42295&view=markup

具体的にいうと下記のサンプルにおいてOnClickedに実行するスクリプト
(上記サンプルでは背景を赤に変えるというスクリプトが実行される。)
を差し替えてあげれば意図した動作をしてくれました。

pageActionのサンプルプログラム

アドレスバーの内部にアイコンを表示し、そこでクリックイベントなどを発生させる
というのがpageActionという概念らしい。

http://code.google.com/chrome/extensions/pageAction.html


これのサンプルも３つあった。

一つ目は、ページの内部の文字列に反応してアイコンを表示させるサンプル。
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/pageAction/pageaction_by_content/

こちらは、sandwitchという文字列が本文にあった場合にアイコンが出現するサンプル。

2つ目は、URLの文字列をみてアイコンを表示させるサンプル。

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/pageAction/pageaction_by_url/

URLにgという文字が入っていたらアイコンが表示される。

3つめは、クリックイベントなどを割り当てるサンプルと動的にアイコンを生成してセットするサンプル。
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/pageAction/set_icon/

やはり、サンプルプログラムを実際に動かすとどんなことができるかが理解できるので
理解が早くなります。

新しいタブを開いた初期ページの変更

Google Chrome プラグイン開発では、下記のページを
カスタマイズできるようです。
・新しいタブのページ
・履歴のページ
http://code.google.com/chrome/extensions/override.html

このサンプルは2つあって、一つは、空白のページを作成する。
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/override/blank_ntp/

もう一つは、任意のURLに飛ぶサンプル

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/override/override_igoogle/

上のサンプルではigoogleに飛びます。

URLを開くだけのGoogle Chrome Extensionsサンプル

現在開いているページを印刷するボタンをつけるサンプルプログラムが下記にある。

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/print/

ここのサンプルプログラムを例えば下記のように書き換えてあげると
Google Chrome 上にこのブログを開くボタンを作成できる。

================================
<html>
<head>
<script>
  // Called when the user clicks on the browser action.
  chrome.browserAction.onClicked.addListener(function(tab) {
//    var action_url = "javascript:window.print();";
    var action_url = "http://ttimez.blogspot.com/";
    chrome.tabs.update(tab.id, {url: action_url});
  });
</script>
</head>
</html>
================================

Google Chrome Extensions関連の記事リンク

Google Chrome Extensions関連の日本語記事リンクをここにまとめておく。

・続・先取り！ Google Chrome Extensions

Google Chromeのアイコンサイズ

下記のページによれば、アイコンのサイズは、19ピクセル×19ピクセルの
BMP, GIF, ICO, JPEG, PNGが利用可能らしい。

http://code.google.com/chrome/extensions/browserAction.html

Google Chromeの背景色の変更とアイコンの文字情報変更サンプル

本日は、下記のページでも読みながら

 http://code.google.com/chrome/extensions/browserAction.html

下記のサンプルを動作させてみた。

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/

どうやらこのサンプルでは、下記のような感じで、
・拡張機能の部分のアイコンに文字列情報を出せる
(ここには、4文字までしか出力できないようだ)
・ページの背景色を変えられるというサンプルのようです。

ソースは、background.html内の下記の部分でクリックイベントを書いていて
クリックすると背景を赤にすると書いてある。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"});
  });
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

アイコンの文字列情報表示部分は「Badge」と呼ばれるらしく

chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

で文字情報部分の背景色を表示していて(上記の場合には、赤が背景色)

chrome.browserAction.setBadgeText({text:String(3)});

という部分で文字情報を入れているようです。