Load jquery in popup chrome extension

Question

i want to create a chrome extension that opens a popup window and i want to use jquery in my html file.

i create my manifest.json

{
  "name": "My First",
  "description": "Test App",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "radio_tower-32.png", "128": "radio_tower-128.png" }
}

then i create a background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 250,
      'height': 250
    }
  });
});

then create my html page

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
  </head>
  <body>
  <a onclick="$('.playeraudio')[0].pause();">Stop</a>
    <audio controls="controls"  autoplay class="playeraudio"><source src="http://mystream.mp3" type="audio/mp3" /></audio>
 </body>
</html>

the jquery-1.11.0.min.js is in the folder but the click doesn't function. I tried to change the background.js using:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 250,
      'height': 250
    }
  });
});
chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

but it doesn't function (content.js is in the folder). Can anybody help me? what i need to change? Thanks

Does your html page work outside of the plugin? Are you getting any errors in your console? In one file you reference `"jquery.js"` in the other it is `"jquery-1.11.0.min.js"` ..? — Philipp Gayret, Feb 06 '14 at 22:19
Please don't edit your code to invalidate an existing answer. If you must, you should ask a new question. — Teepeemm, Apr 14 '15 at 02:01
@Teepeemm Your rollback did not actually roll back the code. Corrected. — Xan, Apr 14 '15 at 10:26
Possible duplicate of [The Chrome extension popup is not working, click events are not handled](http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled) — Makyen, Dec 04 '16 at 05:19

score 1 · Answer 1 · answered Feb 06 '14 at 22:34

I just tried a test in a Chrome extension that I'm working on and got this error in the console:

Refused to execute inline event handler because it violates the following 
Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Some more details on the violation: https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

Basically you need to extract the onclick EventListener into its own JS file.

Load jquery in popup chrome extension

1 Answers1