Chrome扩展程序：无法加载JavaScript文件

Question

Chrome扩展程序：无法加载JavaScript文件

7

我已经发布了另一个关于我的Chrome扩展程序的问题在这里。
但是我还有一个有关扩展本身的问题。我只需要为修改Tumblr-Dashboard使用内容脚本，不需要后台页面或其他东西，对吗？

这是manifest.json文件：

{
    "name": "Tumblr - Tiled Dashboard",
    "version": "0.0.54",
    "manifest_version": 2,
    "description": "This extension modifies the look of your Tumblr dashboard.",
    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    },
    "content_scripts": [
        {
            "matches": [ "*://*.tumblr.com/dashboard" ],
            "css": [ "styles.css" ],
            "js": [ "jquery-2.1.3.min.js", "masonry.min.js", "code.js" ]
        }
    ],
    "homepage_url": "mypage",
    "author":  "myname"
}

为了开始，我想问一下，这样做可以吗？我已经阅读了很多关于manifest.json文件的内容，当我在本地尝试扩展时，一切似乎都正常工作。但是，当我打包扩展并上传时，遇到了两个问题：

1. 我无法在搜索中找到该扩展 2. 当我使用链接查找扩展并想要安装它（我在两台不同的计算机上尝试过），我收到一个错误，告诉我无法加载jquery-2.1.3.min.js文件。因此，我更改了我的JavaScript文件的顺序来测试是否与jQuery文件有关的问题，但将masonry.min.js作为数组中的第一个文件仍然导致相同的错误。

为什么会发生这种情况？manifest.json文件是否正确？我需要特殊权限吗？

编辑：这是我尝试从Chrome Web Store安装扩展时的屏幕截图（我也无法通过搜索找到它）。

- Eru Iluvatar

能提供一个错误截图会更好。你说你的开发版本没有出现这个错误？ - Xan

我在上面添加了一张截图（德语，抱歉）。我的未打包/本地扩展正常工作！另外要提到的是，如果我在清单文件中更改顺序，对于'masonry.js'我会收到相同的消息。 - Eru Iluvatar

1

看起来你打包不正确。你上传的zip文件里面的结构是什么？应该在zip文件的根目录下有manifest.json和.js文件，而不是在一个文件夹内再压缩一次。 - Xan

你是对的，我把清单和*.crx文件放到了ZIP文件中，而不是扩展的根目录！ - Eru Iluvatar

2个回答

0

我遇到了同样的"无法加载javascript文件"错误，然后我注意到my_custom_script.js文件没有在dist目录中构建（我正在使用npm）。你可以手动移动它并尝试重新加载插件来检查是否解决了这个问题。

对我来说，解决办法是在webpack.config.js中添加新的入口，像这样：

 entry: {
    'my_custom_script': './my_custom_script.js',
    'background': './background.js',
    'popup/popup': './popup/popup.js',
    'options/options': './options/options.js',
  },

- hljubic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marco Bonelli · Accepted Answer

在下载您的扩展之前，我查看了其ZIP文件的内容，结果如下：

zip

^{*使用Rob Wu的Chrome扩展源代码查看器进行检查}

问题在于，您上传了一个打包的CRX文件到ZIP文件中，而不是上传扩展源代码的ZIP文件。您应该上传一个包含扩展根目录的ZIP文件。由于您包含了manifest.json文件，Web Store在尝试安装扩展之前并没有注意到任何错误，因为清单书写得很好，但当Chrome尝试访问声明的文件时，它会失败并返回一个错误，因为这些文件不存在。

引用自Chrome Web Store开发人员控制台上传页面:

上传项目:

上传您的项目目录ZIP文件，而不是打包的CRX文件。

在您的清单中包含一个设计良好的产品图标(更多信息)。

阅读文档了解创建和打包应用程序的信息。

需要更多帮助吗？请查看Chrome Web Store开发人员文档。

因此，您应该创建一个ZIP文件，其中包含您扩展程序的根目录，包括所有扩展程序的文件。然后，您的ZIP文件应如下所示：

enter image description here