Chrome 扩展 - 使用消息传递的后台页面表单提交。表单只提交一次答案

【问题标题】：Chrome Extension - background page form submission using messaging. Form submitting only onceChrome 扩展 - 使用消息传递的后台页面表单提交。表单只提交一次
【发布时间】：2017-12-11 22:29:08
【问题描述】：

我的 chrome 扩展程序中的消息传递存在问题。我正在将来自内容脚本的消息传递到背景页面/javascript。我的背景页面有一个表格。作为我的 background.js 的一部分，我正在填写一些输入字段，然后提交表单。

这一切似乎在我第一次加载我的 chrome 扩展程序时工作。我的背景表格已提交。但是，我在控制台中没有收到内容脚本的成功消息，来自内容脚本的任何后续消息都会导致控制台中记录错误。错误消息“（未知）的事件处理程序错误：TypeError：无法读取未定义的属性'消息'”。

我注意到，如果我从后台 javascript 中评论表单提交行，那么提交多条消息是没有问题的。这指向导致问题的表单提交。但是，我无法弄清楚问题可能是什么。任何帮助将不胜感激。

我的内容脚本的片段，记录消息：

 var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(presetText);
hiddenElement.target = '_blank';
hiddenElement.download = fileName+'.lrtemplate';
hiddenElement.click();
chrome.runtime.sendMessage({filename: fileName, preset:presetText}, function(response) {
console.log(response.message);
});

我的后台页面：

<head>
<!-- ©snow monkey lab
snowmonkeylab@gmail.com-->
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" src="background.js"></script>
</head>
<body>
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" id="trackMe">
<input type=hidden name="oid" value="00D7F000000xRQ5">
<label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text"/><br>
<label for="company">Company</label><input  id="company" maxlength="40" name="company" size="20" type="text" /><br>
<input type="submit">
</form>
</body>

我的后台javascript：

    function submitForm() {
document.getElementById("trackMe").reset();
document.getElementById("trackMe").submit();
};

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
console.log(request);
document.getElementById("last_name").value=request.filename;
submitForm();
sendResponse({message: "success"});
return true;
});

【问题讨论】：

您以 HTML 表单而不是 AJAX 请求发送“背景页面”数据是否有特殊原因？
@gearold - 我实际上是在使用网络引导销售人员的表单（标准 html 表单）将我的数据提交到销售人员数据库

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

表单的target属性默认设置为"_self"，所以提交表单会使后台页面加载服务器的结果。

您可以设置target="_blank"，但这会在每次提交表单时打开一个新选项卡。或者，可以将表单目标设置为在页面中命名一个 iframe，它将在那里加载。基本上是这样的：

在背景 html 中添加 iframe：

<iframe name="my_iframe"></iframe>

并将目标属性添加到您的表单以引用 iframe

<form target="my_iframe" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" id="trackMe">

【讨论】：

【解决方案2】：

我运行了代码，问题是 html 表单。当您手动提交 html 表单时，它将重定向到表单的“操作”。这解释了为什么它第一次起作用，而以后任何时候都不起作用。

使用 fetch api 发出 post 请求，这样你就不会被重定向。

这是一个例子：

fetch('https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8', {
    method: 'post',
    body: JSON.stringify({
      {
        last_name: 'your last name',
        company: 'your company',
        oid: '00D7F000000xRQ5'
      }
    })
  }).then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log('Returned data:', data);
  });

将 body 对象调整为模拟 html 表单所需的对象

【讨论】：