あなたの反応アプリをクロム拡張子にする方法
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ページに表示されます.![](https://s1.md5.ltd/image/573ac5c84156969ffecb5ea0802f7d6d.png)
その後.
Click the Load unpacked extension button and select the build folder of your project.
![](https://s1.md5.ltd/image/d667874471406d3a6015fa7ca1e307ee.png)
注意:
拡張モジュールを開くには、次のように拡張モジュールのページにエラーがあります.
![](https://s1.md5.ltd/image/3b40b1a9de6e257765d3e62a4c09a5a6.png)
![](https://s1.md5.ltd/image/831ffc08a0eba742b8fca67afc19aa7e.png)
これを解決するためには、我々のマニフェストでその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 👌
![](https://s1.md5.ltd/image/c94019ea48a24129a42d67da1873a109.png)
結論🌟🌟
あなたはこれまで来て、基本的なクロム拡張子を作りました🔥🔥
![](https://s1.md5.ltd/image/15343d60036866f583bad8dbd376ef0c.gif)
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