Question

我想要实现的目标很简单。

现在有一个名为Note Anywhere的扩展程序。请注意，当您单击应用程序的图标时，便笺会显示在网页上，您可以拖动该div，并将该div放在任意位置。

我想要达到的目标非常相似。

点击＃1淡化div
点击＃2淡出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({}); 
  });

Answer 1

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

所以实现你需要的步骤：

在chrome.browserAction.onClicked.addListener

Background Page

使用chrome.tabs.sendRequest告诉DOM要做什么。您需要发送一条消息，要求它显示或隐藏您想要的叠加层。
使用chrome.extension.onRequest.addListener收听内容脚本中的扩展请求当您从扩展程序收到“显示”或“隐藏”命令时，可以添加/删除DOM。

希望能给你一点点推力！

显示/隐藏DIV Chrome扩展程序

1 个答案: