#javascript #google-chrome-extension
#javascript #google-chrome-расширение
Вопрос:
Я разрабатываю расширение Chrome, которое потребует от меня сохранения изображения с использованием контекста щелчка правой кнопкой мыши. Как я могу скопировать «Копировать адрес изображения» в Chrome с помощью JavaScript? Мне просто нужно получить URL файла изображения.
Комментарии:
1. На самом деле неясно, что именно вы хотите сделать и в чем именно проблема, поэтому у нас есть три ответа, которые, вероятно, совершенно не имеют отношения к делу. Пожалуйста, уточните. Например, опишите, как будет выглядеть рабочий процесс пользователя. Пока это звучит так, как будто вам нужен chrome.ContextMenus API в фоновом сценарии и сценарий содержимого с прослушивателем событий contextmenu.
2. В настоящее время опция «сохранить изображение как» работает в Chrome (или любом другом браузере), в частности, для именования файлов. Мне это не нравится. Я хочу заменить его своей собственной схемой именования (у меня уже есть идея), чтобы лучше организовать их. Ответ D-h-e находится на правильном пути. Он получает URL-адрес, но, похоже, не может воспроизвести его в расширении. Все, что мне нужно, это URL src изображения, когда я щелкаю правой кнопкой мыши по изображению, чтобы я мог использовать chrome.downloads API.
3. Без дополнительных подробностей я бы сказал, что вам вообще не нужен сценарий содержимого, поэтому этот ответ по-прежнему кажется неприменимым. Дело в том, что для отображения пункта контекстного меню для вашего расширения вам нужен chrome.ContextMenus API, чтобы вы могли обрабатывать все в его onClicked listener, как показано в документации и демонстрационных расширениях. В качестве альтернативы здесь может быть полезен chrome.downloads.onDeterminingFilename .
4. У меня уже настроен API ContextMenu
5. На всякий случай, документация здесь , и вы, вероятно, можете использовать
info.srcUrl
Ответ №1:
Может быть, что-то вроде этого поможет:
window.location.origin document.getElementById({imgId}).getAttribute('src');
Рабочий пример на главной странице Google:
window.location.origin document.getElementById('hplogo').getAttribute('src');
Комментарии:
1. Первый код. Как я могу заставить его работать на любом веб-сайте, а не на конкретном? Каждый сайт имеет свой собственный идентификатор img.
2. если вам нужно только для определенного изображения, тогда вам нужно использовать определенный slector, но если вы хотите указать путь для всех изображений на определенной странице, тогда сработает что-то вроде этого:
var imgs = document.querySelectorAll('img'); imgs.forEach((img) => { let path = window.location.origin img.getAttribute('src'); console.log(path); });
Ответ №2:
Если вы хотите выбрать все изображения, вы должны выбрать все изображения, например, с помощью document.getElementsByTagName('img')
Результатом выбора является HTMLCollection, который вы можете преобразовать в массив. Затем вы перебираете все изображения и добавляете событие щелчка правой кнопкой мыши (contextmenu) ко всем изображениям.
Если щелкнуть правой кнопкой мыши на изображении getURL , функция выдает путь ( this.src )
const allImgs = document.getElementsByTagName('img');
function getURL(e) {
e.preventDefault();
console.log(this.src);
}
Array.from(allImgs).forEach(img => {
img.addEventListener('contextmenu', getURL);
}) right click on images
<br>
<img src="https://www.gravatar.com/avatar/0adefd53a9e8790b181785c11f458615?s=48amp;amp;d=identiconamp;amp;r=PGamp;amp;f=1">
<br>
<img src="https://i.stack.imgur.com/rj5lM.png?s=32amp;amp;g=1">