あなたの反応アプリをクロム拡張子にする方法
Into 💨
彼らがユーザーのための更なる機能とツールを提供するので、クロム拡張は本当に便利でありえます.このポストでは、我々は単純なクロム拡張子ポップアップを作るつもりです
詳細
これはChrome拡張を行うために必要な反応ファイルを作成します
npx create-react-app my-app
{
"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 👌

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

Reference
この問題について(あなたの反応アプリをクロム拡張子にする方法), 我々は、より多くの情報をここで見つけました https://dev.to/arndom/how-to-make-your-react-app-a-chrome-extension-4ip1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol