初めてTypeScriptでChrome拡張機能を作ったよ (Wordleネタバレ拡張機能)

なんとなくChrome拡張機能を作ってみたいな〜と思っていたので作ってみました。
意外と簡単で、1時間くらいで作れました。

作ったもの

wordleにアクセスしたら強制的にネタバレしてくるchrome拡張機能作った pic.twitter.com/N1QEcINKMj

— yoshii🐍 (@ganja_tuber) January 23, 2022

最近流行りのWordleで、答えを強制的に教えてくるおせっかいな拡張機能です。

コード

以下に公開してます。

cloneして、yarn installしてください。

環境

macです

ディレクトリ構成

.
├── package.json
├── public
│   ├── image
│   │   └── icon.png
│   └── manifest.json
├── src
│   └── content.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

実行ファイルは、src/content.tsです。それ以外はテンプレをちょこちょこ変えただけです。

仕組み

どうやって答えを手に入れているかというと、
簡単な話で、WordleにアクセスするとLocalStorageに解答が保存されるのでそれを参照してるだけです。

solutionっていうプロパティです。

実行ファイルsrc/content.tsはこんな感じ

src/content.ts

const gameState = localStorage.getItem("nyt-wordle-state");
if (gameState) {
  const gameStateData = JSON.parse(gameState) as { solution: string };
  window.alert(`こたえ: ${gameStateData.solution.toUpperCase()}`);
}

localStorageから答えを取得して、大文字に変換したものをalertしてます。

使ってみる

まずは、ビルドします。

npx webpack

とすると、プロジェクト内にdistディレクトリが生成されると思います。

あとは、このdistディレクトリをchromeで読み込んで、Wordleにアクセスすれば、ネタバレしてくれます。

chromeで自作の拡張機能を読み込む方法は、以下が参考になると思います。

うちでChrome拡張機能を作ろう

まとめ

初めてChrome拡張機能を作ってみました。
ちょっとしたものなら簡単に作れてお手軽だな〜と思いました。
気軽にコメントください〜

追記 (2022/2/21)

Wordleがニューヨークタイムズの傘下になって、urlとかlocalStorageのキーが変わったので、それに対応しました。