通过 Chrome 商店安装时，图像不会加载到 Chrome 扩展程序中答案

【问题标题】：Images won't load in Chrome Extension when installed via ChromeStore通过 Chrome 商店安装时，图像不会加载到 Chrome 扩展程序中
【发布时间】：2015-07-20 18:00:00
【问题描述】：

我在网上商店有几个月的 chrome 扩展程序，它一直在完美运行。最近，我更改了 UI 并在扩展程序中添加了几个新图像。我已在清单文件的“web_accessible_resources”属性中添加了图像文件夹。 "src/lib/imgs/*"

问题是：当用户通过 Chrome 商店安装扩展程序时，某些图像无法加载，我不知道为什么。所有图像都在同一个文件夹中。有些有效，有些无效。我自己有 Chrome 开发者版。

我很确定所有图片都上传得很好。我有 chrome 版本 43.0.2357.134 dev-m，当我从 chrome webstore 安装它时，它工作正常。但是，当我在具有 chrome 版本 43.0.2357.134 m 的不同笔记本电脑上安装相同的插件时。

通过使用这个插件https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin?utm_source=chrome-app-launcher-info-dialog，我可以在 chrome 商店中看到我的扩展程序的源文件，并且所有文件都在那里。

有没有人有任何建议或任何想法可能是这里的问题？如果我的问题不清楚，或者您需要更多信息来理解这个问题，请告诉我。

如果您想试用该插件，这里是测试版：chrome.google.com/webstore/detail/cpacflpjhonhpgpjkbilfblopejajlai/（您可以使用任何虚假电子邮件地址注册） - 请注意，一旦问题解决，我将拥有此测试版从商店中删除的版本。

谢谢，

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

确保您应该列出您的文件和清单，但请您猜测一下：您的图像名称中的大小写可能不一致。因为文件在不同的操作系统中具有不同的案例规则，所以它可以在某些操作系统上运行，但在其他操作系统上运行。尝试在文件和源引用中将所有图像名称设置为小写。还要确保你没有使用保留字符。检查 windows mac 和 Linux 特殊字符规则。

【讨论】：

确实情况似乎是这样（请原谅双关语）。跨文件不一致。
感谢 Zig 和 Xan 的回复。我重命名了所有文件并将它们引用为小写，但我仍然面临同样的问题。这是它在控制台中的外观：GET chrome-extension://cpacflpjhonhpgpjkbilfblopejajlai/src/lib/imgs/aw_audienceheart_knowledge.png net::ERR_FAILED
这是目录结构和清单：pastebin.com/cQsnBfYw 这是我在 content_script.js 文件中添加所有图像的方法，除了少数之外，还有几个作品。 $('#aw_idealaud').attr('src', chrome.extension.getURL("src/lib/imgs/aw_audienceheart_knowledge.png"));
@ZigMandel @Xan 我下面的回答并不是真正的解决方案。即使我修复了它，它仍然崩溃。但是，我注意到在单击浏览器操作图标（右上角）几秒钟后崩溃了。在chrome://extensions 上显示“此扩展程序可能已损坏”，即它无法加载图像。大家还能想到什么？
您是否尝试更改已安装扩展中的文件？那可能会发生。

【解决方案2】：

我想我可能在为 Zig Mandal 发布 cmets 时发现了这个问题。

看看我在这里发布的失败图片。 GET chrome-extension://cpacflpjhonhpgpjkbilfblopejajlai/src/lib/imgs/aw_audiencehear‌t_knowledge.png net::ERR_FAILED

当我尝试将文件名 aw_audiencehear‌t_knowledge.png 转换为 ascii 值时。我发现'heart'这个词的'r'后面有某种隐藏字符。

复制粘贴http://asciivalue.com/index.php中的文件名，你会看到它。

我不确定那是什么类型的字符。它纯粹是不可见的，它不是一个常规的空间。我将检查所有文件名，看看是否有任何隐藏字符并一一删除。一旦我完全解决这个问题，我会更新这个。

如果你们有任何关于此的信息，请更新此帖子。

再次感谢您的帮助:)

【讨论】：

仅供参考：上述解决方案并未解决最初的问题。

【解决方案3】：

经过 4 天的研究，我发现了这个答案 https://stackoverflow.com/a/30715572/2241100

由于我的 chrome 扩展程序没有为我指明正确的方向，我不得不手动遍历每一行并在脑海中执行脚本，最终我在 popup.js 中找到了这一行

$('#atomic_insights').attr('src', chrome.extension.getURL("src/lib/imgs//atomicinsights.png"));

我很幸运地注意到文件名前的双斜杠 (//)。就是这样！

现在，我想知道为什么这段代码可以在开发者模式下工作？当我从本地安装它时，为什么它没有在开发人员模式下抛出相同的错误？为什么 Chrome 从未向我指出有关此错误的正确文件和行号。这是 Chrome 的错误还是有其他解释？

我对上述任何问题都没有答案。由于我发现了错误，我将继续前进并进行开发。再次感谢 @ZigMandel 和 @Xan 的所有帮助。

【讨论】：

在您的链接答案中解释了它为什么在开发中起作用。 chrome 检查仅在已发布的扩展上进行，否则商店中没有可比较的内容。