Jquery callback - Uncaught ReferenceError

Question

I think the below problem is scope related but I'm not very good with jQuery plugin pattern, how can I solve it ?

Details
I'm trying to fix an issue (Cross Domain) with this chrome extension

I think I found a solution ( using anyorigin.com ) but I got an new problem with the $.getJSON:

Uncaught ReferenceError: jQuery19109374020271279013_1462700430014 is not defined:

?url=https%3A//thepiratebay.cr/search/I%20Will%20Survive%201999/0/7/0&callback=jQuery19109374020271…:1 Uncaught ReferenceError: jQuery19109374020271279013_1462700430016 is not defined(anonymous function) @ ?url=https%3A//thepiratebay.cr/search/I%20Will%20Survive%201999/0/7/0&callback=jQuery19109374020271…:1

Here the code involved doSearch() is where I go the issue:

    (function($) {
        $.fn.extend({
            tpbSearch : function(options){
                var defaults = { searchTerm: ''};
                var options = $.extend(defaults, options);
                return this.each(function(){
                    doSearch($(this), options.searchTerm);
                })
            }
        });

        // private functions
        // ....

        function buildSearchUrl(searchTerm)
        {
            var searchPart = 'https://thepiratebay.cr/search/' + encodeURIComponent(searchTerm) + '/0/7/0';
            var searchUrl = 'http://anyorigin.com/get?url=' +  escape(searchPart) + '&callback=?';

            return searchUrl;
        }
        // function where the issue happens.
       function doSearch(container, searchTerm){
            // here we should iterate over the container selector, because it's possible multiple items will be selected.
            var sanitizedSearchTerm = sanitizeSearchTerm(searchTerm);

            // set the default logo
            var loadingImageUrl = chrome.extension.getURL('images/ajax-loader.gif');
            var logo = $('<img id="tpb-logo">')
                        .attr('src', loadingImageUrl)
                        .css('width', '25px')
                        .css('height', '25px');
            container.children().remove();
            container.append(logo);

            var searchUrl = buildSearchUrl(sanitizedSearchTerm);

            $.getJSON(searchUrl, function(data){
                alert('aa');
            });
        }
}(jQuery));

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

That's not the right way to do it from a Chrome extension anyway.

If you run into cross-origin problems, you need to define host permissions for that origin. Then Chrome will ignore CORS. See Requesting cross-origin permissions in Google documentation.

For completeness, though I discourage you from fixing this:

Your error here is treating JSONP in a content script. JSONP works by inserting a <script> element, but that executes in page's context while the callback is in a separate content script context. This gives the error of being unable to find the callback function.

Using JSONP is really awkward in content scripts as a result and if ABSOLUTELY needed should be delegated to the background page (with appropriate CSP considerations).

edited May 23 '17 at 12:07

Community

1
1

answered May 08 '16 at 11:19

Xan

74,770
16
179
206

I'm not sure if you are right about the JSON part ( the same command, on the same page with in js console works ... ) anyway you are absolutely right about the CORS and Chrome ext. that works like a charm. Thx – WonderLand May 08 '16 at 15:39
1

Ah, that code is from a content script. Then the problem is isolated world. I updated the answer to be correct. – Xan May 08 '16 at 15:42

Jquery callback - Uncaught ReferenceError

1 Answers1