我想要实现的目标很简单。
现在已经有一个扩展名为 Note Anywhere 。请注意，当您单击应用程序的图标时，便签会显示在网页上，并且您可以将该 div 拖放到您想要的任何位置。
我想要实现的目标非常相似。
- 点击 #1 淡入 div
- 点击 #2 淡出 div
一旦我能让 div 实际显示，我就会担心拖放问题。我花了超过 16 个小时试图达到这种效果，在变得极其焦躁之后，我不得不编辑我的问题，并使用更新的信息再次询问。所以这将不再是一个问题。
这是我的代码。
list :
{
"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({});
});
最佳答案
要创建该效果，您需要使用 Content Scripts 。这是您可以操作所访问网站的 DOM 的唯一方法。由于您来自扩展上下文(浏览器操作按钮)，因此您需要使用 Message Passing将显示/隐藏命令传输到 DOM。
实现您需要的步骤:
- 实例化 chrome.browserAction.onClicked.addListener在 Background Page
- 使用chrome.tabs.sendRequest告诉 DOM 做什么。您需要发送一条消息，要求其显示或隐藏您想要的叠加层。
- 使用 chrome.extension.onRequest.addListener 监听来自内容脚本的扩展请求当您从扩展程序收到显示或隐藏命令时，您可以添加/删除 DOM。
希望能给你一点小小的插入!
关于html - 显示/隐藏 DIV Chrome 扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6618157/