gpt4 book ai didi

html - 显示/隐藏 DIV Chrome 扩展程序

转载 作者:太空宇宙 更新时间:2023-11-04 15:38:15 25 4
gpt4 key购买 nike

我要实现的目标很简单。

现在有一个名为 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。

那么实现你所需要的步骤:

  1. 实例化一个chrome.browserAction.onClicked.addListenerBackground Page
  2. 使用chrome.tabs.sendRequest告诉 DOM 要做什么。您需要发送一条消息,要求它显示或隐藏您想要的叠加层。
  3. 使用 chrome.extension.onRequest.addListener 监听来自内容脚本的扩展请求当您收到来自扩展程序的显示或隐藏命令时,您可以添加/删除 DOM。

希望这能给你一点插入力!

关于html - 显示/隐藏 DIV Chrome 扩展程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6618157/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com