WebサイトのデータをダウンロードするChrome拡張の開発方法とサンプル

Aug 15, 2021 01:00 · 1035 words · 3 minute read JavaScript Chrome

Webページ上のデータをテキストファイルで保存したい場面がありました。

データ取得といえばクローラーを使ったスクレイピングが定番ですが、今回は必要なデータをテキストファイルの形式でダウンロードするChrome拡張を作ってみました。

次に同じようなものが必要になったときのために、メモを残しておきます。

目次

やりたいこと

Webページ上の特定箇所の情報をテキストファイルとして保存する。

作ってみる

完成したChrome拡張機能のソースコード全体はこちら。

kapiecii/chrome-extension-download-sample (github.com)

とてもシンプルなサンプルではありますが、処理内容についてのメモを残しておきます。

雛形

以前作成した、こちらのChrome拡張をひな形にしてはじめます。
こちらのひな形の「Chrome拡張機能のアイコンをクリックしたときに処理を実行する」という部分を流用します。

kapiecii/hareotoko (github.com)

要素の指定

最近のブラウザには、開発者向けの機能があります。
開発者向けの機能には、HTML内の特定の要素を指定するSelectorをコピーしてくれる機能があるので、今回はこの機能を使います。

  1. ブラウザの開発者機能を起動し、使いたい要素を指定
  2. 指定した要素を右クリック-
  3. メニューから「コピー」を選択
  4. 「Selectorをコピー」を選択

querySelectorAll()にコピーしたselectorを渡します。

let aTags = document.querySelectorAll('#post-list > li > a')

Document.querySelectorAll() - Web API | MDN (mozilla.org)

ダウンロード

目的のデータをテキストファイルとしてダウンロードします。
ダウンロードしたい情報を含む「text」という変数からBlobオブジェクトを作り、Linkを作成してclick()を実行します。

let blob = new Blob([text], {type: 'text/plain'})
let link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = 'data.txt'
link.click()

Blob - Web API | MDN (mozilla.org)

サンプル

出来上がったサンプルがこちら。

kapiecii/chrome-extension-download-sample (github.com)

script.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
	if (request == 'Action') {
		downloadLinkTitle()
	}
})

const downloadLinkTitle = () => {

	let aTags = document.querySelectorAll('#post-list > li > a')
	let text = ''

	for (a of aTags){
		text += a.innerText + '\n'
	}

	console.log(text)
	let blob = new Blob([text], {type: 'text/plain'})
	let link = document.createElement('a')
	link.href = URL.createObjectURL(blob)
	link.download = 'title-list.txt'
	link.click()
	
}

使い方

ブラウザを開発者モードにして拡張機能を追加し、このブログのトップページで拡張機能のアイコンをクリックすると、記事の一覧情報がテキストファイルとしてダウンロードされます。

最後に

Webページ内の狙ったデータをテキストファイルでダウンロードするChrome拡張を作りました。

最近では多要素認証を使うWebサイトも増えています。
そういった場合はクローラーを作るのも面倒なので、サクッとChrome拡張を使って定型的な操作をするのもありなのではないでしょうか。

tweet Share