显示/隐藏DIV Chrome扩展

现在有一个名为Note Anywhere已经取得的延伸。注意，当您单击应用程序的图标粘滞便笺在网页上显示时，您可以拖动并将该div放到任何需要的位置。

我试图做到的，是非常相似的。在

点击＃2变淡

点击＃1衰格的div出

我会担心拖放一旦我能得到真正显示DIV。我花了超过16个小时试图达到这个效果，在变得非常激动之后，我不得不编辑我的问题，并再次询问更新的信息。所以这将不再是一个问题。

这是我的代码。

清单：

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

CSS：

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

背景页：

<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>

内容脚本：“以示&隐藏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({}); 
    });

来源

2011-07-07 Michael Schwartz

要创建效果，你需要使用Content Scripts。这是您可以操纵访问网站的DOM的唯一方法。因为从扩展上下文（浏览器操作按钮）你的到来，你需要使用Message Passing转移命令来显示/隐藏到DOM。

所以步骤来实现你需要的东西：

在Background Page
使用chrome.tabs.sendRequest实例化一个chrome.browserAction.onClicked.addListener告诉DOM做什么。你需要发送一条消息，要求它显示或隐藏你想要的覆盖。
使用chrome.extension.onRequest.addListener当您收到一个显示或扩展隐藏命令，你可以添加/删除DOM听从内容脚本延期请求。

希望，让你轻轻一推！

来源

2011-07-07 23:20:42

我似乎仍然有div不会显示的问题。我上面发布了我的代码。我究竟做错了什么？ –

你是误解背景页面。后台页面只是一个长时间运行的脚本，用于管理任务或状态。它没有实现任何视图。您需要注入另一个自定义内容脚本，用该div来修改您的DOM。然后你可以使用“chrome.tabs.sendRequest”或“chrome.tabs.executeScript”。如果你使用后者，那么你可以执行代码'chrome.tabs。executeScript（tab.id，{code：'toggleDiv（）'}）'然后你的上下文脚本将包含允许你切换的方法。 –

这是其中一个答案太糟糕了我只有一个upvote - 谢谢你。 'chrome.tabs.sendRequest'也被弃用;推荐使用'sendMessage'（https://developer.chrome.com/extensions/runtime#method-sendMessage）。 – Ben

显示/隐藏DIV Chrome扩展

回答

相关问题