Symfoware

Symfowareについての考察blog

Chrome拡張のパッケージングとイントラネットワーク内でのインストール

簡単なChrome拡張機能を作ってみました。
Chrome拡張から、外部リソースへのアクセスを許可する(permissions)

完成した拡張機能をパッケージ化し、インストールできるようにしてみます。



パッケージング



「設定」 - 「拡張機能」を選択。
「拡張機能のパッケージ化」をクリックします。

490_01.png


パッケージ化する拡張機能のフォルダを選択するダイアログが表示されます。
「参照」をクリックして、ディレクトリを指定。
「拡張機能のパッケージ化」をクリックします。
「秘密鍵ファイル」は未指定でOKです。

490_02.png


パッケージ化が完了しました。

490_03.png




インストール



出来上がった「chrome_extention.crx」をドラッグし、拡張機能画面にドロップします。

490_04.png


確認のダイアログが表示されるので「追加」をクリック。

490_05.png


拡張機能が追加されました。

490_06.png




アップデート




拡張機能を修正してみます。
script.jsを編集。わかりやすく「変更」と表示するようにしました。


  1. $(function(){
  2.     $("a").each(function(){
  3.         // aタグのhrefをチェック
  4.         var a$ = $(this);
  5.         var href = a$.attr('href');
  6.         
  7.         if(!href) {
  8.             return true;
  9.         }
  10.         
  11.         // サーバーに情報を問い合わせ
  12.         $.ajax({
  13.             type: "POST",
  14.             url: "http://192.168.1.102/sample.php",
  15.             data: {'href':href},
  16.             success: function(msg){
  17.                 if (msg == 'notfound') {
  18.                     return;
  19.                 }
  20.                 
  21.                 a$.html(msg + '番の記事(変更)!:' + a$.html());
  22.             }
  23.         });
  24.     });
  25. });




manifest.jsonのバージョン表記も1.1に修正しました。


  1. {
  2. "manifest_version": 2,
  3. "name": "sample",
  4. "description": "sample description",
  5. "version": "1.1",
  6. "permissions": [
  7.     "http://192.168.1.102/"
  8. ],
  9. "content_scripts": [
  10. {
  11.     "matches": ["http://symfo.web.fc2.com/*"],
  12.     "js": ["jquery-2.1.1.min.js","script.js"],
  13.     "run_at": "document_end"
  14. }
  15. ]
  16. }





再度パッケージ化します。
この時、秘密鍵ファイルに前回作成した時に出力したpemファイルを指定します。

490_07.png



新たに出力されたchrome_extention.crxをドラッグ&ドロップすると
ちゃんと最新バージョンに更新されました。

490_08.png


ちゃんと修正後の拡張機能が動作していることが確認できました。

490_09.png
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/10/30(木) 22:31:04|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<jQueryで処理完了時、画面上部にメッセージ(notification)を表示する | ホーム | Chrome拡張から、外部リソースへのアクセスを許可する(permissions)>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1517-abdd2922
この記事にトラックバックする(FC2ブログユーザー)