2

i have a very strange situation at chrome extension. the popup.html page contains a file input element, but when click it the file browser opens but selecting a file doesn't have any effect (eg: "change" event not fired and file name doesn't appear at file input element).

but when i do right click on extension icon and select "inspect popup" and try again to choose a file, surprisingly, file input element works and "change" event fired.

the following are extension files. load the extension and click extension icon to see file input element. clicking file input will show file browser but won't choose a file. right click on extension icon and choose "inspect popup" to open popup window. now input element works just by opening "inspect popup" window. of course you need to visit "https://developer.chrome.com" because of pageurl restrict at background.js

using jquery has no effect.

manifest.json

{
"name": "hello world",
"version": "1.0",
"description": "hello world",
"permissions": ["activeTab", "declarativeContent"],
"background": {
  "scripts": ["background.js"]
},
"page_action": {
  "default_popup": "popup.html"
},
"manifest_version": 2

}

background.js

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {

  chrome.declarativeContent.onPageChanged.addRules([{
    conditions: [new chrome.declarativeContent.PageStateMatcher({
      pageUrl: {
          hostEquals: 'developer.chrome.com',
      }
    })
    ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
  }]);

});

popup.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <input id="file-input" type="file" name="form_file">
    
    <div class="debug"></div>
        
    <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('file-input').onchange = function(ev){
    document.querySelector('.debug').appendChild(document.createTextNode("change event fired"));
};
ahmed atwa
  • 51
  • 4
  • The popup is automatically closed when the file window is opened which means its code no longer runs. You'll have to open a new tab or a new small window or insert a page element into the active tab with the file chooser. You can even display it instead of the standard popup. – wOxxOm Aug 17 '18 at 03:59
  • can you please give a code example. i am new to chrome extensions world :) – ahmed atwa Aug 17 '18 at 04:08
  • Maybe someone else will since I believe you would benefit much more by investigating this yourself. – wOxxOm Aug 17 '18 at 07:12
  • Might be helpful https://stackoverflow.com/questions/26884140/open-import-file-in-a-chrome-extension – alijandro Dec 25 '20 at 11:58

0 Answers0