0

我正在尝试将 embed.ly 库放在 google chrome 扩展中。但是当我运行以下代码时

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

我收到此错误： 在此处输入图像描述

Uncaught 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"}])
4

1 回答 1

1

这看起来像 JSONP。

您不应该在内容脚本中使用 JSONP，因为 JSONP 通过<script>在文档中插入一个标签来工​​作，该标签会使用 JSONP 请求的结果调用一个函数。但是，在 Chrome 的内容脚本中，这个脚本的执行环境与页面（<script>注入标签的地方）不同。因此，您会收到有关未定义函数的错误。

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

在您的具体示例中，我在您正在使用的库中看到以下代码段：

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

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

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

在所有情况下，您都必须在清单文件中声明访问资源的权限：

{
    ...
    "permissions": [
        "*://*.embed.ly/*"
    ],
    ...
}
于 2014-01-12T15:49:58.003 回答