Geek Answers Handbook

Open (import) file in chrome extension

I am trying to develop an import function for my chrome extension, but this task seems more difficult than expected.

Actually, my idea is to use

<input type="file" id="myInput">

Download the file, and then add the change listener to this element:

 element.addEventListener('change', function(evt){ read_single_file(evt,tab); }

Now there are a few issues that I am facing:

  • The first problem is that the pop-up window closes when you open the open dialog box and causes the destruction of all related objects and code using the tooltip. And looking at another question, this is the normal behavior of the chrome extension, when it has lost focus, the popup will be destroyed.

  • I found another solution offering to add file logic to the background page, which will not be destroyed if the pop-up window loses focus. Then I added this function in the 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 so the import_file is called by the popup, it adds a change listener to the myInput element and opens the file open dialog, but ... the popup window opens the dialog with the file, and everything connected with it, then ... the same problem again.

So, I decided to try to create a new input file element on the background page and trigger a click event from it, but obviously it does not work.

So, I'm stuck here, not having good ideas on how to solve this problem. Or at least I don’t have much, but I don’t know if they work, or they just get by.

  • One of them is to move the import function to the devtools area (since this extension is useful for the developer, it makes sense), where I hope that the open file dialog will not destroy my extension.
  • Or maybe, maybe, move the logic of the import file to an external page that opens a new tab and imports the values ​​from the files. In this case, since I only need access except for the contents of the file, this is the current bookmark URL, maybe I don’t need to use the Google Chrome API.
  • The third idea is to insert the html element on the current page, and then access it from the extension, adding a listener directly to this element, in which case I do not think that my listener is destroyed if the pop-up window (the page will reload immediately after import, therefore, my hidden input will remain only for the time required for the operation).

To summarize, the following questions:

  • There is a clean way to read the contents of a file inside the chrome extension, without having to use external files, open new tabs, etc. (if possible, I prefer to store everything inside the extension)?
  • If it is not possible to pre-populate a new tab using a JavaScript file?
  • Can I add a listener to DOM elements inside the current page?
+7
javascript google-chrome google-chrome-extension
source share
1 answer

Finally, I decided to use the third option, which, in my opinion, and for my purposes (read the contents of the file and update the URL), is the easiest and fastest to implement.

Here is what I did:

In my popup.js , when the user clicks the import button, I call chrome.tabs.executeScript and read the file with the code that needs to be inserted into the current bookmark:

 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 to the content_script.js file, where I:

  • Create a new input file element using document.createElement .
  • Add this element as a child of the html <body> .
  • Trigger event of a click from an element (it is important to recall that the .click event in chrome cannot be fired on an object that is not part of any DOM object).
  • Descriptor change event for 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 = new FileReader(); reader.onload = function(e) { var contents = e.target.result; /* Handle your document contents here */ document.location.href = url_array; // My extension logic } reader.readAsText(f); } }); document.body.appendChild(fileChooser); fileChooser.click();

It seems that in the script content 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.

+9
source share

More articles:


All Articles