Laden eines Bildes aus einer chrome-Erweiterung auf einer Seite

Ich habe einige Bilder in meinem chrome-Erweiterung möchte ich die Benutzer werden in der Lage zu injizieren in Ihre Seite, wenn Sie verwenden die Erweiterung.

Die Bilder zeigen sich in der Erweiterung pop-up-Fenster, aber wenn der Benutzer auf die Schaltfläche klickt, um zu injizieren Sie in die Seite, die Seite kann nicht auf Sie zugreifen/Sie sehen aus irgendeinem Grund. Ich weiß, es gibt bestimmte Arten von Injektion JS und CSS in die Seite (bereits tun), aber ich sehe keine Möglichkeit, das zu tun die gleiche Sache mit den Bildern.

Habe ich die folgenden Berechtigungen festlegen in meinem manifest (Hinzugefügt die chrome-Erweiterungen://Hoffnung, dass es tun würde):

"permissions" : [ "tabs", "http://*/*", "https://*/*", "chrome-extension://*/*" ]

Speziell, ich versuche, ändern Sie das favicon, der Art wie diese (ich habe auch versucht ohne das führende /und mit Chrom.- Erweiterung.getURL("favicons/Beispiel.png")):

  iconURL = "/favicons/example.png";
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  link.href = iconURL;
  this.removeLinkIfExists();
  this.docHead.appendChild(link);

Dieser code funktioniert perfekt, wenn die "iconURL" ist ein voll Qualifizierter http://Adresse...

Sehen Sie die aktuellen code an meine github repo hier (favicon.js Linie 54, die durch tabdisplay.js Zeile 260).

  • Zugriff auf Dateien von der Erweiterung sollte standardmäßig gewährt. Wie werden Sie versuchen, Sie zu laden, und welche Arten von Fehlermeldungen (falls es die gibt) sind Sie immer auf???
  • Keine Fehler, einfach nichts passiert. Es sitzt nur da.
InformationsquelleAutor cmcculloh | 2011-05-29
  1. 14

    Statt:

    iconURL = "/favicons/example.png";

    Sollte es sein:

    iconURL = chrome.extension.getURL("/favicons/example.png");

    gibt die absolute URL zu einer Datei im extension-Ordner.

    Entfernen Sie auch chrome-extension://*/* aus manifestieren, die es nicht tun.

    • Ich habe bereits versucht die getURL Sache. Funktioniert nicht...
    • Hm, du hast Recht, es funktioniert nicht, aber es sollte. Wenn Sie versuchen, zu injizieren Symbol als <img> tag auf eine Seite, auf der Sie arbeitet, während im inneren <link> tag nicht. Das sieht aus wie ein chrome-bug.
    • Eingereicht Fehler: code.google.com/p/chromium/issues/detail?id=84373
    • Ich entfernte die erste / und es funktioniert. Vergessen Sie nicht, fügen Sie es in Ihrem autorisierten web-Ressourcen, die manifest.
    InformationsquelleAutor serg
  2. 20

    Fall Leute sind, die dieses problem auf Chrome 17 oder höher, ist es, weil das manifest muss die web_accessible_resources Abschnitt, um ein Bild verpackt in die Erweiterung injiziert werden in eine web-Seite.
    web zugänglichen Ressourcen

    • JA! Das war das problem, das ich hatte, ich danke Ihnen so sehr! 😀
    InformationsquelleAutor hamx0r
  3. 3

    Können Sie die Verwendung von CSS, stellen Sie sicher, dass Sie dieses Bild in sich als gut.

    "web_accessible_resources": [

    inneren CSS: 

    background-image: url("chrome-extension://__MSG_@@extension_id__/image.png");
    InformationsquelleAutor STEEL
  4. 2

    Da Sie versuchen, fügen Sie ein Bild aus der Erweiterung in einer web-Seite, gibt es Sicherheitsmaßnahmen, die nicht erlauben, direkt mit einem chrome:// url zu laden, Dinge wie Bilder.

    Einer Lösung, die ich denken kann, ist Kodieren Sie das Bild in eine data-uri und senden Sie es als text dann mit, dass als die src des img.

      iconURL = "/favicons/example.png";
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  //convert iconURL into data uri (data:image/png;base64,...)
  link.href = iconURL;
  this.removeLinkIfExists();
  this.docHead.appendChild(link);

    Jedoch die einzige Möglichkeit die ich denken kann, zu tun, die Konvertierung ist mit einem canvas-element.

    InformationsquelleAutor tcooc
Schreibe einen Kommentar