javascript - 无法在打包的 Chrome 扩展程序中获取正确的资源文件路径

Question

在开发我的扩展程序并通过加载解压的扩展程序对其进行测试时，我能够获得正确的路径。

例如，以下代码指向我的一张图片并正确加载。

theIcon.src = chrome.runtime.getUrl(goatPath); // "chrome-extension://extensionID/img/myImage.png 

我在弹出页面和内容脚本中都运行了上述代码。

但是，当我上传到 Chrome 网上应用店并发布打包版本时，我无法访问该资源，因为它正试图在

chrome-extension://extensionID/chrome-extension://extensionID/img/myImage.png

弹出页面错误

Failed to load resource: net::ERR_FILE_NOT_FOUND

内容脚本错误

Denying load of chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/img/myimage.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

list 文件 -

{
  "manifest_version": 2,

  "name": "Feed the Goat",
  "description": "Feed the Goat provides a fun way for you to stay focused so you can get more done.",
  "version": "1.5",
  "icons": { "16": "img/goat-icon16.png",
             "32": "img/goat-icon32.png",
             "128": "img/goat-icon128.png" },
  "background": {
    "scripts": ["event/background.js"]
  },
  "browser_action": {
    "default_icon": "img/goat-icon.png",
    "default_popup": "popup/authentication/authentication.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/content.js"]
    }
  ],
  "web_accessible_resources": [
    "img/goat-icon128.png",
    "img/goat-icon256.png",
    "img/GarytheGoat-icon128.png",
    "img/GarytheGoat-icon256.png",
    "img/BillyBuck-icon128.png",
    "img/BillyBuck-icon256.png",
    "img/UncleUnicorn-icon128.png",
    "img/UncleUnicorn-icon256.png"

  ],
  "content_security_policy":"script-src 'self' https://cdnjs.cloudflare.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com https://use.fontawesome.com; object-src 'self'",
  "permissions": [
    "tabs",
    "activeTab",
    "<all_urls>",
    "identity",
    "idle",
    "notifications",
    "storage"
  ],
    }

谢谢

Answer 1

在您的 manifest.json 中尝试添加以下内容:

"web_accessible_resources": [
  "img/*"
]

此外，请确保在您的 dist(build) 文件夹中有包含图像的 img 文件夹。

“goatPath”应该是 img/myImage.png和函数应该像这样将 URL 全部大写

chrome.runtime.getURL(goatPath)