ブラウザのヘッドレスモードを使って、javascript の実行結果を取得してみる

2023年1月4日 22:11

　もしかしたらもっと簡単な方法があるのかもしれませんが、せっかく作ってみたのでメモっときます。同じ階層のディレクトリに
　● run.sh
　● index.html
　● main.js
の３つのファイルを作ったら、
　./run.sh
と実行するだけです。

run.sh

#!/bin/bash

# google-chrome の場所
CHROME="/opt/google/chrome/chrome"

# ブラウザで javascript 実行後の dom を取得
RAW=$("$CHROME" --headless --dump-dom index.html 2>/dev/null)

# 不要な部分を除去
ESCAPED=$(echo "$RAW" |
	grep -Poz '(?<=<div id="out">)[\s\S]*(?=</div>)' |
	sed 's/\x0$//')

# エスケープされた & < > を元に戻す
echo -n "$ESCAPED" |
	sed 's/&lt;/</g; s/&gt;/>/g; s/&amp;/\&/g'

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>

<body>
	<div id="out"></div>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

function out(s) {
	document.getElementById('out').textContent = s;
}

function main() {
	let s = '';
	let j = 0;

	for (let i = 0x20; i <= 0x7e; i++) {
		s += String.fromCharCode(i);
		if (++j == 0x10) {
			s += '\n';
			j = 0;
		}
	}

	s += '\n';
	j = 0;

	for (let i = 0x3041; i <= 0x3094; i++) {
		s += String.fromCharCode(i);
		if (++j == 0x10) {
			s += '\n';
			j = 0;
		}
	}

	return s;
}

let result = main();
out(result);

実行結果

$ ./run.sh
 !"#$%&'()*+,-./
0123456789:;<=>?
@ABCDEFGHIJKLMNO
PQRSTUVWXYZ[\]^_
`abcdefghijklmno
pqrstuvwxyz{|}~
ぁあぃいぅうぇえぉおかがきぎくぐ
けげこごさざしじすずせぜそぞただ
ちぢっつづてでとどなにぬねのはば
ぱひびぴふぶぷへべぺほぼぽまみむ
めもゃやゅゆょよらりるれろゎわゐ
ゑをんゔ

おしまい。

2023.1.6 追記
　gist のリンク埋め込みがまったく表示されないことがありましたので、note標準のコード表記にしました。

最後まで読んでいただきまして、ありがとうございました！