Javascript jquery gui元素不适用于chrome扩展_Javascript_Jquery_Html_Google Chrome App

Javascript jquery gui元素不适用于chrome扩展

javascript jquery html

Javascript jquery gui元素不适用于chrome扩展,javascript,jquery,html,google-chrome-app,Javascript,Jquery,Html,Google Chrome App,尝试使用jquery制作gui元素的chrome扩展时，无法使jquery gui元素显示在html页面上，但是。。。我做错了什么 manifest.json： { "name": "my extension", "description": "my first chrome extension", "version": "0.1", "manifest_version": 2, "app": { "background": { "scripts": ["

尝试使用jquery制作gui元素的chrome扩展时，无法使jquery gui元素显示在html页面上，但是。。。我做错了什么

manifest.json：

{
  "name": "my extension",
  "description": "my first chrome extension",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js", "js/jquery-1.10.2.js", "js/jquery-ui-1.10.4.js"], "pages": ["window.html"]
  }
 },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

window.html：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

<title>Well Hello</title>
<link href="css/south-street/jquery-ui-1.10.4.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.js"></script>
<script>
$(function() {

    $( "#accordion" ).accordion();

});
</script>

</head>

<body>

<div id="accordion">
<h3>test</h3>
<div>details</div>
<h3>test</h3>
<div>details</div>
<h3>test</h3>
<div>details</div>
<h4>test</h4>
<div>SOME JAZZ GOES HERE</div>
</div>
</body>

问题是您试图运行内联javascript，自清单版本2以来，chrome扩展中不再允许使用内联javascript。将window.html中的javascript放在名为window.js的文件中，然后将其包含在脚本中

扩展层次结构：

MyExtension/
  background.js
  manifest.json
  window.html
  window.js
  js/
      jquery-1.10.2.js
      jquery-ui-1.10.4.js
  css/
      jquery-ui-1.10.4.js
      images/
             ....jqueryui images....

window.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Well Hello</title>
  <link href="css/south-street/jquery-ui-1.10.4.css" rel="stylesheet">
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/jquery-ui-1.10.4.js"></script>
  <script src="window.js"></script>
</head>
<body>
  <div id="accordion">
    <h3>test</h3>
    <div>details</div>
    <h3>test</h3>
    <div>details</div>
    <h3>test</h3>
    <div>details</div>
    <h4>test</h4>
    <div>SOME JAZZ GOES HERE</div>
  </div>
</body>
</html>

manifest.json

{
  "name": "my extension",
  "description": "my first chrome extension",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
      "background": {
        "scripts": ["background.js", "js/jquery-1.10.2.js", "js/jquery-ui-1.10.4.js"], "pages": ["window.html"]
      }
    }
}

background.js

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

为了便于将来参考，您可以右键单击启动窗口并检查元素，该元素会显示内联错误。谷歌搜索此错误消息会产生许多类似问题的结果。

我认为您为manifest.json粘贴了错误的内容。。。还有，你在控制台里犯了什么错误？哈哈，我也犯了！控制台中没有错误jquery gui元素只是没有显示在页面上，当我在浏览器中打开页面时，它们就工作了……请注意，根据清单声明，您正在构建Chrome应用程序，而不是Chrome扩展。如果你阅读扩展文档并假设它们适用于应用程序（反之亦然），你会发现事情令人困惑。在很多情况下，他们没有。感谢这一点，仍然没有出现-当你说启动窗口你是什么意思？我只是在Aptana工作室做实验？在创建window.js并将html文件引用到window.js时，当我在web浏览器中查看页面时，jquery gui元素不会出现？干杯您可以从中管理您的chrome扩展chrome://extensions 谷歌浏览器中的标签。请注意分机旁的

启动

按钮。当你点击这个按钮，你的window.html页面就会弹出，这就是我所说的启动窗口。您是否将window.js与window.html放在同一文件夹中？它应该可以工作，对我来说也可以..嗨，judgeja，还是不走运-你能告诉我你的整个结构和jquery文件吗？谢了，我把整个布局都加进去了。。我很确定你也不需要清单中的

“页面”：[“window.html”]

位，但我把它留了下来，以防你在其他地方使用它，而且它不会造成任何伤害。我认为我对我遇到的问题还不够清楚。。。以上描述了问题和解决方案，感谢您的帮助

{
  "name": "my extension",
  "description": "my first chrome extension",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
      "background": {
        "scripts": ["background.js", "js/jquery-1.10.2.js", "js/jquery-ui-1.10.4.js"], "pages": ["window.html"]
      }
    }
}

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