2022/2/8 LT 資料「Hack-a-Wordle」
https://gyazo.com/9a3c25819ccc49eda79a2b88b8564f7e
「Wordle 向けブラウザ拡張を作って楽しく学ぶ」
元俳優
今日は Wordle の話
Wordle 知ってますか
今日の答えとなる5文字の英単語を6ターンのうちに当てる
単語リストは13000語（単語リストになければ不正解）
https://gyazo.com/ee4e212c4fcbd44c95dfe458338291c4
Wordle 知ってますか
https://gyazo.com/149fbd9177d4bba61d096615000387c8
SOARE：S は単語に含まれるが位置が違う、O は位置も合っている
MOSSY：MOがアルファベットも位置もあっている、4番目のSは位置も合っている
3番目の S は合っていない、
MOIST：🎉 すべて正解
実は最近 NY Times に買われた
https://gyazo.com/0444b36fc6f201c8a28d92104fb10480
Web パフォーマンスも良い
Wordle is:
- built in web components
- ~100K of JS (~57K of which is GTM, et tu Google?)
- interactive in < 3s on a 4G connection:
Wordle 関連記事
攻略系
Solver系
リバースエンジニアリングチート系
自分がやりたいこと
1. チートして一発で当てたいわけではない
⇢ あくまでゲームを楽しみたい
2. ゲームやって翌日またフラットに始めてる一過性
前日クリアした単語、単語リストをパスした単語を忘れがち
単語の蓄積をして楽しみたい
こうしたい
覚えた単語やパスした単語を蓄積したい
できればその場で単語の意味もわかりたい
外側から Wordle をハックする
Bookmarklet：ちょっと小さい
Chrome 拡張：ほど良さそう
⇡ これで行ってみる 💪
どうすると良さそうか
基本的には動いてる外側から何とかする
何とかする
1. 難読化した JS を広げて読む
2. ねじ込めるところを探す
CustomEvent
デモ
code:listen.js
const events = [
"game-last-tile-revealed-in-row",
"game-setting-change",
"game-key-press",
"game-switch-change",
];
events.forEach(ev => {
window.addEventListener(ev, console.log);
});
MutationObserver
デモ
code:mutation-observer.js
function callback(mutationList) {
mutationList.forEach((mutation) => { console.log(mutation) });
}
const options = { childList: true, attributes: true, subtree: true };
const observer = new MutationObserver(callback);
gameRows.forEach(row => { observer.observe(row, options) });
Wordleと拡張をどう協調させるか
https://gyazo.com/02c6750507bffe247f305d512f87c845
デモ
拡張は公開してないのでデモします
code:仕込み.js
const storage = JSON.parse(localStorage.getItem("hackaWordle"));
localStorage.setItem("hackaWordle", JSON.stringify({
...storage,
myDictionaries: [
"album",
"meaty",
"burin",
"genic",
"smaak",
"torse",
"image",
"shame"
],
}));
いかがでしたでしょうか
Wordle も楽しめて、拡張も作れて嬉しいね
申請しようとしたが項目多くて断念してる
そもそもモバイルでしかやらないので…