Как получить список всех ссылок для изображений на странице

-2

Я работаю над созданием моего первого расширения хром. Я сделал несколько примеров расширений, которые можно найти на https://developer.chrome.com/extensions/getstarted Как получить список всех ссылок для изображений на странице

Как создать расширение, которое вернет список URL-адресов всех изображений на открытой вкладке в хроме? Я уже спрашивал об этом, но я обновил свой вопрос, надеюсь, сделать его более понятным.

Я знаю основы в javascript, поэтому я хотел бы создать расширение с этим языком. Это не похоже на то, что я хотел бы получить полный URL-адрес, и я бы хотел использовать простой javascript вместо того, чтобы пытаться использовать json, которого я не знаю.

Вот мой manifest.json файл

{ 
"name": "Getting Started", 
"description": "Get The sources of the images", 
"version": "2.0", 
"permissions":[ 
    "activeTab", 
    "tabs" 
], 
"browser_action":{ 
    "default_title": "Image Source", 
    "default_popup": "popup.html" 
}, 
"content_scripts":[ 
    { 
     "matches": ["<all_urls>"], 
     "js": ["content.js"] 
    } 
], 
"manifest_version": 2 
}

А вот подам content.js

var len = document.images.length; 
var imgs = document.images; 
var sources = ""; 
for (var i = 0; i < imgs.length; i++){ 
    sources = sources + imgs[i].src + "<br>"; 
} 
document.getElementById("sources").innerHTML = sources; 
/*if (len > 0){ 
    alert(len + " images were found on page"); 
} 
else{ 
    alert("No images were found on page"); 
}*/ // Used these to see if there were any images on the page

И, наконец, мой popup.html

<html> 
<head> 
    <title>Awesome extension</title> 
    <script src="content.js"></script> 
</head> 
<body> 
    <p id="sources">There might be images here</p>  
</body> 
</html>

источник

2016-12-30 Christopher Benner

Я хотел бы предложить, что вы читали [Chrome обзор расширения архитектуры] (https://developer.chrome.com/extensions/ обзор # арка) (и, возможно, работайте, читая страницы, связанные с ними). Он имеет общую информацию об архитектуре, которая должна помочь вам понять, как вообще организовано/сделано. – Makyen

Вы можете использовать Array.prototype.map :

var imageUrls = Array.prototype.map.call(document.images, function (i) { 
    return i.src; 
});

Это должно дать вам массив всех URL-адресов изображений.

Edit:

Так, чтобы получить изображения с активной вкладки, когда ваше расширение щелкнул вы можете вводить свой скрипт контента, используя chrome.tabs.executeScript вместо того, чтобы иметь content_scripts запись в manifest.json и использовать функцию Array.prototype.map чтобы получить массив источников образы:

popup.html

<html> 
    <head> 
     <title>Awesome extension</title> 
     <script src="popup.js"></script> 
    </head> 
    <body> 
     <p id="sources">There might be images here</p>  
    </body> 
</html>

popup.js

var callback = function (results) { 
    // ToDo: Do something with the image urls (found in results[0]) 

    document.body.innerHTML = ''; 
    for (var i in results[0]) { 
     var img = document.createElement('img'); 
     img.src = results[0][i]; 

     document.body.appendChild(img); 
    } 
}; 

chrome.tabs.query({ // Get active tab 
    active: true, 
    currentWindow: true 
}, function (tabs) { 
    chrome.tabs.executeScript(tabs[0].id, { 
     code: 'Array.prototype.map.call(document.images, function (i) { return i.src; });' 
    }, callback); 
});

manifest.json

{ 
    "name": "Getting Started", 
    "description": "Get The sources of the images", 
    "version": "2.0", 
    "permissions":[ 
     "activeTab", 
     "tabs" 
    ], 
    "browser_action":{ 
     "default_title": "Image Source", 
     "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
}

источник

2016-12-30 17:15:17 Hyddan

Отлично. Это помогает мне получить список URL-адресов, но как мне их просматривать с помощью popup.html. То, что я пробовал до сих пор, всегда говорит, что изображений нет, потому что он запускает content.js на моей странице popup.html. –

Я понял из HTML в вашем всплывающем окне, что изображения будут там? Если вы хотите получить доступ к текущей вкладке, посмотрите на это, например: http://stackoverflow.com/questions/1964225/accessing-current-tab-dom-object-from-popup-html – Hyddan

Почему downvote? – Hyddan

Как получить список всех ссылок для изображений на странице

ответ

Смежные вопросы