I have developed a small chrome extension to migrate images, which consists of 5 files:
popup.html - the plugin's HTML document
This file contains HTML buttons and a script link to settings.js, which listens for the image download button to be clicked and sends a message to my content script, run.js, to find the images.
run.js - the content script (with access to the webpage's DOM).
This script receives messages from run.js, finds the image names and links I want to download, puts them into an object, and sends them via message to the background script: bootstrap.js.
bootstrap.js - runs the background page and has access to the Chrome API.
var Downloads = [];
chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.message.method == 'download'){
for( var d = 0; d <= request.message.imageLinks.length; d++ ){
chrome.downloads.download( {url: request.message.imageLinks[d],
filename: request.message.imageName[d]}, function(id){
});
sendResponse('done');
}
}
});
Everything is working smoothly as it loops through the images and downloads them. Now, my next challenge is to take the downloaded images and insert them into the file upload fields on another website (which I have open in another tab) that have the same field names, etc.. I came across this line of code in the Chrome API documentation:
//Initiate dragging the downloaded file to another application. Call in a javascript ondragstart handler.
chrome.downloads.drag(integer downloadId)
Initially, I thought this drag function might work since you can manually drag the downloaded image into the HTML file upload field without having to click and select the file. However, I couldn't find any examples or further documentation on it.
Does anyone know if it is possible to achieve this using JavaScript and the Chrome API?