Как получить список изображений URL-адресов в chrome extension

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

Как создать расширение, которое вернет список src всех изображений на открытой вкладке в chrome?

Я знаю основы в 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-29 Christopher Benner

Никто не собирается выполнять эту работу за вас. Покажите нам, что вы пробовали. – magreenberg

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

Чтобы получить изображения с активной вкладки при нажатии на ваш добавочный номер вы можете ввести свой скрипт контента, используя вместо этого 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 
}

источник

2017-01-04 12:14:49 Hyddan

Как получить список изображений URL-адресов в chrome extension

ответ

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