分123この記事で取り上げているAPIは現在と使い方が異なっていたり,使用できなくなったものを含んでいます。APIは最新のChromeでは使用できなくなっています。Extensions』をご覧ください。前回はExtensionsの作り方からドキュメント,開発ツールについて紹介しました。今回は前回作成したSBMカウンタを改良しながら各APIの使い方を見ていきます。前回の復習とバグフィックス前回作成したSBMカウンタは,見ているページのURLのソーシャルブックマークサービスでのブックマーク数を表示するExtensionでした。ToolstripsというAPIを使用しましたが,このToolstripの使い方に2つのバグがあったので,まずはこちらの修正を行います。一つ目のバグは,ウィンドウを2つ以上開いた場合に発生します。Toolstripはウィンドウに対して設置されるので,ウィンドウを複数開けばToolstripも複数開かれることになります。APIのonSelectionChangedイベントは自分のウィンドウ以外でのイベントも受け取ってしまうので,バックグラウンドウィンドウのToolstripも一緒に更新されてしまいます。これを防ぐため,ウィンドウの一致を確認することにします。});});続いて,もうひとつのバグはページを読み込んだ際に発生します。onUpdatedイベントは読み込みの開始(loading)と終了(complete)の2回発生するので,前回のコードでは2回書き換えを行ってしまっていました。よって,読み込み状態がloadingの場合だけ処理を行うように修正します。}});なお,この2つの修正は前回の記事が公開された時点でパッケージとソースには反映済みとなっています。Pagesの使い方を見ていきます。Actionsを使用するためにmanifest.jsonにその定義を書きます。対象とするサービスは前回同様で,はてなブックマークとdeliciousです。],idはそのpage_actionsの中でそれぞれがユニークである必要があります。nameはアイコンにマウスオーバーした時などにツールチップとして表示されます(ただし,これを動的に変更することも可能です⁠)⁠。iconsはアドレスバー(OmniBox)の中に表示される画像で,複数定義しておくことができ,どの画像を設置するか制御できます。画像が16×16pxよりも大きい場合は自動的にリサイズされます。Pagesを定義します。Pagesは1つの拡張に対して1つだけ持てる,表には現れないページで,バックグラウンドでの処理を一手に引き受けるAPIです。Actionsの制御に適しています。Actionsの制御用のJavaScriptを記述します。コードはサービスの定義,アクションの登録,アクション時の動作の2つのパートで構成します。}];このサービスの定義はToolstripsで使用している定義と共有する形にしてもよいのですが,ここでは個別に定義しています。Actionsはアドレスバー(OmniBox)の表示領域を狭くするので,実際に使用するかどうか慎重に決める必要があります。Actionsを各タブに設置する処理を記述します。APIのenableForTabを呼び出します。enableForTabの第1引数はmanifest.jsonで定義したid,第2引数はタブID,URL,タイトル,アイコンID(manifest.jsonで指定したもの)をもったオブジェクトになります。タイトルとアイコンIDは省略可能です。これでアドレスバー(OmniBox)へのアイコンの登録ができました。続いて,アイコンをクリックした際のアクションを定義します。replacer);}chrome.pageActionsの各IDに対してaddListenerでイベントを登録しています。4ではリスナー関数は2つの引数をもつように変更されています。4の実装に合わせるための互換コードを入れています。あとはタブIDからTabオブジェクトを取得し,そのタイトルとURLでブックマークの追加画面へ遷移させています。APIの基本的な使い方は以上となります。SBMカウンタ著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。