Загрузка изображения из расширения Chrome на странице

Question

В моем расширении Chrome есть несколько изображений, которые я хочу, чтобы пользователь мог вставлять на свою страницу, когда они используют расширение.

Изображения будут отображаться во всплывающем окне расширения.окно, но когда пользователь нажимает кнопку, чтобы вставить их в страницу, страница не может получить к ним доступ по каким-либо причинам.Я знаю, что есть конкретные способы внедрения JS и CSS на страницу (уже делают это), но я не вижу способа сделать то же самое с изображениями.

У меня установлены следующие разрешения вмой манифест (добавил chrome-extensions: // один надеется, что это сделает):

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

В частности, я пытаюсь изменить значок, вроде как (я также пытался безведущий /, и с chrome.extension.getURL ("favicons / example.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);

Этот код отлично работает, если iconURL является полностью квалифицированным http: // address ...

Фактический код вы можете увидеть в моем репозитории github здесь (строка 54 favicon.js, вызванная строкой 260 tabdisplay.js).

Answer 1

В случае, если люди сталкиваются с этой проблемой в Chrome 17 или более поздней версии, это потому, что манифест должен включать раздел web_accessible_resources, чтобы изображение, упакованное в расширении, могло быть вставлено в веб-страницу. веб-доступные ресурсы

Answer 2

Вместо:

iconURL = "/favicons/example.png";

Это должно быть:

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

, которое возвращает абсолютный URL-адрес файла внутри папки расширения.

Также удалить chrome-extension://*/*из манифеста, поскольку он ничего не делает.

Answer 3

Вы также можете использовать из CSS, обязательно добавьте это изображение в манифест.

"web_accessible_resources": [

внутри CSS:

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

Answer 4

Поскольку вы пытаетесь добавить изображение из расширения на веб-страницу, существуют меры безопасности, которые не позволяют напрямую использовать URL-адрес chrome:// для загрузки таких вещей, как изображения.

Решение, которое я могу придумать, состоит в том, чтобы закодировать изображение в URI данных и отправить его в виде текста, а затем использовать его в качестве источника изображения.

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

Однако единственный способЯ могу придумать, что для преобразования используется элемент canvas.