Show/Hide DIV Chrome Extension_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-18 22:45 出处：网络

What I\'m trying to achieve is simple. Now there\'s an extension already made called Note Anywhere. Notice when you click the app\'s icon the sticky note displays on the webpage, and you\'re able to

What I'm trying to achieve is simple.

Now there's an extension already made called Note Anywhere. 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.

What I'm trying to achieve is very similar.

Click #1 fades div in
Click #2 fades div out

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.

Here's my code.

Manifest:

{
    "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": [ {
      "mat开发者_Python百科ches": ["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"
   }
}

CSS:

.camdesk {
    display:none;
    width:320px;
    height:240px;
    background-color:#FFF;
    box-shadow:0px 4px 16px rgba(0, 0, 0, 0.8);
    overflow:hidden;}

Background Page:

<html>
<head>
<script src="js/background.js"></script>
</head>
    <div id="camdesk">
        Please install the most recent version of flash to use CamDesk.
    </div>
</html>

Content Script: "To Show & Hide DIV"

$(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({}); 
  });

To create that effect, you need to use Content Scripts. That is the only way you can manipulate the DOM for a website your visiting. Since your coming from the extension context (Browser Action button), you need to use Message Passing to transfer commands to show/hide to the DOM.

So the steps to achieve what you need:

Instantiate a chrome.browserAction.onClicked.addListener in the Background Page
Use chrome.tabs.sendRequest to tell the DOM what to do. You need to send a message asking it to Show or Hide the overlay you wanted.
Listen on extension requests from the Content Script using chrome.extension.onRequest.addListener When you receive a Show or Hide command from the extension, you can add/remove the DOM.

Hope that gives you a slight push!