非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

Chrome拡張機能の開発: 自作拡張機能をパッケージ化して読み込む

      2017/09/09

これまでローカル環境で作成したChormeの拡張機能を3回に分けて説明してきました。

 

ローカルのファイルを読み込んで拡張機能として呼び出すと、ブラウザを立ち上げるたびに以下の警告メッセージが現れてしまいます。

 

これを解消するためには、ファイルをパッケージ化して配布できるようにする必要があります。今回はその手順について書きます。

パッケージ化するプログラムは前回作ったヤツを使います。以下のようにカレントページのタイトルとURLを表示させるやつです。

[ad#top-1]

まず最初に拡張機能設定画面を開きます。メニューから「その他ツール」-「拡張機能」を選択します。

 

拡張機能設定画面になったら、上部にある「拡張機能パッケージ化…」ボタンを押します。

 

以下のようなウィンドウが現れるので、上段の「参照…」ボタンを押します。

 

パッケージ化するディレクトリを指定し「OK」ボタンを押します。

 

すると、テキストボックスに先ほど指定したパスが現れます。「秘密鍵ファイル」欄は何もいじらず、下の「拡張機能のパッケージ化」をクリックしましょう。

 

下のメッセージが現れたら成功です。「OK」ボタンを押してください。

 

元ファイルのフォルダ内に、パッケージ化された2つのファイルが生成されます。そのうち、拡張子「.crx」だけを使います。

 

crxファイルを、Chromeの拡張機能設定画面にドラッグアンドドロップします。

 

以下のメッセージが現れるので、「拡張機能を追加」ボタンを押します。

 

すると、拡張機能が追加されるようになります。この状態であればChrome起動時に毎回警告を受けなくなります。

 

僕のブログのトップページ上で拡張機能を開いた図です。ちゃんとタイトルとURLをキャッチしてくれています。

 

ということで、4回に分けて基本的な流れを説明しました。あとは目的に合った拡張機能を作ればよいわけです。僕はGoogleブックマークみたいなものを作ろうと思っています。出来たらこのブログで紹介したいと思います。

MicroSoft Edge で拡張機能開発する方法も書きました。jsonファイルを別途用意すればプログラムはChormeと共通化できますよ。

 

[ad#ad-1]

スポンサーリンク

 - Chrome拡張機能開発