2018年3月19日月曜日

はじめてのChromeExtension

この文書作成時のChromeバージョンは以下です。

  • 63.0.3239.132 (64bit)

関連記事

成果物

作りたいもの

世の中には絵がうまい人が溢れている。
のちのち資料として利用するために画像を保存するわけだけど、twitterに投稿されたオリジナルの画像をローカルに保存するのは結構手間。

  1. 画像を右クリックして画像アドレス(pbs.twing.com/media/xxxxxxxxxxx)をコピー
  2. 画像アドレスの末尾に「:orig」を付加してブラウザで表示
  3. 名前を付けて画像を保存で保存する

既存のものとしてはコンテキストメニューからオリジナル画像をDLするChrome拡張がいくつか公開されている。

これらの拡張は便利なのだが、デフォルトファイル名がいまいちで利用しにくい。
そこでユーザー名とツイートIDでリネームするChromeExtensionを作成しようとした。

はじめてのChromeExtension

以下は公式ドキュメントにだいたい書いてあることです。

ChromeExtension概要

ChromeExtensionはChromeに機能を追加するソフトウェアで、JavaScriptで動作する。
ChromeExtensionは主に以下のコンテキストから構成されているようだ。

  • Browser Action (Page Action)
  • Content Script
  • Event Page

これらのコンテキストをマニフェストファイルに記載することでChromeがこれを解釈できるようなる。
他にもOptionPageなどがあるようだが、メインは上記の3種類のコンテキスト。

Browser Action (Page Action)

ChromeExtension独自のHTMLページを表示する。
インストールすると右上に表示されるアイコンをクリックするとHTMLページがポップアップする。
Browser Actionは全てのページで利用することが可能で、Page Actionは特定ページでのみ利用できる。
Page Actionが利用できないときは、アイコンはグレーアウトする。1

manifestファイルにはBrowser Action か Page Actionのどちらか、または利用しない場合はどちらも記載しない。

manifest.json
{
  "name": "Extension Name",
  ...
  "browser_action": {
    "default_icon": {
      "19": "icons/icon19.png",
    },
    "default_title": "Title",
    "default_popup": "popup.html"
  },
  ...
}

Content Script

特定のページにスクリプトとスタイルシートを埋め込む。
埋め込んだページのDOM操作が可能。
ページ内のスクリプトとは独立して動作するので、ページが持っている関数などは利用できない。

manifest.json
{
    "name": "Extension Name",
    ...
    "content_scripts":[
        {
            "matches" : ["*://twitter.com/*"],
            "js":[
              "scripts/contentscript.js",
              "scripts/jquery-3.3.1.min.js"
            ]
        }
    ],
    ...
}

Event Page

バックグラウンドでスクリプトを動作させる。
目に見えないWebページが存在してそこにスクリプトが埋め込まれるイメージ。

manifest.json
{
  "name": "Extension Name",
  ...
  "background" : {
    "scripts" : ["scripts/background.js"],
    "persistent" : false
  },
  ...
}

persistentをtrueにすると Backgroud PageとなりChromeに常駐する。(常にメモリを食うので非推奨)

右クリックコンテキストメニューから Hello World !!

右クリックからこんにちは世界!

ディレクトリ構成

プロジェクトルートディレクトリにmanifest.jsonを配置する。
残りの配置は自由。今回は以下の配置とした。
アイコンはIncscapeで適当に準備した。(慣れてないので1時間かかった)

TwitterImageDL
┣ icon
┃ ┣ icon16.png
┃ ┣ icon19.png
┃ ┣ icon48.png
┃ ┗ icon128.png
┣ scripts
┃ ┗ background.js
┗ manifest.json

マニフェストファイルの記述

公式ドキュメントを読みながら必要そうなものを追加していく。

manifest.json
{
  "manifest_version" : 2,
  "name" : "Twitter Image DL",
  "short_name" : "Twitter Image DL",
  "version" : "0.0.0",
  "description" : "Download and rename original image in twitter.com.",
  "icons" : {
    "16" : "icon/icon16.png",
    "48" : "icon/icon48.png",
    "128" : "icon/icon128.png"
  },
  "background" : {
    "scripts" : ["scripts/background.js"],
    "persistent" : false
  },
  "permissions" : [
    "contextMenus"
  ]
}

スクリプト

スクリプトを書く。公式サンプルのContext Menus Sample (with Event Page)を参考に書く。Context Menus Sampleの方はEvent Pageに対応していないので、こちらを参考にすると詰まる。2
chrome.runtime.onInstalledイベントでコンテキストメニューを作成する。
イベントページ起動のタイミングでコンテキストメニューのonClickedイベントに世界とこんにちはを登録する。

background.js
function helloWorld(){
    console.log('Hello World !!');
}

chrome.runtime.onInstalled.addListener(function(){
    chrome.contextMenus.create({
        type: 'normal',
        id: 'helloWorld',
        title: 'hello world !!',
        contexts: [
            'all'
        ]
    });
});

chrome.contextMenus.onClicked.addListener(helloWorld);

デバッグ実行

chrome://extensionsにディレクトリをまるごとドラッグアンドドロップすると、インストールが完了する。
右上のチェックボックス「デベロッパーモード」を有効にして、「バックグラウンド ページ」をクリックするとイベントページを確認することができる。
拡張機能 - Google Chrome 2018-02-19 15.03.57.png (37.8 kB)

コンテキストメニューに作成したメニューが追加されていることを確認
image.png (17.3 kB)

実行するとConsoleが世界とこんにちはすることを確認
image.png (10.1 kB)

できた!
次はpbs.twing.comから画像をダウンロードする。


  1. 利用可能なら青バッジが付く仕様だったときもあったようだ。UI的にはアイコンはモノクロでないほうがよさそうだ。 

  2. chrome.contextMenus.createの引数プロパティのonClickがEvent Pageでは利用できないようだ。ドキュメントに書いてある。 

0 コメント:

コメントを投稿