未捕获的ReferenceError：jQuery20309916159505955875_1389540514154未定义

Question

我正在尝试将embed.ly库放入Google Chrome扩展程序中。但是当我运行以下代码时

 $.embedly.defaults.key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
 $.embedly.extract('http://embed.ly').progress(function(data){alert(data.title)});

我收到此错误：

未捕获的ReferenceError：未定义jQueryXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXX JQuery已正确加载并正常工作，但它继续加载一个新的数字（看起来像一个时间戳）附加到错误消息中未定义的Jquery名称。

当我点击错误链接时，提取的内容似乎显示为

jQuery20309916159505955875_1389540514154([{"provider_url": "http://embed.ly", "description": "Embedly delivers the ultra-fast, easy front-end tools developers need to build richer sites and apps.", "embeds": [], "safe": true, "provider_display": "embed.ly", "related": [], "favicon_url": "http://embed.ly/static/images/favicon.ico?v=0b3ad", "authors": [], "images": [{"caption": null, "url": "http://embed.ly/static/images/logos/logo_color.png?v=4b245", "height": 127, "width": 399, "colors": [{"color": [0, 0, 2], "weight": 0.80712890625}, {"color": [64, 196, 232], "weight": 0.1484375}, {"color": [246, 250, 251], "weight": 0.04443359375}], "entropy": 0.947677537089, "size": 23650}, {"caption": null, "url": "http://embed.ly/static/images/sketches/publishers-200.png?v=081c0", "height": 200, "width": 200, "colors": [{"color": [106, 209, 226], "weight": 0.8740234375}, {"color": [120, 80, 126], "weight": 0.1259765625}], "entropy": 2.4077095600808898, "size": 36127}], "cache_age": 70944, "lead": null, "language": "English", "original_url": "http://embed.ly", "url": "http://embed.ly/", "media": {}, "title": "Front-end developer tools for websites and apps | Embedly", "offset": null, "content": null, "entities": [], "favicon_colors": [{"color": [16, 172, 229], "weight": 0.450439453125}, {"color": [0, 4, 5], "weight": 0.435546875}, {"color": [242, 250, 252], "weight": 0.114013671875}], "keywords": [{"score": 17, "name": "apps"}, {"score": 15, "name": "websites"}, {"score": 14, "name": "embedding"}, {"score": 10, "name": "resize"}, {"score": 9, "name": "elements"}, {"score": 9, "name": "tool"}, {"score": 9, "name": "display"}, {"score": 8, "name": "articles"}, {"score": 7, "name": "smarter"}, {"score": 7, "name": "keywords"}], "published": null, "provider_name": "Embed", "type": "html"}])

Answer 1

这看起来像JSONP。

您不应在内容脚本中使用JSONP，因为JSONP的工作原理是在文档中插入<script>标记，该标记使用JSONP请求的结果调用函数。但是，在Chrome的内容脚本中，此脚本的execution environment与页面（注入<script>标记的位置）不同。因此，您会收到有关未定义函数的错误。

解决问题的正确方法是在清单文件中声明正确的权限并使用常规的AJAX + JSON。

在您的具体示例中，我看到以下代码段in the library you're using：

$.ajax({
    url: self.build(method, batch, options),
    dataType: 'jsonp',
    success: function(data){
        ...
    }
});

将dataType: 'jsonp'替换为datatype: 'json'，您的具体问题就解决了。

如果您无法将JSONP请求更改为常规AJAX请求，我建议您在内容脚本之前从https://github.com/Rob--W/chrome-api/tree/master/scriptTagContext加载scriptTagContext.js。 scriptTagContext.js更改了内容脚本中<script>标记的行为，以便这些脚本始终在同一个执行环境中运行。

在所有情况下，您必须declare the permission才能访问清单文件中的资源：

{
    ...
    "permissions": [
        "*://*.embed.ly/*"
    ],
    ...
}