相关疑难解决方法(0)

我通过chrome扩展程序上传文件作为表单数据,我的代码如下所示.这里的问题是文件浏览窗口打开一秒钟然后消失.
该问题仅出现在Mac OS中.

manifest.json的:

"background": {
  "scripts": ["jszip.js", "background.js"]
},

background.js:

chrome.runtime.onMessage.addListener(function (msg) {
  if (msg.action === 'browse')
  {
    var myForm=document.createElement("FORM");
    var myFile=document.createElement("INPUT");
    myFile.type="file";
    myFile.id="selectFile";
    //myFile.onclick="openDialog()";
    myForm.appendChild(myFile);
    var myButton=document.createElement("INPUT");
    myButton.name="submit";
    myButton.type="submit";
    myButton.value="Submit";
    myForm.appendChild(myButton);
    document.body.appendChild(myForm);
  }
});

popup.js:

window.onload = function () {
  chrome.runtime.sendMessage({
    action: 'browse'
  });
}

我正在尝试为我的chrome扩展程序开发导入功能,但是这个任务似乎比预期更困难.

其实我的想法是用一个

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

要加载文件,然后在该元素上添加更改侦听器:

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

现在我面临几个问题:

1. 第一个问题是打开对话框打开时弹出窗口关闭,它会导致所有相关的对象和代码被弹出页面破坏.并且在查看其他问题时,这是chrome扩展的正常行为,当它失去焦点时,弹出窗口将被破坏.

2. 我找到了另一种解决方案,建议将文件逻辑添加到后台页面中,如果弹出窗口失去焦点,则不会销毁.然后我在后台添加了这个功能:

   file_import = function(element, tab) {
   
       element.addEventListener('change', function(evt){
           read_single_file(evt,tab);
       }, false);
       element.click();
       console.log("uffa");
   }
   

   Run Code Online (Sandbox Code Playgroud)

然后我更新了我的popup.js来调用后台方法:

    get_current_tab(function(tab){
        var BGPage = chrome.extension.getBackgroundPage();
        BGPage.file_import(document.getElementById('myInput'), tab);
    });

以这种方式,file_import由弹出窗口调用,它将更改侦听器添加到myInput元素,并打开文件打开对话框但是...打开文件对话框弹出消失,以及与之相关的所有内容,然后......同样的问题.

所以我决定尝试在后台页面中创建一个新的输入文件元素,并从中触发click事件,但显然它不起作用.

所以,我被困在这里,没有关于如何解决这个问题的好主意.或者至少我心里很少,但我不知道它们是否有效,或者它们只是解决方法.

• 其中之一是将导入功能移动到devtools区域(因为它是一个对开发人员有用的扩展),我希望打开文件对话框不会导致我的扩展被破坏.
• 或者另一种可能是将导入文件逻辑移动到外部页面,该外部页面打开新选项卡并从文件中导入值.在这种情况下,由于我只需要访问,除了文件内容是当前标签网址,我可能不必使用谷歌Chrome API.
• 第三个想法是将html元素注入当前页面,然后从扩展中访问它直接将侦听器添加到该元素,在这种情况下,如果弹出窗口被破坏,我认为我的侦听器不会被销毁(页面将在导入后重新加载,因此我的隐藏输入将仅保留操作所需的时间).

总结我的问题是:

1. 有一种干净的方式来读取chrome扩展中的文件内容,而无需使用外部文件,打开新标签等(如果可能,我更喜欢将所有内容保留在扩展中)？
2. 如果没有可能使用JavaScript文件预填充新选项卡？
3. 我可以在当前页面内的DOM元素中添加一个监听器吗？

我研究这个问题已经有一段时间了，但没有成功。希望有人能对此有所了解！

我工作的地方认证/授权正在被谷歌的以外进行（谷歌的Chrome扩展（浏览器操作）chrome.identity.launchwebauthflow与interactive设置为true）。我们已经为某些用户（但不是全部）成功进行了身份验证/授权流程。以下是有趣的结果：

1. 用户A点击扩展图标，点击授权按钮，成功获取验证码，将其兑换为访问令牌，并可以继续使用应用程序。
2. 用户 B 点击扩展图标，点击授权按钮，扩展弹出关闭。它在交换访问令牌的身份验证代码之前失败。
3. 用户 B 右键单击​​扩展图标，选择检查弹出窗口，单击授权按钮，成功获取验证码，将其交换为访问令牌，并可以继续使用应用程序。
4. 用户 A 在带网络的安全模式下启动设备。用户 A 点击扩展图标，点击授权按钮，扩展弹出关闭。它在交换访问令牌的身份验证代码之前失败。
5. 用户 A 在带网络的安全模式下启动设备。用户 A 打开一个选项卡并加载扩展程序的 url ( chrome-extension://pathofextension)。用户点击授权按钮，成功获取授权码，将其兑换为访问令牌，即可继续使用该应用程序。
6. 扩展程序转换为打包的应用程序。用户 A 和 B 打开应用程序，单击授权按钮，成功获取验证码，将其交换为访问令牌，并可以继续使用应用程序。

我们认为这是客户端问题，但我们都使用相同的 Chrome 版本。返回身份验证代码时，什么会导致扩展程序的弹出窗口关闭？我们不能让开发者控制台保持打开状态以查看是否出现任何错误，因为当开发者控制台打开时它工作得很好。我们正在使用$.ajaxSetup({ cache:false })以确保为 ajax 请求禁用缓存。

这是 chrome.identity.launchwebauthflow 调用的片段（最初从弹出窗口调用）：

chrome.identity.launchWebAuthFlow({url:url,interactive:true},function(response) {
    console.log('OAuth Response: '+response);
    if (response) {
        var authCode = encodeURIComponent(response.substring(response.indexOf('=')+1));
        console.log('Auth Code: '+authCode);
        userAuthorization(authCode);
    } else {
        authorizeButton();
    }
});

尝试应用后台代码解决方案后编辑的代码：

弹出脚本现在调用后台脚本：

chrome.runtime.sendMessage({type:'authorize',url:url},function(response) {
    console.log(chrome.runtime.lastError);
    console.log(response);
    if (response && response.authCode) {
        userAuthorization(response.authCode); …