Using jQuery in Google Chrome extension popup.html -

i have working google chrome extension, i'm attempting extend additional feature.

i've amended "popup.html" include external references jquery, are:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

i've written corresponding controller-model methods in codeigniter handle jquery requests, used elsewhere in application, , working:

$(document).ready($(function(){     $('#link').autocomplete({         source: "http://domain.com/topics/jq_get_topics_by_search_as_object/",         appendto: ".link-results",         open: function(event, ui) {         $('ul.ui-autocomplete#link')                 .removeattr('style')                 .hide()                 .appendto('.link-results')                 .show();         },         select: function(event, ui) {             $('.link-results')                 .append('<div class="topic-link-box" id="topic-link-box-' + ui.item.topic_id + '"><input type="checkbox" id="topic-link-item-' + ui.item.topic_id + '" name="topic-links-add[]" value="' + ui.item.topic_id + '" checked="checked"><a href="' + 'http://macbookpro.local/development/theundercloud/topics/edit/' + ui.item.topic_id + '" title="edit ' + ui.item.name + '">' + ui.item.name + '</a> [<a href="' + 'http://macbookpro.local/development/theundercloud/topics/view/' + ui.item.topic_id + '">view</a>] [<a href="' + 'http://macbookpro.local/development/theundercloud/topics/visit/' + ui.item.topic_id + '" target="_blank">link</a>]</div>');         }     }).data("autocomplete")._renderitem = function(ul, item) {         return $('<li></li>')             .data("item.autocomplete", item)             .append('<a>' + item.name + '</a>')             .appendto(ul);     }; })); 

also, i've wrapped in $(document).ready() method, substantial change have working within application itself.

and in addition jquery references in "popup.html", have:

<form>     <fieldset>         <legend>topics</legend>         <dl>             <dt><label for="link">link</label></dt>             <dd><input type="text" id="link" /></dd>         </dl>     </fieldset> </form> 

which external main form handles actual submission of data, within have:

<div class="link-results"></div> 

needless say, arrangement — far i'm aware , able test — identical working version within application itself. however, it's not working within google chrome extension.

update

i've since found there errors content security policy:

refused load script 'https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' because violates following content security policy directive: "script-src 'self' https://www.google.com". refused load script 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' because violates following content security policy directive: "script-src 'self' https://www.google.com". uncaught referenceerror: $ not defined  

i've changed "manifest.json" to:

"permissions": [     "tabs",     "http://*/",     "https://*/",     "file:///*/*",     "https://*.google.com/" ], "content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'", 

and i've changed script references jquery google "https", it's not fixed things.

any ideas?

fixed

i changed urls in "manifest.json" same ones found in script references.

i changed urls in "manifest.json" same ones found in script references, rob pointed out short while ago.