とても嬉しいので記事にする CORS = オリジン間リソース共有(Cross-Origin Resource Sharing) ざっくり言うと、ページに使用するソースは自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) から参照する事はできませんよ、というもの。 詳細は他に良い記事が沢山あるので割愛します。 参考:なんとなく CORS がわかる...はもう終わりにする。 で、本題。Chrome 拡張機能のマニフェストバージョンを3にすると、以前はできなかった 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に関連する画面の場合
拡張機能では Chrome ブラウザをカスタマイズできますが、オプション ページでは拡張機能をカスタマイズできます。オプションを使用して機能を有効にし、ユーザーがニーズに関連する機能を選択できるようにします。 オプション ページの位置 オプション ページにアクセスするには、直接リンクを使用するか、ツールバーの拡張機能アイコンを右クリックしてオプションを選択します。また、ユーザーは、まず chrome://extensions を開き、目的の拡張機能を見つけて [詳細] をクリックし、オプションのリンクをクリックすることで、オプション ページに移動できます。 オプション ページを記述する オプション ページの例を次に示します。 options.html: <!DOCTYPE html> <html> <head> <title>My Test Extension Options</title
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との深夜のコピペ連撃でなんとかした感じですので、ソースをペッと貼っておきます。 もっともシンプルなサンプルとして、閲覧中のページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く