Uncaught ReferenceError: jQuery20309916159505955875_1389540514154 не определено

Question

Я пытаюсь поместить библиотеку embed.ly в расширение Google Chrome. Но когда я запускаю следующий код

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

Я получаю эту ошибку:

Uncaught ReferenceError: jQueryXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXXXX не определен 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 среда выполнения этого скрипта отличается от страницы (где <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/*"
    ],
    ...
}