Zeigen/Verbergen von DIV-Chrome-Erweiterung

Was ich versuche zu erreichen ist einfach.

Gibt es jetzt eine Erweiterung bereits genannt Hinweis: Überall. Beachten Sie, wenn Sie auf das Symbol der app die Notiz angezeigt, auf der Webseite, und Sie sind in der Lage, per drag-and-drop, das div wo immer Sie wollen.

Was ich versuche zu erreichen, ist sehr ähnlich.

  • Auf #1 blendet div in
  • Auf #2 blendet div aus

Werde ich sorgen über drag-and-drop sobald ich die div-show tatsächlich. Ich habe über 16 Stunden versuchen, um diesen Effekt zu erzielen, und nach immer sehr aufgeregt, ich hatte zu Bearbeiten meine Frage, und bitte Sie noch einmal, mit aktualisierten Informationen. So wird dies kein problem mehr sein wieder.

Hier ist mein code.

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;}

Hintergrund Seite:

<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>

Inhalt Skript: "Zu Zeigen & Ausblenden, 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({}); 
  });
InformationsquelleAutor Michael Schwartz | 2011-07-07
  1. 4

    Erstellen, die Wirkung, die Sie verwenden müssen Content-Scripts. Das ist der einzige Weg, können Sie das DOM manipulieren für eine website Ihren Besuch. Seit Ihr von der kommenden Erweiterung Kontext (Browser-Action-button) verwenden, benötigen Sie Message Passing transfer von Befehlen zum ein - /ausblenden, um den DOM.

    Also die Schritte, um zu erreichen, was Sie brauchen:

    1. Instanziieren chrome.browserAction.onClicked.addListener in der Hintergrund-Seite
    2. Verwenden chrome.tabs.sendRequest zu sagen, der DOM, was zu tun ist. Sie müssen eine Nachricht zu senden bittet, es zu Zeigen, oder Verstecken Sie die überlagerung, die Sie wollte.
    3. Hören auf die Erweiterung von Anfragen aus dem Inhalt Skript mit chrome.- Erweiterung.onRequest.addListener, Wenn Sie erhalten, ein-oder Ausblenden Befehl von der Erweiterung, Sie können hinzufügen/entfernen Sie die DOM.

    Hoffe, dass gibt Ihnen einen leichten push!

    • Ich Schaffe es immer noch das problem, dass das div nicht angezeigt werden. Ich habe meine code oben. Was mache ich falsch?
    • Sie sind Missverständnis hintergrund-Seiten. Hintergrund-Seiten ist nur eine lange ausführen von Skripts, die verwaltet, eine Aufgabe oder einen Zustand. Es spielt keine Umsetzung keine anzeigen. Sie injizieren müssen anderen benutzerdefinierten Inhalt Skript, das ändert Ihr DOM mit div. Dann können Sie entweder "Chrom.tabs.sendRequest" oder "chrome".tabs.executeScript". Wenn Sie das letztere, dann können Sie code ausführen, der chrome.tabs.executeScript(tab.id, {code: 'toggleDiv()'}) Dann Ihrem Kontext Skript enthält Methoden, die es ermöglichen, Sie zu wechseln.
    • Dies ist eine von den Antworten, wo es ist schade, ich habe nur einen upvote - danke. Auch chrome.tabs.sendRequest ist veraltet; sendMessage (developer.chrome.com/extensions/runtime#method-sendMessage) wird empfohlen.
    InformationsquelleAutor Mohamed Mansour
Schreibe einen Kommentar