🤫

NotionAPIを使ったChrome拡張機能の作成にあたってCORSエラーが出た場合

2024/07/20に公開

はじめに

初投稿です。NotionAPIを使ったChrome拡張機能を作成するにあたって悩まされたCORSエラーの解決方法について話していきます。間違っている箇所があればコメントにてご指摘ください🙏

対象読者

Chrome拡張機能からNotionAPIを使っていてCORSエラーが起きて解決方法がわからない方

エラー内容


エラー内容を簡単に要約すると、CORSのせいでリクエストが正常に動きませんと言われています
CORSが何なのかわからない方は以下の記事が分かりやすかったので貼っておきます
https://qiita.com/att55/items/2154a8aad8bf1409db2b

解決方法

Chrome拡張機能を作成するにあたって最初にmanifest.jsonを定義すると思うんですが、そのmanifest.json内に"host_permissions"というのを定義しなくてはいけません。
"host_permissons"が何を表しているかというと拡張機能でやり取りできるウェブページを明言します。
詳しくは以下のChromeのドキュメントをご覧ください。
https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja
これを定義することでCORSのエラーが解消されると思います。
参考程度に...

"manifest_version": 3,
"host_permissions": [
  "https://api.notion.com/*"
],
"name": "hoge",
"description": "hoge",
"version": "1.0.0",

感想

公式のドキュメントを読むことはやっぱり大切だなと改めて実感し、もっと読めるようになりたいと思った。誰かの役に立てればと思い投稿しました。

Discussion