Menu
I'm trying to develop import feature for my chrome extension, but this task seems more difficult then expected.
Actually my idea is to use an
<input type="file" id="myInput">
TO load the file and then add a change listener on that element:
element.addEventListener('change', function(evt){
read_single_file(evt,tab);
}
Now there are several problem that i'm facing:
I found another solution, that suggests to add the file logic into the background page, that will not be destroyed if the popup lost focus. Then i added this function in background:
file_import = function(element, tab) {
element.addEventListener('change', function(evt){
read_single_file(evt,tab);
}, false);
element.click();
console.log("uffa");
}
And then i updated my popup.js to call the background method:
get_current_tab(function(tab){
var BGPage = chrome.extension.getBackgroundPage();
BGPage.file_import(document.getElementById('myInput'), tab);
});
And in that way the file_import is called by popup, it adds the change listener to myInput element, and opens up the File Open dialog but... opening the file dialog the popup is gone, and everything related to it, then... same problem again.
So i decided to try to create a new input file element in background page, and trigger click event from it, but obviously it doesn't work.
So, I'm stuck here, with no good ideas on how to solve that problem. Or at least i have few in my mind, but i don't know if they work, or they are just workaround.
To sum up my questions are:
460
For example, apps or extensions can allow users to upload files to a website. Allows app or extension to create, read, navigate, and write to the user's local file system at a user-selected location.
View the files belonging to an installed Chrome extension When extensions are installed into Chrome they are extracted into the C:\Users\[login_name]\AppData\Local\Google\Chrome\User Data\Default\Extensions folder. Each extension will be stored in its own folder named after the ID of the extension.
CRX files. Open the . CRX file with the WinZip/WinRAR software. If you use any other software to open it, you may get an error.
Finally I decided for the third option, which was in my opinion, and for my purposes (read content from a file and update a URL) the easiest and fastest to implement.
Here what I did:
In my popup.js, when the user presses the import button, I call chrome.tabs.executeScript and read a file with the code to be injected into the current tab page:
else if(e.target.id=="import") {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "src/content_script.js"});
});
}
Then I moved all the import logic in the content_script.js file, where I:
document.createElement.<body>..click event in chrome cannot be triggered on object that are not part of any DOM object).Here is the code:
var fileChooser = document.createElement("input");
fileChooser.type = 'file';
fileChooser.addEventListener('change', function (evt) {
var f = evt.target.files[0];
if(f) {
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
/* Handle your document contents here */
document.location.href = url_array; // My extension's logic
}
reader.readAsText(f);
}
});
document.body.appendChild(fileChooser);
fileChooser.click();
It seems that in a content script I cannot access the chrome.tabs object, so in my case I just decided to use the usual document.location.href to change the URL.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With