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タグが付けられた新着投稿

axiosを利用する本当に最低限のメモ

SN

9/23 10:58

コンソールに結果を出せればいいだけ。


axiosのインストール

本家サイトに書いてあるのでそのとおりにやればいい。

cd
mkdir axios_test
cd axios_test
npm install axios



WebだとCDNも利用できるみたい。...

ずぼらによるずぼらのための React Suspense

SN

9/23 10:17



この記事について

もうすぐ登場しそうな次期 React 17 の新機能 Time Slicing と Suspense を心待ちにしてる人、挙手して!

僕もその1人ですが、ネットサーフィン(死語?)してたら Building a Polyfill...

React 360のHello WorldをMac環境で動かしてみた

SN

9/23 05:49

ReactもVR向けのライブラリを提供しているとのことで、早速さわってみました。

参照:https://facebook.github.io/react-360/docs/setup.html

環境:Mac


インストールとセットアップ

npm install -g r...

UdemyでPWA入門をした

SN

9/23 01:29

クリエイティブ寄りなWeb制作会社でも、Progressive Web Apps(以下、PWA)の対応を行う案件が増えてきたようです。

弊社では、Nuxt.jsで開発する案件が多く、PWA導入の際は「pwa-module」を使用しているようで...

JavaScript正規表現について

SN

9/22 23:06



はじめに

この記事は自分用のメモです。

もし、のぞいてくださる人がいらしたら、みづらい部分があれば、どんどん指摘してください!


正規表現について

◼︎正規表現を利用するケースは主に3ケース

...

jQueryのattr()で属性をセットしたら、一括でvalue値が設定される。

SN

9/22 22:40

自分用のメモ。

やりたかった処理は、jQueryでDOM要素を取得したら、一つの要素ごとにhref属性のvalue値を入れ替えたかった。

jQueryのattr()を使用した結果、取得したDOM要素全てのvalue値が入れ替わってしま...

HTML + CSS + JSでエモいタイマー作り

SN

9/22 22:23

ブラウザ上で動くタイマーを作る機会があったのでここで紹介します。


つけた機能


EnterキーでStart/Stop
LキーでLapを表示
Rキーでリセット(すべて0に戻す)



使ったやつ


HTML5
CSS3
JavaScript


あとBoo...

現在使っているNuxt.jsのバージョンの調べ方メモ

SN

9/22 21:44

package.jsonでlatest記載しているとnuxt.jsのカレントバージョンが分からんなぁと思ったのでメモ


package.json
"dependencies": {
"nuxt": "latest"
},



色々な記事見てるとlatest表記推奨ってのもあ...

React + styled-components で CSS の transition を使う

SN

9/22 19:25

React + styled-components を触っている中で、スライドするボックスをどう作るかを考える機会がありました。

そこで、CSS の transition プロパティを、React + styled-components でどう使うかを調べてみたの...

Blender から GLTF を出し、 Three.js で使うまでの覚書 (アニメーション編1、ずん子さん編)

SN

9/22 19:01

Blenderは、GLTF(2.0)を出せます。

Three.jsは、GTLF(2.0)を、読めます。

以上。めでたしめでたし。

ということで、モデルメッシュ編の続きとして、アニメーション編・・の、その1です。

というかコレを...

ReduxでAPIの通信の状態を共通で扱うTips(feat. typescript-fsa)

SN

9/22 15:29

APIコールが発生する処理を行った時にローディング中かどうかを示す loading なり fetching なりのフラグを用意すること、結構あると思います。これを様々なActionごとに逐一準備するのだるいのでまとめて用意す...

javascriptの日本語入力ハンドリングについてのメモ

SN

9/22 15:27



日本語入力中であることを知る

日本語入力中はkeypressイベントが発火しないので、keypressイベントが発火していなかったときのkeyupイベントを日本語入力中とみなすことができる。

(keyupイベントはkeypr...

JavaScriptでクリーンアーキテクチャはどうすればいいのか(Repository編)

SN

9/22 13:16



Repositoryとは?


永続されるべきデータを取得するためのインタフェース

依存関係逆転の話はよくわかってない(後回し)
ひとまず、以下のLaborRepositoryから。


window.addEventListener("DOMContentLoaded"...

知らないとバグになる、JavaScriptがクセ者だと思う10の仕様

SN

9/22 07:26

JavaScriptって、動きが想定外な時ってありませんか?

思い込みで動かしていて、なんかバグが出ていると思うと実はJavaScriptの仕様だったということがいくつかあります。

「JavaScritpめ!」と言ってしまい...

本当にSSRする必要があるのか考えてみた話

SN

9/22 03:18



まえがき

今回タイトルにしたSSRというのは、Server Side Renderingのイニシャルで、広義にはテンプレートエンジンを用いてサーバーサイドでHTMLを生成する手法も含まれるとは思いますが、以下説明しているSSR...

FizzBuzzするものをKnockout.jsで作ってみた

SN

9/22 00:02



はじめに

フロントエンジニアとして働き始めて約半年経って、復習&自力でどこまで書けるのか掴むために、作ってみました。


書いたコード

HTMLのmain部分とJavascript部分だけ。


HTML
<main>
...

HTMLからAPIGatewayを呼出し、レスポンスを表示

SN

9/21 19:38

エヌシーアイ総合システムのmizu-ponです。

今回はHTMLからSDKを用いてAPIGatewayを呼出すまでの話です。


今回使用するAPIGawewayの仕様


APIGatewayのメニューからSDKをダウンロードできます。



適当なフ...

riotでjQueryを使わない複数行の三点リーダの実装

SN

9/21 19:21



背景

長い文字列は末尾を三点リーダに変換したい

例えばECサイトとかで商品が一覧で並んでいるときに、

長ーい商品名のアイテムだけ高さがずれたらダサい。

僕.「cssだけでできる?」

G .「IEは対...

Promiseでネストが深くなるのを防ぐための方法(やや黒魔術)(の提案)

SN

9/21 18:08



概要


Promiseは便利だが、うまくモデリングしないと(時にうまくモデリングされていても)、深いネストとアロー関数の海におぼれてしまうことがある
コンストラクタのresolveとrejectへの参照を保管しておく...

JavaScriptでクリーンアーキテクチャはどうすればいいのか(initializer編)

SN

9/21 15:23



initializerとは


クリーンアーキテクチャにおけるアプリの初期化部分


以下、持続可能な開発を目指す ~ ドメイン・ユースケース駆動(クリーンアーキテクチャ) + 単方向に制限した処理 + FRP より引用




...

Rails5/webpacker/ECMAScriptメモ

SN

9/21 12:22

rails5でwebpackerを使ったりviewに直接jsを書いたりしてます。どこでどの仕様までのjsを使っていいのかいつも迷うので纏めておくもの


ECMAScript


実装であるjavascriptに対し、言語仕様を指してECMAScriptと...

JavaScriptでクリーンアーキテクチャはどうすればいいのか(Presenter編)

SN

9/21 11:09



Presenterは?


View=Webページ(html)一歩手前の「Interface Adapter」


Viewを動的に書き換える 役割

つまり、引数の入力値を最終的にDOMへ


Viewへの操作は基本、idに紐付いたNodeListオブジェクト


idさ...

自分用: tscのtarget optionで排出されるClass形式纏め

SN

9/21 10:45



はじめに

npmパッケージで提供されたes6形式のclassをextendsした際にハマったのでこの辺を整理してみようと思う


ソースファイル

class Base {
}

class SubClass extends Base {
}



target es6 &&am...

始めよう React(基礎編)! Part 1 - React とは

SN

9/21 09:36

これからReactについて、書いていく予定です。

毎週1〜2回投稿する予定になります!

興味がある方是非ご覧下さい!

本章はReactの基礎を紹介して行きます。

よろしくお願いします。


Reactとは

...

Storyblokのdocs翻訳チャレンジその14!!!

SN

9/21 00:30



コンテンツデリバリAPI

コンテンツデリバリAPIはStoryblokのコンテンツにアクセスする最も簡単な方法です。

以下の言語について、コードのスニペットを容易しました。これを見ればどれほどシンプルかが分かる...

適当に継承

SN

9/21 00:29

適当に書いたAnimalクラスを継承して適当に移植したサンプル。


HSP
#runtime "hsp3cl"
#cmpopt varinit 1

#module Animal _name,virtualBark,isGrow
#define super(%1) \
_name=%1 :\
vir...

Storyblokのdocs翻訳チャレンジその13!!!

SN

9/20 23:56



データソースエントリ


複数のデータソースエントリを取得する


エンドポイント

GET /v1/cdn/datasource_entries



パラメータ




名前
説明




token(必須)
publishedだけ欲しければpublicトークン
d...

JAMstack - クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップによるモダンなWeb開発アーキテクチャ

SN

9/20 23:35

JAMstackの概要を意訳しました。

誤りやより良い表現などがあればご指摘頂けると助かります。

原文: https://jamstack.org/



「スタック」について言及する際、OS、特定のWebサーバ、バックエンドのプロ...

JavaScript Tips: 数値・文字列を固定長にフォーマット

SN

9/20 22:20

固定長にフォーマットしたいことがある。例えばこんな感じ:

" hello"
" world!"


C言語では sprintf, python では string.format が使えるんだけど、JavaScript の場合は多分なくて、外部ライブラリを使...

1週間でNext.js とReact.jsでSPAを作って公開するまで

SN

9/20 22:12



作ったもの

日本人起業家のおすすめされている本は日本語で検索するとよく出てきますが、海外の方がおすすめされている本って日本語で検索してもあまりヒットしませんよね ....

そこで私が海外のサイトで...

PR:bitflyer

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