CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-extensionembedly
frazras
frazras

Reputation: 6488

Uncaught ReferenceError: jQuery20309916159505955875_1389540514154 is not defined

I am trying to put the embed.ly library in a google chrome extension. But when I run the following code 

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

I get this error : enter image description here

Uncaught ReferenceError: jQueryXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXX is not defined JQuery is properly loaded and works normally, but it keeps loading with a new number (looks like a timestamp) attached to the Jquery name not defined in the error message.

When I click the error link, the extracted content seems to appear like so 

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

Upvotes: 0

Views: 1980

Answers (1)

Rob W
Rob W

Reputation: 349232

This looks like JSONP.

You should not use JSONP in a content script, because JSONP works by inserting a <script> tag in the document, which calls a function with the result of the JSONP request. However, in Chrome's content script, the execution environment of this script is different from the page (where the <script> tag is injected). Consequently, you get an error about the function not being defined.

The right way to solve the problem is to declare the right permissions in your manifest file and use regular AJAX+JSON.

In your specific example, I see the following snippet in the library you're using:

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

Replace dataType: 'jsonp' with datatype: 'json' and your specific problem is solved.

If you cannot change the JSONP request to a regular AJAX request, I suggest to load scriptTagContext.js from https://github.com/Rob--W/chrome-api/tree/master/scriptTagContext before your content scripts. scriptTagContext.js changes the behavior of <script> tags in a content script, such that these scripts always run in the same execution environment.

In all cases, you have to declare the permission to access the resource in the manifest file:

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

Upvotes: 1

Related Questions