Question

我有以下用例：

在Chrome扩展程序页面（即window.html）中，我需要显示一个链接/按钮，允许用户从本地系统中选择一个或多个文件。然后，这些文件将由插件加载和处理。

方法：使用input type=file生成文件打开对话框，然后处理该输入的change事件。

我的问题：当我单击弹出窗口中的按钮时，会出现“打开文件”对话框，但弹出窗口会隐藏，javascript代码会死掉。作为解决方法，如果我右键单击插件，选择＆＃34; Inspect popup＆＃34;，弹出窗口不再关闭，按钮后面的脚本会运行。

如何在用户选择文件后运行我的javascript？（或阻止弹出窗口关闭？）

代码段（仅限相关行）

window.html

 <input id="csv_multiple_load_win" type=file name=files[] multiple />

（<input>代码中未包含form代码

window.js

$( document ).ready(function() {
  ....
  $('#csv_multiple_load_win').bind('change', function(event){
  alert("Happy to process the "+event.target.files.length+" files!");
  });
  ....
}

我尝试了什么：

*从事件处理程序返回false

*在表单中包含input

*将加载脚本放在background {js中，就像在Upload File as a Form Data through chrome extension问题中一样。我尝试了两种方法。问题中的那个和答案中的那个。

*我尝试手动生成某种文件对话框（就像你在常规代码中那样），但是当我读到一些限制访问用户文件系统的安全策略时，我很早就放弃了。

请帮忙！

编辑：解决方案

正如@Xan评论的那样，没有办法防止失去焦点。当焦点丢失时，窗口关闭并且javascript被杀死。我的解决方法是将代码放在另一对html / js文件中，即new_popup.html/js。＆＃39; new_popup.html＆＃39;将包含<input ...标记和＆＃39; new_popup.js＆＃39;事件处理与先前的片段一样。

诀窍是产生一个新的窗口，其中包含这个＆new -popup.html＆＃39;作为内容。要在chrome中执行此操作，您有两种选择：作为新选项卡和独立窗口。

首先，您必须为您的＆＃39; new_popup.html＆＃39;创建一个网址。放在扩展名中的文件：

var popup_url = chrome.extension.getURL("new_popup.html");

然后，在活动窗口中创建一个新选项卡（特别是如果您想显示可能会刷新的更多信息）：

chrome.tabs.create({"url":popup_url}, function(tab){
    alert("Tab with id: "+tab.id+" created!");
});

或打开一个新窗口（我试图改变风格，但它们对我来说都是一样的）

chrome.windows.create({"url":popup_url, focused:true,type:'panel',
                       width:600, height:250},function(win){
     alert("Popup win created!");
});

祝你好运！

单击文件输入按钮时，Chrome扩展页面将关闭

0 个答案: