我从一个扩展脚本收到一条消息到另一个，我可以 alert() 消息，但我不能将它分配给任何变量

Question

我正在从 background.js 向 popup.js 发送一条字符串消息。我确实在 popup.js 中收到了一条消息，但我无法对其进行操作。如果一个 alert() 它或者我将它分配给 popup.html 元素的 innerHTML，我可以查看它，但我不能将它分配给 popup.js 中的任何变量，所以我可以修改它并使用它.

我尝试了常规赋值，我尝试使用 substring() 将消息复制到另一个变量中

这里有一段 background.js，它向 popup.js 发送消息。 myString 是一个字符串：

chrome.runtime.sendMessage({
    action: "getSource",
    source: myString
});

这是一段popup.js，一旦执行background.js，就会收到消息，下面的代码可以工作，它会在popup.html中显示字符串：

chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.action == "getSource") {
container.innerHTML = request.source;}})

这也有效：

chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.action == "getSource") {
alert(request.source);}})

但是当我尝试将它分配给一个变量时，我什么也得不到（testString 仍然是空的）：

var testString = '';

chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.action == "getSource") {
testString = request.source;}})

如果我在 chrome.runtime.onMessage.addListener(...) 之外为 testString 赋值，则赋值工作正常，testString 最终为“abcde”：

var testString = '';

chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.action == "getSource") {
console.log("do nothing")}});

testString = "abcde";

我想将 request.source 的内容放在一个变量中，以便我可以对其进行操作。

谢谢。

Answer 1

chrome.runtime.onMessage.addListener 接收回调作为参数，其返回值不是同步的。在您收到来自后台的消息时，变量 testString 可能已经分配给 "abcde" 或您尝试在 addListener 函数之后分配给它的任何其他值。

您必须调用另一个函数（在 addListener 回调中），该函数将 testString 作为参数传递：

var testString = '';

function onMessageReceived (source)  {
   testString = source
   // do whatever you want with the value
}

chrome.runtime.onMessage.addListener(function (request, sender) {
  if (request.action === 'getSource') {
     onMessageReceived(request.source)
  }
})

另一种选择是将整个 chrome.runtime.onMessage.addListener 包装在 Promise 中：

function onMessageReceived (source) {
  return new Promise(function (resolve, reject) {
    chrome.runtime.onMessage.addListener(function (request, sender) {
      if (request.action === 'getSource') {
         resolve(request.source)
      }

      // don't forget to reject the Promise if some condition is not satisfied
  })
}

onMessageReceive().then(function (source) {
  // variable source contains request.source value
})