Chrome扩展表单输入文本是空白提交

Chrome extension form input text is blank on submit

本文关键字：空白 提交 文本 输入 扩展 表单 Chrome      更新时间：2023-09-26

我试图建立一个chrome扩展，从链接下载一堆项目，主要逻辑是在我的download.js文件，我希望能够指定在哪个下载子文件夹我想捆绑它们，但输入字段的值似乎是空的。这是目前为止的代码

popup.html 

<!doctype html>
<html>
  <head>
    <title>Download CVs</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <form id="folderForm">
      Subdir of downloads:
      <input type="text" id="folder">
      <input type="submit" id="download" value="Download CVs">
    </form>
  </body>
</html>

popup.js 

function bundleItems() {
  chrome.tabs.executeScript({
    file: 'download.js'
  });
}
document.addEventListener('DOMContentLoaded', function() {
  var downloadButton = document.getElementById('download');
  downloadButton.addEventListener('click', bundleItems);
});
chrome.extension.onRequest.addListener(function(logs) {
  var folder = document.getElementById('folder').value;
  logs.map(function(log) {
    chrome.downloads.download({
      url: log.attachment.link,
      filename: folder + '/' + log.attachment.filename
    });
  });
});

我从download.js发送信息到popup.js，如果我尝试在下载中下载它，一切都有效，所以我觉得发布我的download.js文件将是无用的。但是，如果我试图显示folder变量，它是空的。我已经搜索了很多关于同样问题的其他帖子，但似乎没有一个解决方案适合我。

您不能提交到Chrome扩展页面。在这种情况下，没有web服务器来处理您的POST请求。这样做只是重新加载文档(从表单中清除您的值)。

你需要防止提交，通过指定type="button"按钮。

我会在提交按钮上添加preventDefault()。

https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

相关文章：