加载解压的 Chrome 扩展程序时，导致错误的原因是什么：“无法加载扩展程序图标”和“无法加载清单”？

Question

我正在遵循使用 Create-React-App 创建基本 Chrome 扩展程序的教程 （教程在这里找到： https://medium.com/@gilfink/building-a-chrome-extension-using-react-c5bfe45aaf36）

运行create-react-app my-app命令后，我用教程代码（如下）替换了public文件夹的manifest.json文件中自动生成的代码，然后在public文件夹中放置了一个128x128的图像，命名为logo-small .png，在清单文件中正确引用。

我运行了 npm run build 命令，然后打开 Chrome 扩展页面来加载解压的扩展，选择构建文件夹（构建命令将 public 文件夹的内容放入构建文件夹中，因此清单和 png 都位于同一位置） 。但是，我收到以下错误：

无法加载扩展图标“logo-small.png”。 无法加载清单。

我不确定是什么原因造成的，因为我完全按照指示操作。 有谁知道问题可能是什么？您需要我提供其他信息才能辨别吗？

Manifest.json代码：

{
  "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": [
  ]
}

Answer 1

是的，问题是您说的是“logo-small.png”，结果 chrome 不会知道它是一个图标。因此，将“logo-small”重命名为“icon16.png”。将第二行的“logo-small”更改为“icon48.png”，将最后一行更改为“icon128.png”。这个解决方案对我有用。

{
"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"
}

} 这段代码对我有用。另外，请确保重新调整每个图标的大小，使其非常棒！让我知道它是否有效。

Answer 2

我有

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

替换为

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

图标现在有颜色了！