Chrome расширение: добавить изображение в DOM - PullRequest
Новая
       52

Chrome расширение: добавить изображение в DOM

1 голос
/ 28 января 2020

Насколько я проверил, я не смог найти ответ (Inte rnet и stackoverflow) на это: когда у вас есть расширение chrome и ваш код в содержимом. js вставляет некоторый код HTML в веб-страница / DOM, как вы можете добавить изображение?

Я попробовал следующее, но это не сработало - изображение появляется, но не работает (должно ли оно быть загружено? Если да, то как?). 

document.getElementById("header").insertAdjacentHTML("afterend", "<div><img src='myimage.jpg'>This text has been added</div>");

Редактировать: (только что заметил)

1- При тестировании расширения с помощью Inspect в Chrome тег IMG хорошо внедряется, но проблема заключается в том, что URL-адрес изображения похож на http://www.example.com/myimage.jpg Очевидно, что myimage нет на example.com! Итак, как я могу найти его в расширении вместо веб-сервера?

2- В одном из ответов ниже, откуда придет runtime.getURL и где вы сможете увидеть его результаты?

1 Ответ

0 голосов
/ 28 января 2020

хорошо, я нашел ответ! в содержимом отсутствовал путь расширения. js Тег IMG. Решение объясняется здесь: http://superuser.com/questions/224500/how-to-display-local-images-in-chrome-using-file-protocol

Правильный код: 

<img src='chrome-extension://EXTENSION_ID/myimage.jpg'>

И EXTENSION_ID вашего расширения chrome отображается в вашем добавочном номере на chrome: // extensions / page. Итак, чтобы возобновить:
- добавьте ваше изображение в "web_accessible_resources" в манифесте. json
- используйте вышеуказанный синтаксический тег IMG в содержимом. js
- вы найдете свой chrome идентификатор расширения на chrome: // extensions / page
- перезагрузите расширение (на странице chrome: // extensions /) и ваш веб-сайт, чтобы протестировать расширение.
Ваше изображение должно отображаться.

...