Chrome extensionを開発するためのいくつかのポイント

今日はここでChrome extensionを開発するためのいくつかのポイントを書きたいと思います。

ポップアップウィンドウのリロード

Browser actionを登録すると、extensionはポップアップバルーンを開くためのボタンが表示されます。開発者は、manifest.jsonファイルの中で、ポップアップバルーンの中に描画されるHTMLファイルの名前を指定することができます。

一般的に、いくつかのJavaScriptファイルがポップアップバルーン内で使われるでしょう。HTMLファイルやいくつかのJavaScriptはいつロードされるでしょうか?はい、ポップアップバルーンを開く度です。もちろん、JavaScriptオブジェクトは、それが閉じられるときに破棄されるでしょう。

それ故に、ポップアップバルーンコンテキスト内のいかなる情報は、そのバルーンのライフサイクルを超えて保持されません。もしそのような情報がある場合は、それらをlocalStorageやCookie、またはbackground HTMLコンテキストとして格納すべきです。

ポップアップバルーンのサイズ

僕が自分のextensionを開発したとき、そのポップアップバルーンが正しく描画されないことに遭遇しました。その理由は、そのバルーンのサイズが絶対的に決定されなかったことにあります。僕はそのサイズ(特に高さだと思います)が自動的に計算されると期待していましたが、Chromeはそれを計算できず、そのバルーンは中途半端に開かれ、さらに継続して震えていました。

この状況を避けるために、CSSファイルを使ってポップアップバルーンのサイズを絶対的に指定すべきです。それはbodyの幅や高さかもしれませんし、各要素のそれらかもしれません。

Notificationのクローズ

NotificationはWebkitの機能を使って以下のコードで表示することができます:

var notification = webkitNotifications.createNotification(
    "./foobar.png",
    "A title of this notification",
    "Message of this notification"
);
notification.show();

加えて、”cancel()”関数を使って、開かれたNotificationを自動的に閉じることができます。

...
notification.show();
notification.ondisplay = function() {
    setTimeout(function() {
        notification.cancel();
    }, 5000);
};

Notificationを閉じるために、ユーザは何もする必要がありません。

吉川さんからのコメントを受け、修正しました。

テキストのクリップボードへのコピー

クリップボードにテキスト文字列をコピーするために、テキストフィールドとdocument.execCommand()巻数を使うことができます。

最初に、HTML中にテキストフィールドを配置する必要があります:


次に、クリップボードにコピーしたいテキストをセットし、そしてコマンドを実行します:

var text = "foobar";
$("tf").value = text;
$("tf").focus();
$("tf").select();
document.execCommand("copy");

重要なポイントとして、このテクニックはbackgroundコンテキストでも使用可能です。


これらのポイントは、 goo.gl URL Shortener extension内で使われているものです。そして、あなたの開発に役立つと嬉しいです。

このエントリーをはてなブックマークに追加

関連記事

Lunakey Miniケースの最終形です

Google Smart Home Summit '21のまとめです

Lunakey Pico ビルドガイド (Rev.1以降)

Lunakey Mini/Pico/Macroの設計をオープンにしました

Lunakey Picoを製作しました