Question

尝试使用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>

background.js：

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

Answer 1

问题是你正在尝试运行内联javascript，因为清单版本2，Chrome扩展程序中不再允许使用内联javascript。将你的javascript从window.html放入名为window.js的文件中，然后将其包含在脚本中。< / p>

扩展层次结构：

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>

window.js

$(function() {
    $( "#accordion" ).accordion();
});

的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
    }
  });
});

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

jquery ui元素不能用于chrome扩展

1 个答案: