アプリ開発の記録: はじめてのChromeExtension

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

63.0.3239.132 (64bit)

> 作りたいもの作りたいもの

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

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

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

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

> はじめてのChromeExtensionはじめての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が利用できないときは、アイコンはグレーアウトする。¹

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 !!右クリックコンテキストメニューから 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に対応していないので、こちらを参考にすると詰まる。²
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にディレクトリをまるごとドラッグアンドドロップすると、インストールが完了する。
右上のチェックボックス「デベロッパーモード」を有効にして、「バックグラウンドページ」をクリックするとイベントページを確認することができる。

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

実行するとConsoleが世界とこんにちはすることを確認

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

利用可能なら青バッジが付く仕様だったときもあったようだ。UI的にはアイコンはモノクロでないほうがよさそうだ。 ↩
chrome.contextMenus.createの引数プロパティのonClickがEvent Pageでは利用できないようだ。ドキュメントに書いてある。 ↩

アプリ開発の記録

Pages - Menu

2018年3月19日月曜日

はじめてのChromeExtension

> 関連記事関連記事

> 成果物成果物