Показать / Скрыть расширение DIV Chrome - PullRequest
Новая
       6

Показать / Скрыть расширение DIV Chrome

2 голосов
/ 08 июля 2011

То, чего я пытаюсь достичь, просто.

Теперь уже сделано расширение под названием Note Anywhere . Обратите внимание, когда вы щелкаете значок приложения, на веб-странице отображается заметка, и вы можете перетаскивать этот элемент в любое место.

То, чего я пытаюсь достичь, очень похоже.

  • Нажмите # 1 fades div в
  • Клик # 2 исчезает, делится

Я буду беспокоиться о перетаскивании, когда смогу показать div на самом деле. Я потратил более 16 часов, пытаясь достичь этого эффекта, и после сильного волнения мне пришлось отредактировать свой вопрос и еще раз спросить с обновленной информацией. Так что это больше не будет проблемой.

Вот мой код.

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": [ {
      "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({}); 
  });

1 Ответ

4 голосов
/ 08 июля 2011

Чтобы создать этот эффект, вам нужно использовать Content Scripts . Это единственный способ манипулировать DOM для веб-сайта, который вы посещаете. Поскольку вы выходите из контекста расширения (кнопка «Действие браузера»), вам необходимо использовать Передача сообщений для передачи команд на отображение / скрытие в DOM.

Итак, шаги для достижения того, что вам нужно:

  1. Создание chrome.browserAction.onClicked.addListener на фоновой странице
  2. Используйте chrome.tabs.sendRequest , чтобы сообщить DOM, что делать. Вам нужно отправить сообщение с просьбой показать или скрыть наложение, которое вы хотели.
  3. Прослушивание запросов на расширение из скрипта содержимого с использованием chrome.extension.onRequest.addListener Когда вы получаете команду Показать или скрыть от расширения, вы можете добавить / удалить DOM.

Надеюсь, это даст вам небольшой толчок!

...