What is causing error: "Could not load extension icon" and "Could not load manifest" when loading unpacked Chrome extension?

Question

I'm following a tutorial for creating a basic Chrome extension with Create-React-App (tutorial found here: https://medium.com/@gilfink/building-a-chrome-extension-using-react-c5bfe45aaf36)

After running create-react-app my-app command, I substituted the auto-generated code in the public folder's manifest.json file with the tutorial code (below), then placed a 128x128 image in the public folder, named logo-small.png, which is referenced correctly in the manifest file.

I ran the npm run build command and then opened Chrome extensions page to load unpacked extension, selecting the build folder (build command placed the contents of the public folder into the build folder, so the manifest and png are all in the same location). However, I got the following error:

Could not load extension icon 'logo-small.png'. Could not load manifest.

I'm unsure what's causing this, since I followed directions exactly. Does anyone know what the issue might be? Do you need other info from me to be able to tell?

Manifest.json code:

{
  "manifest_version": 2,

  "name": "testapp",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  },
  "permissions": [
  ]
}

Obstruent

Did you work this out? I have the same issue. – Earwitness

Answer 1

Yes, the issue is that you are saying "logo-small.png" as a result chrome will not know that it is an icon. As a result, re-name the "logo-small" to "icon16.png". Change the "logo-small" on the second line to "icon48.png" and the last one to "icon128.png". This solution worked for me.

{
"manifest_version": 3,
"name": "Answers",
"version": "1.0",
"description": "Basic Practice! ",
"icons":{
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
},
"browser_action":{
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
}

} This code worked for me. Also, make sure to re-size each icon so it is great! Let me know if it works.

Hedgepeth

Answer 2

I had

  "page_action": {
    "default_icon": {
      "16": "icon16.png"
    }
  },

replaced it with

  "browser_action": {
    "default_icon": "icon16.png"
  }

and the icon now has color!

Biotechnology