読者です 読者をやめる 読者になる 読者になる

【学問のすすめ】中世ヨーロッパ写字生のように黙って静かに手を動かすブログ

語学系、IT系の「やってみた」ことを備忘録を兼ねて書いていきます。資格試験の話が多いです。

【できるかな】Chrome拡張機能を作ってみた:WeChatのWeb版にリンクするボタン(ソースコードあり)

JSON JAva Script ソースコードあり Chrome拡張機能

Google Chromeのエクステンション(拡張機能)で、WeChatのWeb画面を開くボタンを作ります。

f:id:pesia_one:20160330014437p:plain:w300


前回はGoogle Chromeのアプリケーションを作りましたが、今回はメニューバーに表示されるボタンを作成します。
(ブラウザアクション:BrowserAction と呼ばれる機能です)
アプリケーションとは違いメニューボタンそのものが追加されるため、より少ないクリック数でWeChatのWeb画面を開くことができます。

WeChat(微信)

WeChat(微信)とは、中国のテンセント社のチャットアプリで、LINEやWhatsApp(Facebook Messenger)と同規模のユーザーを持つ世界的に有名なサービスです。
アプリだけで使うイメージが強いためあまり知られていませんが、WeChatにはブラウザで使えるWeb版のページが存在します。

■WeChat WebのページURL
https://web.wechat.com/

f:id:pesia_one:20160324230153p:plain:w300

ファイルの動作は下記の3つです。

  • Google ChromeのメニューバーにWeChatボタンを追加する
  • ボタンをクリックすると新しいタブを開く
  • 新しいタブでWeChat Webの画面を読み込む

必要なファイル

この機能を作成するために必要なファイル/フォルダは下記の5個です。

  • manifest.json
  • icon_clicked.js
  • icon_19.png
  • icon_38.png
  • これら4つのファイルを格納するフォルダ

f:id:pesia_one:20160330013853p:plain:w300

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/" });
});

画像

サイズが上下左右とも38ピクセルと19ピクセルPNG形式の画像ファイルを用意します。(JPEG形式にも対応しているようです)

画像の名前をそれぞれ「icon_38.png」「icon_19.png」に変更します。

Google Chromeへの読み込み

作成したファイルを一つのフォルダに入れます。
Google Chromeの設定画面を開き、「拡張機能」の画面を開きます。

画面一番上の「デベロッパーモード」にチェックマークを入れます。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。

f:id:pesia_one:20160330014902p:plain:w300

先ほど作成したファイルの入っているフォルダを選択し、読み込みます。
読み込みが成功すると「拡張機能」画面上にアイコンが表示されます。

f:id:pesia_one:20160330014944p:plain:w300

Google Chromeのメニューバー上にWeChatボタンが設置されます。

f:id:pesia_one:20160330014437p:plain:w300

ボタンをクリックすることで、新しいタブでWeChat Webのログインページが表示されます。

f:id:pesia_one:20160330015157p:plain:w300

完成です。

この拡張機能を作るにあたてっては、かなりの部分で下記サイトを参考にしました。