あなたの反応アプリをクロム拡張子にする方法

Into 💨

彼らがユーザーのための更なる機能とツールを提供するので、クロム拡張は本当に便利でありえます.このポストでは、我々は単純なクロム拡張子ポップアップを作るつもりです

詳細

反応アプリを作成します
これはChrome拡張を行うために必要な反応ファイルを作成します

npx create-react-app my-app

マニフェストを見てください.JSON

アプリケーションを作成マニフェストを生成する反応.JSONはあなたの公開フォルダにあなたのために残されているすべてが編集することになっているので、マニフェストはどのように拡張子を作成しインストールするかをchromeに伝えます.マニフェストには、ポップアップを表示するファイル、タイトル、ロゴ、説明、および将来の投稿で話し合う他の機能の設定が含まれます.今のところ、マニフェストを変更します.これにJSON :

{
"manifest_version": 2,

"name": "My App Extension",
"description": "A basic chrome extension of react app. nothing too tedious",
"version": "0.1",

"browser_action": {
  "default_popup": "index.html",
  "default_title": "Open the popup"
},
"icons": {
  "192": "logo192.png",
  "512": "logo512.png"
},
"permissions": [
]
}

拡張モジュール

をビルドします
以下のコードを実行し、ビルドフォルダを生成します

npm run build

クロームエクステンションにインストール
我々がこれまでしたことをテストするために、我々はChromeで拡張をインストールしなければなりません.アドレスバーに行き、タイプ:

chrome://extensions/

これは、開発者モードで切り替えるにはChrome Extensionページに表示されます.

その後.

Click the Load unpacked extension button and select the build folder of your project.

注意:

拡張モジュールを開くには、次のように拡張モジュールのページにエラーがあります.


これを解決するためには、我々のマニフェストでそのsha値と場所を取る必要があります.下記のJSON

{
"manifest_version": 2,

"name": "My App Extension",
"description": "A basic chrome extension of react app. nothing too tedious",
"version": "0.1",

"browser_action": {
  "default_popup": "index.html",
  "default_title": "Open the popup"
},
"icons": {
  "192": "logo192.png",
  "512": "logo512.png"
},
"content_security_policy": "script-src 'self' 'sha256-copied-value'; object-src 'self'",
"permissions": [
]
}

Rebuild the app, go back to the extensions page then refresh your extension and you're done 👌

結論🌟🌟

あなたはこれまで来て、基本的なクロム拡張子を作りました🔥🔥