Bookmarkは自分のその時の興味関心みたいなのが分かる点がこのサイトと相性がよさそうと思い、本サイトに導入してみました。
Chrome拡張機能の自作とかPlanetScaleとか、初めてのものをいろいろ触れて良い機会でした。
完成形
機能概要
以下のような構成になっています。
少しだけ補足です。
Chrome拡張機能のアイコンをクリックすると、Nextのエンドポイントを叩きPlanetScaleにOGP情報をInsert。/bookmarksページアクセス時に取得して表示、といった流れです。
Chrome拡張機能
用途的に、公開するものではなかったので、ChromeのExtensionから読み込んで使っています。
以下のファイル構成でディレクトリを作成しました。
├── icons │ ├── icon16.png │ ├── icon24.png │ └── icon32.png ├── manifest.json ├── popup.html └── popup.js
クリックしたときに何も反応がないと寂しいので、ポップアップメッセージを表示する仕様にしました。
popup.html<!DOCTYPE html> <html> <body> <h1>Check!</h1> <script src="popup.js"></script> </body> </html>
popup.jsにはクリックされた際のURLを取得して、Nextのエンドポイントを叩く処理を書いています。
popup.jschrome.tabs.query({ active: true }, (tabs) => { const url = tabs[0].url; // エンドポイント叩く処理 });
manifest.jsonは以下のようにしてあります。
manifest.json{ "name": "Bookmark Extension", "description": "Bookmark Extension", "version": "1.0", "manifest_version": 3, "permissions": [ "tabs" ], "action": { "default_popup": "./popup.html", "default_icon": { "16": "./icons/icon16.png", "24": "./icons/icon24.png", "32": "./icons/icon32.png" } } }
permissoinsの指定をしないで動かすと、tabsに必要な情報が入っておらず、urlが取得できなかったところに少しハマりました。
（ドキュメントにしっかり書いてありました。）
アイコンを設定して、実際にクリックするとこんな感じになります。
（ポップアップの見た目がカッコ悪いですが。。。）
RouteHandlers
NextのRouteHandlersでAPIエンドポイントを立てました。
ドキュメントにあるお作法通りにファイルを配置して、中身を書けば、期待通りに動きました。
app/ ├── api │ └── bookmark │ └── route.ts
URLからOGP情報を取得
ChromeからURLが送られてくるので、そこからOGP情報を取得する必要があります。
実装の詳細は以下記事が分かりやすかったので、譲りたいと思います。
簡単に書くと、以下のような流れです。
- 取得したURLにHTTPリクエストを送る
- コンテンツを含むレスポンスを受け取る
- レスポンスを解析してコンテンツからOGPメタタグを抽出（property属性にog:接頭辞があるやつ）
- OGPメタタグから必要な情報（titleとかdescriptionとか）を取得
取得した情報をPrismaを使って、PlanetScaleにInsertします。
PlanetScaleを選んだのは、名前をよく聞くので1度使ってみたかったからです。
導入は公式どおりやればとても簡単で、UIがイケてる感じで、ストレスなく使えています。
終わりに
本サイトに久しぶりに機能拡張ができて嬉しいです。
レコード数が増えてきたときには、現状のままだと微妙そうなのでUXを良くする仕組みを考えたいです。