0

我正在尝试创建一个菜单应用程序，并在尝试将 div 样式设置为“display:none;”时遇到了一些麻烦。我在 jsfiddle 中运行了代码，它运行良好。这是我的清单：

{
  "manifest_version": 2,
  "name": "MenuProject",
  "short_name": "Menu",
  "description": "",
  "version": "0.0.1",
  "minimum_chrome_version": "38",

  "icons": {
    "16": "assets/icon_16.png",
    "128": "assets/icon_128.png"
  },

  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

这是我的背景.js：

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create(
    'index.html',
    {
      frame:"none",
      id: 'mainWindow',
      bounds: {width: 300, height: 200}
    }
  );
});

这是我的 index.html：

<body>  <style>
* {
    margin: 0;
    padding: 0;
}

body {
  height:200px;
 background-color: #f3f0ef;
}

.menu-container {
  -webkit-app-region: drag;
  display: block;
  position: relative;
  width: 300px;
  background-color: #f3f0ef;
  padding: 0;
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
}

.nav{
  background-color: #ed6b3a;
  height:40px;
 /* border-radius:5px 5px 0 0;*/
}

.settings {
  height:20px;
  float:right;
  background-image:url(http://i.imgur.com/CLs7u.png);
  width:20px;
  margin:10px;
}

.menu ul {
  list-style:none;
}

.menu ul li {
  border-top:1px solid rgba(0,0,0,0.1);
  padding:11px 10px;
  box-shadow:inset 0 1px 1px #fff;
  text-indent:10px;
  }

.menu ul li a {
  font-size:14px;
  color:#a4a3a3;
  font-family: 'Strait', sans-serif;
  font-size:14px;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff;
}

.menu ul li img {
  float:left;
  margin:-2px 0 0 0;
}
/*
.menu ul li:hover {
  border-left:3px solid #ed6b3a;
  background-color:rgba(0,0,0,0.02);
}*/
</style>

  <script>
//var menumain = document.getElementById('menu');
function openPaste(){
//var menumain = document.getElementById('menu');
document.getElementById('menu').style = "opacity:0;"
//  menumain.style="display:none;";
}
</script>
<link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>
<div class="menu-container">

  <div class="nav">
      <div class="settings"></div>
  </div>

  <div id="menu" class="menu" style="display:block;">
      <ul>
    <li onclick="openPaste();"><a><img src="http://i.imgur.com/4JPrK.png"><p>Quick Pastebin</p></a></li></button>
    <li><a><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
    <li><a><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
    <li><a><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
  </ul>
  </div>
</div>
</body>

当我在 jsfiddle 中运行它时，单击“打开 Pastebin”按钮可以正常工作。但是当我将它作为 chrome 应用程序运行时，单击它什么也不做。我究竟做错了什么？

4

1 回答 1

1

Chrome 应用程序不允许使用内联脚本。您必须将脚本放入不同的文件中，并在index.html.

由于内容安全策略，此代码不会执行。将任何内联代码包含在您的index.html将不起作用，包括：

<li onclick="openPaste();">

阅读此内容以获得更好的理解。

于 2016-03-03T13:42:47.277 回答