在弹出式chrome扩展中加载jquery

时间:2014-02-06 22:16:09

标签: javascript jquery google-chrome google-chrome-extension

我想创建一个chrome扩展程序,打开一个弹出窗口,我想在我的html文件中使用jquery。

我创建了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" }
}

然后我创建了一个background.js

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

然后创建我的html页面

<!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>

jquery-1.11.0.min.js位于文件夹中,但点击不起作用。 我尝试使用:

更改background.js
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" });
});

但它不起作用(content.js在文件夹中)。有谁能够帮我?我需要改变什么?感谢

1 个答案:

答案 0 :(得分:1)

我刚尝试使用我正在处理的Chrome扩展程序并在控制台中出现此错误:

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

有关违规行为的更多详情:https://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

基本上你需要将onclick EventListener解压缩到它自己的JS文件中。