今回は私が自作Chrome拡張機能を開発している際に、ハマったトラブルについてメモします。
やりたかったこと
Webサイト上の特定の要素をワンクリックでダウンロードできるようにしたかった。
ダウンロードリンクとは
HTML5では、以下のようにaタグに「download
」要素付きで定義することにより、
リンクをクリックした際に、ファイルのダウンロードするリンクを作ることができます。
<a href="<URL>" target="_blank" download>ダウンロードリンク</a>
また、download
要素は値がしていでき、以下のようにすると、「test
」という名前でファイルが保存されます。
<a href="<URL>" target="_blank" download="test">ダウンロードリンク</a>
ダウンロードできない原因
私の場合、前節の通りに設定を行っても、新しいタブで画像が開いてしまい、直接ダウンロードされないという問題が発生しました。
この原因は、Chrome 65から導入されたセキュリティ設定にあります。
これは、同じドメイン内のファイルしかdownload
が機能しないようになるものです。
ダウンロードファイルとアクセスしたドメインが一致している場合には、ダウンロード可能です。
例えば、「hogehoge.com」というサイトにアクセスした場合、以下のようなになっていれば、対象ファイル(http://hogehoge.com/image.png )のドメインとサイトのドメインが同じなので、ダウンロードできます。
<a href="http://hogehoge.com/image.png" target="_blank" download>ダウンロードリンク</a>
一方で以下のように、対象ファイルのドメイン(abcd.com)が、閲覧サイトのドメイン(hogehoge.com)と一致していないとダウンロード設定が機能しません。
<a href="http://abcd.com/image.png" target="_blank" download>ダウンロードリンク</a>
まとめ
この症状は、僕が自作Chrome拡張機能を作っている際にあったものです。
結構悩み、原因特定に時間がかかってしまったので、まとめておきました。
今回は必要ありませんでしたが、JavaScriptの知識もあるとデバッグなどがより捗ります。
HTMLやCSSの次のステップとして、学習をしてみてはいかがでしょうか。
お読みいただきありがとうございました。