Open (import) File In A Chrome Extension
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
Solution 1:
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:
elseif(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:
- Create a new input file element using
document.createElement. - Append this element as child of html
<body>. - Trigger click event from the element (it is important to remind that the
.clickevent in chrome cannot be triggered on object that are not part of any DOM object). - Handle change event for the input file.
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 = newFileReader();
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.
Post a Comment for "Open (import) File In A Chrome Extension"