[ChromeExtension]右クリックからコンテンツをダウンロード

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

• 63.0.3239.132 (64bit)

> 関連記事関連記事

• はじめてのChromeExtension
• [ChromeExtension]右クリックからコンテンツをダウンロード（これ）
• [ChromeExtansion]コンテキスト間メッセージ通信

> 成果物成果物

• Twitter Image Downloader - Chrome ウェブストア
• Twitter Image Downloader – Firefox 向けアドオン
• GitHub

> やりたいことやりたいこと

twitterタイムライン上の画像のオリジナルイメージを右クリックからダウンロード可能にする。
以下のAPIを使う

• chrome.contextMenus
• chrome.downloads

> pbs.twing.comソースのときだけメニューを表示するpbs.twing.comソースのときだけメニューを表示する

contextMenus.createのプロパティを書く。
contextsをimageに絞り、画像の上だけでメニューを表示するように、
documentUrlPatternsで、twitter.comのみでメニューを表示するように、
targetUrlPatternsで、画像のソースがpbs.twimg.comの場合のみにメニューを表示するように変更。

background.js

chrome.runtime.onInstalled.addListener(function(){
    chrome.contextMenus.create({
        type: 'normal',
        id: 'downloadTwitterImage',
        title: 'download original image',
        contexts: [
            'image'
        ],
        documentUrlPatterns: [
            '*://twitter.com/*'
        ],
        targetUrlPatterns: [
            '*://pbs.twimg.com/media/*'
        ]
    });
});

> URLを指定してダウンロードURLを指定してダウンロード

downloads.downloadのAPIでソースのURLに:origを付加してDLする。

background.js

function downloadImage(info, tab){
    console.log(info);
    chrome.downloads.download({
        url: (info.srcUrl + ':orig'),
        saveAs: false
    }, function(id){downloadId = id;});
}

function renameDownloads(downloadItem, suggest){
    console.log(downloadItem);
    if(downloadItem.id !== downloadId) return;
    suggest({
        filename: downloadItem.filename.replace('_orig', '')
    });
}

chrome.downloads.onDeterminingFilename.addListener(renameDownloads);
chrome.contextMenus.onClicked.addListener(downloadImage);

saveAsプロパティをtrueにすると、ダウンロード時に「名前を付けて保存」ダイアログが展開するようになる。

> ファイル名を変更するファイル名を変更する

そのままDLすると拡張子がjpg_origとなり使い勝手が悪いので、downloads.onDeterminingFilenameイベントを使用して_origを取り除く。
downloads.downloadのコールバック引数でダウンロードIDが取得できるので、DownloadItem.Idと比較することで、今回ダウンロードしたもののみ変更することができる。

> permissionを更新するpermissionを更新する

downloads APIを利用するので、manifestのpermissionにdownloadsを追加する。

manifest.json

{
  ...
  "permissions" : [
    "contextMenus",
    "downloads"
  ]
  ...
}

以上でオリジナル画像のダウンロードが可能になった。
次はコンテキスト間を通信して、ユーザー名とツイートIDをDOMから取得する。