この文書作成時のChromeバージョンは以下です。
世の中には絵がうまい人が溢れている。
のちのち資料として利用するために画像を保存するわけだけど、twitterに投稿されたオリジナルの画像をローカルに保存するのは結構手間。
- 画像を右クリックして画像アドレス(pbs.twing.com/media/xxxxxxxxxxx)をコピー
- 画像アドレスの末尾に「:orig」を付加してブラウザで表示
- 名前を付けて画像を保存で保存する
既存のものとしてはコンテキストメニューからオリジナル画像をDLするChrome拡張がいくつか公開されている。
これらの拡張は便利なのだが、デフォルトファイル名がいまいちで利用しにくい。
そこでユーザー名とツイートIDでリネームする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に常駐する。（常にメモリを食うので非推奨）
右クリックからこんにちは世界！
ディレクトリ構成
プロジェクトルートディレクトリに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にディレクトリをまるごとドラッグアンドドロップすると、インストールが完了する。
右上のチェックボックス「デベロッパーモード」を有効にして、「バックグラウンド ページ」をクリックするとイベントページを確認することができる。
コンテキストメニューに作成したメニューが追加されていることを確認
実行するとConsoleが世界とこんにちはすることを確認
できた！
次はpbs.twing.comから画像をダウンロードする。
