Skip to content
GitLab
Open
Issue created by zydjohnHotmail@zydjohnHotmail

Create-React-App create chrome extension issue.

Describe the bug

The generated manifest.json by Create-React-App can NOT be used to create chrome extension. (Write your answer here.)

Did you try recovering your dependencies?

No!

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

OS: Windows 10 (Version 21H2) Node.js: version 18.14.2 Chrome: Version 110.0.5481.178 (Official Build) (64-bit)

(paste the output of the command here.)

Steps to reproduce

  1. Installed node.js version 18.14.2
  2. npx create-react-app chrome-react-extension --template typescript
  3. npm run build

(Write your steps here:)

Expected behavior

I should be able to load browser extension from Chrome, but it did NOT work

(Write what you thought would happen.)

Actual behavior

Error message: ErrorMissing 'manifest_version' key. Its value must be an integer either 2 or 3. See developer.chrome.com/extensions/manifestVersion for details.

(Write what happened. Please add screenshots!)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Hello: The above instructions are good, but not enough to report the bug, so I wrote my own report here: I found Create-React-App library, it seems to be a good tools to make Chrome extension, but I see a few issues when trying to use it to create a simple Chrome extension.

The steps: 0) Installed node.js version 18.14.2

  1. npx create-react-app chrome-react-extension --template typescript
  2. npm run build
  3. Show manifest.json file: D:\TypeScripts\chrome-react-extension>type public\manifest.json { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { "src": "logo512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }
  4. From Chrome browser: chrome://extensions/ Try to load unpacked, got the following errors:

ErrorMissing 'manifest_version' key. Its value must be an integer either 2 or 3. See developer.chrome.com/extensions/manifestVersion for details. Could not load manifest.

  1. Change manifest.json file, so it looks like this: D:\TypeScripts\chrome-react-extension\public>type manifest.json { "short_name": "React App", "name": "Create React App Sample", "manifest_version": 3, "version": "1.0", "icons": { "16": "favicon.ico", "48": "logo192.png", "128": "logo512.png" } } D:\TypeScripts\chrome-react-extension\public>

Then, I can load unpacked in Chrome browser, but I can’t see any icon for the extension. I am using Chrome version: Version 110.0.5481.178 (Official Build) (64-bit) As indicated by Chrome browser, all manifest version 2.0 will not work in year 2023, so have to use manifest version 3.0; but the default manifest generated by Create-React-App seems out of date. Please check and make some changes, so users can use the repo longer. By the way, when I run the command: npx create-react-app chrome-react-extension --template typescript I saw there were warnings: 6 high severity vulnerabilities It is better to check and update dependent packages to erase the above warnings. Thanks,