Databases
StackOverflow2013
Postsdbo
POUsing jQuery in Google Chrome extension popup.html
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing jQuery in Google Chrome extension popup.html
    text
    copied!<p>I have a working Google Chrome extension, which I'm attempting to extend with an additional feature.</p> <p>I've amended the "popup.html" to include external references to jQuery, which are:</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt; </code></pre> <p>I've written corresponding controller-model methods in CodeIgniter to handle the jQuery requests, which are used elsewhere in the application, and are working:</p> <pre><code>$(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('&lt;div class="topic-link-box" id="topic-link-box-' + ui.item.topic_id + '"&gt;&lt;input type="checkbox" id="topic-link-item-' + ui.item.topic_id + '" name="topic-links-add[]" value="' + ui.item.topic_id + '" checked="checked"&gt;&lt;a href="' + 'http://macbookpro.local/development/theundercloud/topics/edit/' + ui.item.topic_id + '" title="Edit ' + ui.item.name + '"&gt;' + ui.item.name + '&lt;/a&gt; [&lt;a href="' + 'http://macbookpro.local/development/theundercloud/topics/view/' + ui.item.topic_id + '"&gt;View&lt;/a&gt;] [&lt;a href="' + 'http://macbookpro.local/development/theundercloud/topics/visit/' + ui.item.topic_id + '" target="_blank"&gt;Link&lt;/a&gt;]&lt;/div&gt;'); } }).data("autocomplete")._renderItem = function(ul, item) { return $('&lt;li&gt;&lt;/li&gt;') .data("item.autocomplete", item) .append('&lt;a&gt;' + item.name + '&lt;/a&gt;') .appendTo(ul); }; })); </code></pre> <p>Also, I've wrapped it in $(document).ready() method, which is the only substantial change to what I have working within the application itself.</p> <p>And in addition to the jQuery references in "popup.html", I also have:</p> <pre><code>&lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Topics&lt;/legend&gt; &lt;dl&gt; &lt;dt&gt;&lt;label for="link"&gt;Link&lt;/label&gt;&lt;/dt&gt; &lt;dd&gt;&lt;input type="text" id="link" /&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p>Which is external to the main form which handles the actual submission of data, within which I have:</p> <pre><code>&lt;div class="link-results"&gt;&lt;/div&gt; </code></pre> <p>Needless to say, this arrangement is — as far as I'm aware and able to test — identical to the working version within the application itself. However, it's not working within the Google Chrome extension.</p> <p><strong>Update</strong></p> <p>I've since found that there are errors with the Content Security Policy:</p> <pre><code>Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://www.google.com". Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://www.google.com". Uncaught ReferenceError: $ is not defined </code></pre> <p>I've changed the "manifest.json" to:</p> <pre><code>"permissions": [ "tabs", "http://*/", "https://*/", "file:///*/*", "https://*.google.com/" ], "content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'", </code></pre> <p>And I've changed the script references to the jQuery with Google to "https", but it's not fixed things.</p> <p>Any ideas?</p> <p><strong>FIXED</strong></p> <p>I changed the URLs in the "manifest.json" to the same ones as found in the script references.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload