Chargement d'une image à partir d'une extension chrome sur une page

J'ai quelques images dans mon extension chrome que je veux que l'utilisateur soit en mesure de les injecter dans leur page quand ils sont à l'aide de l'extension.

Les images apparaîtront dans l'extension de la fenêtre pop-up, mais lorsque l'utilisateur clique sur le bouton pour les injecter dans la page, la page ne pouvez pas y accéder/voir pour une raison quelconque. Je sais qu'il existe des moyens spécifiques de l'injection de JS et CSS dans la page (déjà fait) mais je ne vois pas de moyen de faire la même chose avec des images.

J'ai obtenu les autorisations suivantes dans mon manifeste (ajouté le chrome-extension://one en espérant que serait-il le faire):

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

Plus précisément, je suis en train de modifier le favicon, un peu comme ceci (j'ai aussi essayé sans le /, et avec google chrome.l'extension.getURL("favicons/exemple.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);

Ce code fonctionne parfaitement si l'iconURL est complet http://adresse...

Vous pouvez voir le code à mon dépôt github ici (favicon.js la ligne 54, appelé par tabdisplay.js la ligne 260).

L'accès à des fichiers à partir de l'extension devrait être accordée par défaut. Comment êtes-vous essayer de les charger, et quels types de messages d'erreur (si il y a) êtes-vous?
Pas d'erreur, seulement, rien ne se passe. Il se trouve juste là.

OriginalL'auteur cmcculloh | 2011-05-29

  1. 13

    Au lieu de:

    iconURL = "/favicons/example.png";

    Il devrait être:

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

    qui retourne l'URL absolue vers un fichier à l'intérieur de l'extension de dossier.

    Également supprimer chrome-extension://*/* de se manifester comme il ne fait rien.

    J'ai déjà essayé la fonction getURL chose. Ne fonctionne pas...
    Hm, vous avez raison cela ne fonctionne pas, mais il devrait. Si vous essayez d'injecter de l'icône comme une <img> balise à une page sur laquelle il travaille, tandis qu'à l'intérieur <link> tag, il ne le fait pas. Cela ressemble à un chrome bug.
    Soumis bug: code.google.com/p/chromium/issues/detail?id=84373
    J'ai enlevé la première / et il fonctionne très bien. N'oubliez pas de l'ajouter dans votre web autorisés ressources dans le manifeste.

    OriginalL'auteur serg

  2. 19

    Dans le cas où les gens commencent à avoir ce problème sur google Chrome 17 ou plus tard, c'est parce que le manifeste doit inclure la web_accessible_resources section pour permettre une image emballé à l'intérieur de l'extension à être injecté dans une page web.
    les ressources accessibles sur le web

    OUI! C'était le problème que j'ai eu, je vous remercie beaucoup! 😀

    OriginalL'auteur hamx0r

  3. 2

    Depuis que vous tentez d'ajouter une image à partir de l'extension dans une page web, il y a des mesures de sécurité qui ne permet pas directement à l'aide d'un chrome:// url à charger des choses comme des images.

    Une solution je pense est de coder l'image dans les data uri et de l'envoyer comme du texte, puis en utilisant ce que le src de l'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);

    Toutefois, la seule façon que je peux penser à faire cette conversion est à l'aide d'un élément canvas.

    OriginalL'auteur tcooc

  4. 2

    Vous pouvez utiliser du CSS ainsi, assurez-vous d'ajouter cette image dans le manifeste.

    "web_accessible_resources": [

    à l'intérieur de CSS: 

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

    OriginalL'auteur STEEL