Question

我在Chrome扩展程序中遇到了消息传递问题。我正在将内容脚本中的消息传递给后台页面/ javascript。我的背景页面有一个表格。作为background.js的一部分，我正在完成一些输入字段，然后提交表单。

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

我注意到如果我从后台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;
});

Answer 1

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

使用fetch api发出帖子请求，这样就不会重定向。

以下是一个例子：

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);
  });

将身体对象调整为模拟html表单所需的内容

Answer 2

默认情况下，表单的目标属性设置为"_self"，因此提交表单会使后台页面从服务器加载结果。

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

将iframe添加到您的背景html：

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

将target属性添加到表单以引用iframe

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

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

2 个答案: