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

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

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

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

  • Нажмите #1 исчезает div в
  • Нажмите #2 исчезает

Я буду беспокоиться о перетаскивании, когда смогу показать 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({}); 
  });
Источник

1 ответ

Решение

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

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

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

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

Источник
Другие вопросы по тегам