Chromeapp set div display style

Question

I am trying to create a menu-app, and ran into some trouble when trying to set the div style to "display:none;". I ran the code in jsfiddle, and it works fine. Here is my manifest:

{
  "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"]
    }
  }
}

Here is my background.js:

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

Here is my 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>

When I run it in jsfiddle, clicking the "Open Pastebin" Button works fine. But when I run it as a chrome app, clicking it does nothing. What am I doing wrong?

score 1 · Answer 1 · edited Mar 03 '16 at 16:02

1

Chrome Apps do NOT allow inline scripts. You have to put your script into a different file and refer to that script file in your index.html.

Because of the Content Security Policy, this code won't execute. Including any inline code in your index.html will not work, including this:

<li onclick="openPaste();">

Read this for better understanding.

edited Mar 03 '16 at 16:02

Adrian Rodriguez

3,232
2
24
34

answered Mar 03 '16 at 13:42

kailniris

8,856
2
17
24

Check out console if there is any error message in it. There will be. (You can open the console by right click -> inspect inside your chrome app window if you run it in a dev mode). My bet is you did not changed the following part: `
` This is an inline javascript, it won't run in chrome app. Instead you should give an id to it like "myLi". And in your script.js file create a click event listener to this object like: `document.getElementById("myLi").addEventListener("click", function(){ openPaste(); });`

kailniris

Mar 04 '16 at 07:27

wait...it's not working. I have this code, which listens for a button click and changes the value of a form, but it's not working.... `document.getElementById("trigger").addEventListener("click", function(){ document.getElementById('urlname').value = 'hi'; });` – Mdbook Mar 07 '16 at 18:48

I can't... My administrator disabled Inspect -_- could I send you the file somehow? – Mdbook Mar 08 '16 at 18:41

just create a new question with the new source code. Anyway if you want to code without a console you will have a hard time – kailniris Mar 10 '16 at 11:24

Chromeapp set div display style

1 Answers1