Chrome拡張機能:ダウンロードしたファイルをアップロードする

Chrome拡張機能:ダウンロードしたファイルをアップロードする

SN

5/25 16:30



はじめに


やりたいこと

以下の操作を自動化する。


Flickr等で見つけた自由利用可能な画像ファイルをダウンロードする。
アップロードフォームにダウンロードした画像ファイルを指定してアップロードする。



制限事項


たとえChrome拡張機能がダウンロードしたものでも、ローカルのファイルにはアクセスできない。
アップロードフォームのファイル選択ダイアログをChrome拡張機能から操作できない。


こうした制限から、メモリ上の画像データから送信データを作成し、アップロードフォームを使わずに送信する必要がある。


手順1:画像ファイルのパスを探す

写真共有サイトは、オリジナル画像を直接表示していない。通信量削減のため縮小したものが表示されているので、まずはリンクをたどってオリジナル画像のURLを取得する。(Flickrの場合は、右下のアイコン「Download this photo」にリンクがある。)

その際、画像ファイルが置かれているドメインを確認し、manifest.jsonのpermissionsに追加する。(Flickrの場合は、「https://c1.staticflickr.com/」など。)ワイルドカードが使えないので、連番が降られている場合はすべての番号を追加する必要がある。


手順2:画像ファイルのダウンロード

XMLHttpRequestのresponseTypeにblobを指定することで、画像ファイルをバイナリデータとして取得できる。


background.js
const DownloadBlob = (url) => {
const p = new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.addEventListener('loadend', () => {resolve(xhr.response);});
xhr.send();
});

return p;
}

const DownloadImage = async (url) => {
const imageFile = await DownloadBlob(url);
}




手順3:送信データを作成する


フォーム
<body>
<form>
<input type="file" name="file" value=""/><br/>
<input type="text" name="title" value="タイトル"/><br/>
<input type="hidden" name="session_id" value="123456789"/>
<input type="submit" name="submit" value="送信"/>
</form>
</body>




background.js
const formData = new FormData();
formData.append('file', imageFile, 'ファイル名');
formData.append('title', 'タイトル');
formData.append('session_id', '123456789');
formData.append('submit', '送信'); //これはいらないかも。



FormDataオブジェクトを作成し、name属性をキーに値を追加していく。

ファイルを追加する場合は、第三引数にファイル名を指定する。ファイル名はダウンロードしたURLから切り出してもよいが、自由につけることもできる。

上記のsession_idのように、非表示になっている値も漏れなく追加する。


手順4:データを送信する

作成したFormDataオブジェクトをフォームのURLに送信する。cookieを必要とする場合は、XMLHttpRequestのwithCredentialsにtrueを指定して、フォームを受信してから送信する。


background.js
const GetForm = (url) => {
const p = new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('Get', url, true);
xhr.responseType = 'text';
xhr.withCredentials = true;
xhr.addEventListener('loadend', () => {resolve(xhr.response);});
xhr.send();
});

return p;
}

const PostForm = (url, formData) => {
const p = new Promise(resolve => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'text';
xhr.withCredentials = true;
xhr.addEventListener('loadend', () => {resolve(xhr.response);});
xhr.send(formData);
});

return p;
}

const UploadImage = async (url, formData) => {
await GetForm (url);
await PostForm (url, formData);
}


Qiita - JavaScriptタグが付けられた新着投稿

JavaScriptのObject

SN

7/20 17:58



まずObjectとは

JSON形式で書ける変数(みたいなもの)です。←よく分かりません


ソース
var test = {
"aaa" : "bbb",
"ccc" : 0,
"ddd" : {
"eee" : "fff",
"ggg" : "hhh"
}
...

jQueryとJavaScriptの比較

SN

7/20 17:08

既存の古いページに合わせて、素のjavasciriptで頑張っていたら、

「jQuery使いなよ(笑)」って言われました。

ということで、(個人的には基礎を学びたいところもありjavascriptで書いてたんだけど・・・...

Mapを使ってオブジェクトの配列の重複を除外する。【Javascript】

SN

7/20 14:02



背景

バイト中に、mongodbからとってきたオブジェクトの配列から、valueが重複しているものを除きたいという場面がありました。僕がmapとfilterでゴリゴリやっていたのを見たCTOが「(少なくともこのシーンで...

Ext JS のアップグレードやAPI diffに関するページのリンクを並べてみる (Classic)

SN

7/20 13:29

Ext JSフレームワークは複数のメジャーバージョンがリリースされており、サポートが有効な間は最新ブラウザへの対応が継続的に行われます。2018年7月時点では、ver 4, 5, 6 の3つのバージョンに対するサポートが...

JavaScript配列+配列をするとjoin()される

SN

7/20 13:14



JavaScript配列+配列をするとjoin()される

Arrayに+演算子を適用したらどうなるのかという話です。

これにハマった人が嘆いていたので気になって調べました


論よりコード


sample.js
a=[1,2];
b=[3,4];...

for...of を使うなってAirbnbが言ってたから使わないようにしてたら慣れた

SN

7/20 11:31



概要

Airbnb の JavaScript Style Guide を適用する eslint のプラグイン eslint-config-airbnb を入れてコーディングをすると、 for ... of を使うなと怒られる。仕方ないので、map とか forEach とか every ...

(Part 7. Config .eslintrc.json) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb

SN

7/20 11:13



.eslintrc.json (DON'T use .eslintrc as file name. See here.)


{
"root": true,
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2017
},
"env": {
"browser": true,
...

Next.js Tutorial

SN

7/20 10:36



Next.js Tutorial


概要

Next.js を使って以下のことをやりたい場合の Tutorial です。


Server Side Rendering
静的ファイルへの出力



Getting Started

最初にプロジェクト用のファイルを用意します。

...

lodash/rangeを使わずにlodash/rangeみたいなことをする。

SN

7/20 09:22



背景

バイト先でTypescriptのテストを書く必要があって、非同期処理の関数を指定した回数繰り返し行いたい状況が生まれました。なんとなく僕はそういうときlodash/rangeを使って指定した要素数を持つ配列を作...

素数を求める

SN

7/20 07:36



素数のテーブルを作る

javascript で素数を求めるプログラムを書いてみました。特にテクニカルなことはやっていません。小さい数からその倍数を消していくというという総当り方式です。


getsosu.js

// mSos...

Hulu 同時字幕で英語学習

SN

7/20 06:24



Huluで英語字幕と日本語字幕を同時に表示させて英語学習が出来るChrome拡張機能を公開しました。


3秒巻き戻し機能。巻き戻し秒数は設定から変更できます。
再生速度の変更が出来ます。0.2倍速から2.0倍速まで...

ブラウザのタブに時計を表示

SN

7/19 23:59


tab-clock.html
<!DOCTYPE html>
<html>
<head>
<title>tab clock</title>
</head>
<body>
<script>
const element ...

Vue-test-utilsのpropsDataの基本的な使い方

SN

7/19 23:32



Vue-test-utilsのpropsDataの基本的な使い方

最新版はこちらで、Vue.jsのテストの書き方についてのハンドブックを公開させてもらっています。

この記事を読むと


テスト時にコンポーネントをwrapするときの...

JavaScriptに無名関数というものも即時関数というものも構文としては存在しない

SN

7/19 23:23

無名関数とは<おまけで即時関数も>という記事を読んでいると所々引用文になっていた。引用元はどこなのかと探してみたところ、次の記事を見つけた。

JavaScriptで即時関数を使う方法【初心者向け】 | Tech...

配列をシャローコピーに使えるメソッド

SN

7/19 22:36

配列をコピーする方法に

・ディープコピー

・シャローコピー

の2つある。

今回はシャローコピーについて


シャローコピーというのは、コピー元のオブジェクトとコピー先のオブジェクトがメモリ上の同...

GoogleAppsScroptでSlackbotを作る -Slash commandをトリガーに添えて-

SN

7/19 21:12



はじめに

先日、未来大×企業エンジニア 夏の大LT大会というものが函館で開催されまして、その際にGoogleAppsScript(GAS)の便利さを誇示するためにSlackbotを作って紹介したところ、今までのLTで最も好評(個人...

無名関数とは

SN

7/19 20:16



関数とは

同じ処理を定義し何度も使い回しができる形にしたもの。

<script>
function 関数名(){
処理
}
</script>



無名関数とは

関数名なしで関数を定義できるもの。

<script>
...

casperJsを使ってポップアップ画面でファイルアップロードするまで

SN

7/19 20:05



はじめに

casperjsを使ってログイン、ポップアップ画面、ファイルアップロード、までを実施したので、

その時のメモとハマったことをまとめておきます

casperjsインストールからログインまではCasperJSで...

BootStrap4でフロントエンド完結のpassword一致のバリデーションを実現する

SN

7/19 20:01



Bootstrap4公式のページでは、未入力に対するバリデーションはあったけど、パスワード一致のバリデーションはどうしたら実現できるのかの記述がなかったので、自分で作って見ました。
Bootstrap4では、以下のよ...

PWA来てるからカメラアプリ作れるんじゃね?と思ったら失敗した話

SN

7/19 16:18

※2018年7月現在の記事です

PWA使えばフロントエンドの技術だけでスマホアプリが作れるみたいなので、「これでカメラアプリ作ってみよ!」と思って挑戦したけど結局iOS11.4.1の時点ではそれは無理だったみたい...

スマホのブラウザで画像を圧縮してポストする

SN

7/19 16:13



この記事は


スマホのブラウザで画像を圧縮する手順メモです



したかったこと


スマホでブラウザから画像をアップロードさせたかったです
最近の高性能カメラだと画像サイズが大きすぎて非常に重くなってし...

JavaScript:関数を合成する関数

SN

7/19 11:59

前にもやりましたが、今回は違うアプローチで任意の数の関数を合成する関数composeを作ってみます。


二つの関数を合成する

まんまですが:

const compose2 = (f2, f1) => x => f2( f1( x ) );


二個の...

javascriptのepochを使用してsin波をリアルタイムプロットする

SN

7/19 08:44



目的

いろんな関数をリアルタイムプロットする


使ったもの

・epoch (javascriptライブラリ: https://epochjs.github.io/epoch/)

この公式サイトからzipファイルをダウンロードして、その中に含まれるte...

JavaScript のオブジェクトリテラルで重複した要素を全て削除してリストを作る

SN

7/19 02:52



目的

オブジェクトリテラルのあるキーが重複している場合、重複した要素を除外してリストを作りたいと考えました。

それも for loop なしで。




対象のリスト




someKey
value1




1
...


2
...

...

JavaScript のオブジェクトリテラルで重複した要素を一つにまとめてリストを作る

SN

7/19 02:50



目的

オブジェクトリテラルのあるキーが重複している場合、重複した要素を除外してリストを作りたいと考えました。

それも for loop なしで。




対象のリスト




someKey
value1




1
...


2
...

...

LSP4JでLanguage Server Protocol入門

SN

7/18 23:34



Language Server Protocolとは?

Language Server Protocl(LSP)とは、IDEやテキストエディタ―と、プログラミング言語に関連したツール間でやり取りを定めたプロトコルです。これにより、一つの言語サーバーを実...

Node.js でつくる Node.js ミニコンパイラ - 05 : ローカル変数を使う

SN

7/18 23:23



はじめに

「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本の影響で自分でもミニNode.jsインタープリターを作ってみました。

さらにポッドキャストの Turi...

easingを計算でやってみる

SN

7/18 22:59

CSSアニメーションでも各種JSのライブラリでも、easingはとても簡単にできるようになりましたが、

それらを使わずにJavaScriptで値を計算してやるのも面白いです。

昔ActionAcriptでやっていたことの復習...

Qiita記事解析システムを作ろう その2

SN

7/18 21:26



前回の投稿

Qiita記事解析システムを作ろう その1


概要

 投稿をQiitaの記事をGoogle Cloud Natural Languageに突っ込んでみる。

 サンプル数 1539件

 日時    2018-07-12 17:28:27 ~

 ...

Railsでファイルが選択されたらボタンを有効化する

SN

7/18 20:50



経緯

独学サイトでファイルをアップロードする際にfile_fieldにファイルを選択していない状態でアップロードボタンを押すとエラーになりました。

そもそも、ファイルが選択されてない状態であればボタンを...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で