Google Chromeのエクステンション(拡張機能)で、WeChatのWeb画面を開くボタンを作ります。
前回はGoogle Chromeのアプリケーションを作りましたが、今回はメニューバーに表示されるボタンを作成します。
(ブラウザアクション：BrowserAction と呼ばれる機能です)
アプリケーションとは違いメニューボタンそのものが追加されるため、より少ないクリック数でWeChatのWeb画面を開くことができます。
WeChat(微信)
WeChat(微信)とは、中国のテンセント社のチャットアプリで、LINEやWhatsApp(Facebook Messenger)と同規模のユーザーを持つ世界的に有名なサービスです。
アプリだけで使うイメージが強いためあまり知られていませんが、WeChatにはブラウザで使えるWeb版のページが存在します。
■WeChat WebのページURL
https://web.wechat.com/
ファイルの動作は下記の3つです。
- Google ChromeのメニューバーにWeChatボタンを追加する
- ボタンをクリックすると新しいタブを開く
- 新しいタブでWeChat Webの画面を読み込む
必要なファイル
この機能を作成するために必要なファイル/フォルダは下記の5個です。
manifest.json
ファイル「manifest.json」のコードは下記です。
拡張機能の名称や許可する権限、アクセス先などの基本的な情報を書き込みます。
このファイルでは、ボタンの動作は「icon_clicked.js」を参照するよう指定しています。
適当なテキストエディタでこのテキストを書き込み、ファイル名を「manifest」に、拡張子を「JSON」にして保存します。
{
"name": "WeChat Web Butten",
"description": "WeChat Web quick start",
"version": "0.0.0.1",
"manifest_version":2,
"background": {
"scripts": [ "icon_clicked.js" ],
"persistent": false,
"matches": ["http://*/*", "https://*/*"]
},
"browser_action": {
"default_icon": {
"19": "icon_19.png",
"38": "icon_38.png"
},
"default_title": "WeChat Web Butten"
},
"permissions": [
"notifications",
"geolocation",
"background",
"activeTab",
"tabs",
"<all_urls>"
]
}項目の意味はそれぞれ下記のとおりです。
| 項目名 | 内容 | 備考 |
|---|---|---|
| name | そのアプリの名前です。アプリ画面と設定画面に表示されます。 | |
| description | 設定画面で表示される簡単な説明文です | |
| Version | アプリのバージョンです | 自由に入力してください |
| manifest_version | このファイルのバージョンです | 2以上の数字にしないとエラーが発生します |
| background | バックグラウンドの動作がある場合に記載します | 今回はJAVA Scriptを動かします |
| scripts | 実行するスクリプトを指定します | |
| persistent | 動作をバックグラウンドにするかどうかを指定します | "persistent": falseとするとイベントページが指定されます |
| matches | スクリプトの動作対象のページURLを指定します | |
| browser action | 機能の種類を指定します | ほかに「PageAction」と「App」があります |
| icons | アイコンファイルの設定です | |
| 19 | 19ピクセルのアイコンの意味です | |
| 38 | 38ピクセルのアイコンの意味です | |
| permissions | アクセス許可の設定です | 詳しくはGoogleのヘルプを確認してください |
icon_clicked.js
ファイル「icon_clicked.js」のコードは下記です。
このファイルでボタンをクリックしたときの動作を設定します。
適当なテキストエディタでこのテキストを書き込み、ファイル名を「icon_clicked」に、拡張子を「JS」にして保存します。
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({"url": "https://web.wechat.com/" }); });
Google Chromeへの読み込み
作成したファイルを一つのフォルダに入れます。
Google Chromeの設定画面を開き、「拡張機能」の画面を開きます。
画面一番上の「デベロッパーモード」にチェックマークを入れます。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。
先ほど作成したファイルの入っているフォルダを選択し、読み込みます。
読み込みが成功すると「拡張機能」画面上にアイコンが表示されます。
Google Chromeのメニューバー上にWeChatボタンが設置されます。
ボタンをクリックすることで、新しいタブでWeChat Webのログインページが表示されます。
完成です。
この拡張機能を作るにあたてっては、かなりの部分で下記サイトを参考にしました。
- Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
- Chrome拡張でツールバーからのHTMLページ表示 - Qiita
- Declare Permissions - Google Chrome
- Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG
