title: Show/Hide DIV Chrome Extension
body: <p>What I'm trying to achieve is simple.</p>
  
  <p>Now there's an extension already made called <a href="https://chrome.google.com/webstore/detail/bohahkiiknkelflnjjlipnaeapefmjbh" rel="nofollow">Note Anywhere</a>. Notice when you click the app's icon the sticky note displays on the webpage, and you're able to drag, and drop that div anywhere you want.</p>
  
  <p>What I'm trying to achieve is very similar.</p>
  
  <ul>
  <li>Click #1 fades div in</li>
  <li>Click #2 fades div out</li>
  </ul>
  
  <p>I'll worry about drag and drop once I can get the div to actually show. I've spent over 16 hours trying to achieve this effect, and after getting extremely agitated I had to edit my question, and ask once more with updated info. So this will no longer be a problem again.</p>
  
  <p>Here's my code.</p>
  
  <p><strong>Manifest</strong>:</p>
  
  <pre><code>{
      "name": "CamDesk",
      "version": "0.0.1",
      "description": "The Desktop Webcam Widget",
      "permissions": ["tabs", "http://*/*", "https://*/*"],
      "background_page": "background.html",
  
     "browser_action": {
        "default_icon": "images/logo.png",
        "default_title": "CamDesk"
     },
  
     "content_scripts": [ {
        "matches": ["http://*/*", "https://*/*"],
        "css": ["css/style.css"],
        "js": ["js/jquery.js", "js/jquery-swfobject.js", "js/background.js"]
     } ],
  
     "icons": {
        "48": "images/48x48.png",
        "256": "images/logo.png"
     }
  }
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.camdesk {
      display:none;
      width:320px;
      height:240px;
      background-color:#FFF;
      box-shadow:0px 4px 16px rgba(0, 0, 0, 0.8);
      overflow:hidden;}
  </code></pre>
  
  <p><strong>Background Page</strong>:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="js/background.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
      &lt;div id="camdesk"&gt;
          Please install the most recent version of flash to use CamDesk.
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Content Script</strong>: <em>"To Show &amp; Hide DIV"</em></p>
  
  <pre><code>$(document).ready(function() {
      $('.camdesk').flash({
          swf: './camdesk.swf',
          width: 320,
          height: 240
      });
  });
  
  chrome.browserAction.onClicked.addListener(getMessage);
  getMessage();
  
  function getMessage() {
      chrome.tabs.getSelected(null, function(tab) {
          chrome.tabs.sendRequest(null, function(tab) {
              $('.camdesk').fadeOut(350);
          }); //getting response from content script
      });
  }
  
  chrome.extension.onRequest.addListener(
    function(sendResponse) {
      if $('.camdesk').fadeIn(350);
        $('.camdesk').fadeOut(350);
      else
        sendResponse({}); 
    });
  </code></pre>