インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw

とても嬉しいので記事にする CORS = オリジン間リソース共有（Cross-Origin Resource Sharing） ざっくり言うと、ページに使用するソースは自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) から参照する事はできませんよ、というもの。 詳細は他に良い記事が沢山あるので割愛します。 参考：なんとなく CORS がわかる...はもう終わりにする。 で、本題。Chrome 拡張機能のマニフェストバージョンを３にすると、以前はできなかった CORS 回避が簡単にできるようになりました。 これの何が嬉しいのかって言うと、拡張機能のbackground.jsなどから外部の REST API を叩こうとすると、API 側がAccess-Control-Allow-Originヘッダーを返すようにしていない限り、CORS エラーで取得できなかったり、API が JSO

Chrome Extension を作った際にいくつかハマったことがあったのでメモします。 ページ上での JavaScript 実行結果を取得する scripting.executeScript を使うのですが、関数を指定する形式のみしか値が返ってきません。ファイルを指定する形式と同じページに書かれており、制限が明確に書かれていないため紛らわしいので注意が必要です。 NG 次は実行結果が null として返ってきます。 function getTitle() { return document.title; } // returns null getTitle(); // same result // (() => getTitle())(); async function walkDocumentTitle() { const tabId = getTabId(); const inje

以前私が作成したマウスジェスチャのChrome拡張機能 "Our Mouse Gesture"のManifestファイルをv2→v3に変更した記事を書きましたが、後日談に書いたとおり動作が不安定になり v2 へ戻しました。 今回リベンジで再びManifestファイルのv2→v3変更を行いました。 その際に、最近勉強したJavaScriptのmodule化にもチャレンジしたのですが、一筋縄ではいかず色々うまくいかないことが多かったので、ここに方法を備忘録として残そうと思います。 どなたかのお役になりましたら幸いです。 1. background scriptのmodule化 1.1. Manifestファイル記載方法 1.2. event.jsでmoduleをimport 2. content scriptのmodule化 2.1. content scriptとしてロードするJavaScr

今回、私が作成したマウスジェスチャのChrome拡張機能 "Our Mouse Gesture"のManifestファイルをv2→v3に変更したことによって、発生するようになった謎のエラー Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. に関するお話です。 「エラー発生箇所がファイルの0行目ってどういうこと？」と困惑をしたのでその対応の覚え書きとなります。 1. 「Uncaught (in promise) Error」は何か？ 2.「Could not establish connection. Receiving end does not exist.」とは何か？ 2.1. エラー発生ケース1 : メッセージ送信先タブが、Chromeに関連する画面の場合

tl;dr chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { (async () => { // async code goes here // ... const result = await getSomething(); sendResponse(result); })(); // Important! Return true to indicate you want to send a response asynchronously return true; }); Or extract to an async function. chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { doSo

Chrome拡張で、閲覧中のページの情報をOpenAIのGPT-3.5やGPT-4に送って要約したり分析してもらったら便利だなと思いました。Chrome拡張は中身はJavaScriptだし、fetchでOpenAI APIのエンドポイントにポイすればすぐだろうと思ったら、そうも行かずに割とハマったのでメモです。 要約Chrome拡張はManifest v3になって権限とかbackgroundとかちゃんと設定しないといけなくなった fetchはbackgroudで処理する必要がある manifest.jsonのpermissionsでhttps://ai.openai.com を指定する必要がある とはいえ、私も完全に理解しているわけではなく、ChatGPTやMDNとの深夜のコピペ連撃でなんとかした感じですので、ソースをペッと貼っておきます。 もっともシンプルなサンプルとして、閲覧中のページ