クラサーブなICTと共にクラサーブなICTと共にモバイルやアプリ作成を主なテーマに。旅行や料理や育メンも。「コンテントスクリプト」タグアーカイブ導入から公開まで13時間!Chrome拡張機能の開発[4of6]Chrome拡張のコードのうち、対象となるページの状態を直接読んだり変更したりできるものがコンテントスクリプトです。「manifest.json」で特別に宣言するんでしょうね。condlistに溜まった情報を文字列化してパソコンに保存する。admin導入から公開まで13時間!Chrome拡張機能の開発[5of6]本Chrome拡張は特定のページでのみ有効となるページアクションに対応したものです。ブラウザアクションというものもあります。いづれの場合にもオムニバー付近にChrome拡張のアイコンが現れてそのChrome拡張が有効であることをユーザに通知してくれます(アイコンの定義がないと通知されません)。ユーザがアイコンをクリックすると拡張機能が起動されます。ポップアップWindowはそうしたUIの一つです。本Chrome拡張でもポップアップWindowを出しています。見た目(html)と動作(js)のファイルで構成されます。admin導入から公開まで13時間!Chrome拡張機能の開発[6of6]最初の記事に書いた苦労したポイントについて補足したいと思います。苦労したポイント生のjavascriptではなく、jQueryを使えるようにするにはどうすればいい?対象ページの内容を変更する方法は?contentscriptによる方法とexecuteScriptがある?backgroundを含む拡張部分とcontentscriptとはDOMを共有しないので変数や関数が互いに参照できない。その場合の通信方法はどうするの?デバッグはどうすればいい?background.jsを含む拡張部分。contentscript部分。生のjavascriptではなく、jQueryを使えるようにするにはどうすればいい?これは「manifest.json」に明記すればよいです。例外として「popup.html」を見ていただければ分かるようにHTML中に記述しています。対象ページの内容を変更する方法は?contentscriptによる方法とexecuteScriptがある?「manifest.json」にcontentscriptとして宣言すれば「対象ページ」の内容を変更できます。jQuery使いなら「contentscript.js」でもjavascriptそのものではなくjQueryを使いたいはず。その際は「manifest.json」にcontentscript宣言に「jQuery.js」等を追加してあげればよいです。「対象ページ」でjQueryが使われている場合でも版数の違いなどを気にすることなく宣言できるそうです。バックグラウンドコードからexecuteScript関数を使って対象ページの内容を変更する方法もありますが、複雑な処理には向かないような印象でした。具体例については参照リンクを見ていただければと思います。backgroundを含む拡張部分とcontentscriptとはDOMを共有しないので変数や関数が互いに参照できない。その場合の通信方法はどうするの?リクエスト(メッセージ)のやりとりで実現します。拡張部分のコードとcontentscriptではリクエスト(メッセージ)のやりとりの際の引数が違います。デバッグ方法はどうすればいい?background.jsを含む拡張部分とcontentscript部分コンテントスクリプト部分については、対象ページを表示した状態でいつものデバッグツールを起動すればよいです。ある「page_backgound.html」をクリックした状態でいつものデバッグツールを起動すればよいです。ポップアップ部分についてはHTMLにスナップショットを表示するdivタグを用意しておいてデバッグ内容を表示するようにすればよいような。Chrome拡張は、作る楽しさ、使う楽しさが満載な仕組み以上、これまで各コードについてひとつずつソースコードを提示してきましたが、各コード(ファイル)の役割は次のようになると思います。background.js:ハブ的役割を持つコード。popup.js:利用者にユーザインタフェースを提供するコード。contentscript.js:対象ページを処理するコード。manifest.json:役割定義Chrome拡張開発によりいろいろできそうに思いました。誰かが作成した便利なものを探して使うのが、もっともコストがかからない便利な方法だと思います。自分のニーズや悩みにぴったり来るものがない場合には、javascriptやHTMLなどをちょっとかじっていさえすれば、とても便利な、世界でひとつしかないブラウザ環境が手に入ります。ページの文字が小さくてみえずらい場合には、ブラウザの機能を使って少しだけ大きな文字にすることもできますが、こうした拡張を作って好きなだけ拡大してみる。特定の英単語のみ拡大するような拡張機能も簡単に作成できます。Chrome拡張は、作る楽しさ、使う楽しさが満載な仕組みだと思います。日頃の行いハローワークの「求人情報検索」ページ以上です。ありがとうございました。admin導入から公開まで13時間!Chrome拡張機能の開発[3of6]バックグラウンドというのは「背景」とか「裏」とかいう意味ですが、Chrome拡張におけるバックグラウンドというのは、拡張機能におけるコアとかメイン機能とかハブ機能を置く場所になるでしょうか。MVC(Model、View、Control)でいえばModel部分ですかね。Googleのコードサンプルを見るとこのバックグラウンドだけのサンプルもあり、必須のコードのようです。本拡張機能においては主にリクエスト(メッセージ)のやりとりとアイコンをクリックしたときのイベントを掴むところに使っています。対象ページの読み書きおよびパソコンへの書き出し(保存)や読み込みはコンテントスクリプトに、UIはポップアップに任せています。パソコンへの書き出しや読み込みは、本来このバックグラウンドで行い、コンテントスクリプトとはリクエスト(メッセージ)のやりとりで情報交換すべきだったのかも知れません。簡単な機能なので今回はオプションに対応しませんでしたが、例えばオプションで、パソコンへ保存した情報をリストアップさせて、「削除」「削除しないが対象外にする」の処理させる場合、やはりハブ的な場所に保存されている方が便利だからです。admin導入から公開まで13時間!Chrome拡張機能の開発[2of6]今回作成公開したChrome拡張のコード(ファイル)の構成を以下に示します。Chrome拡張のコードの構成HWISCooker-manifest.json-background.js-popup.js-popup.html-images-HW_19.png-HW_48.png-HW_128.png-contentscript.js-jquery.jsとなっています。png)の役割はそれぞれのファイル名が示す通りですが、実際には「manifest.json」が全てを管理しており、役割とファイル名が関連付けられています。2}上記構成で示したファイル名の内、「manifest.json」に明記されないのは「popup.js」だけですが、これはpopup.html内で参照されているからOKなのでしょう。jQuery等の補助スクリプトを使いたい場合には、「manifest.json」に明記するようです。Pay)を試してきました。views当たり屋の今昔物語。Pay)を試してきました。