如何从弹出窗口与background.js交互？

有没有什么办法在popup.html（或popup.js）和后台脚本之间传递信息？如何从弹出窗口与background.js交互？

我希望弹出窗口显示来自用户帐户的信息或允许他们登录，但让background.js处理认证和其他逻辑。我在清单中声明了background.js，但似乎没有迹象表明它已被使用。

编辑：如果我对这一切都错了，有一个更好的方法来做到这一点，那也会很好。

2012-03-02 Kelly Behr

相关：[背景方面的脚本（背景脚本，浏览器操作，页面操作，选项页等）之间的通信] （//stackoverflow.com/q/41420528） – Makyen 2017-02-06 21:14:07

[如何在Chrome扩展中popup.js和background.js之间进行通信？]（https://stackoverflow.com/questions/13546778/how-to-communicate -between-弹出-JS-和背景-JS-在铬扩展） – JerryGoyal 2017-11-29 05:28:44

使用chrome.extension API。

您可以来回发送请求，甚至可以更好地使用端口进行连续通信。

我给出的示例将在弹出窗口打开时创建弹出窗口和背景页面之间的双向通信。

只需创建一个包含在背景页面和弹出页面中的socket.js文件。然后在每个你可以声明：

new Socket();

这里是socket.js执行：

var Socket = function() { 
    window.socket = this; 

    this.port = chrome.extension.connect({name:"popupToBackground"}); 

    chrome.extension.onConnect.addListener(function(port) { 
     if(port.name == "backgroundToPopup") {} 
      else if(port.name == "popupToBackground") { 
      window.socket.port = chrome.extension.connect({name:"backgroundToPopup"}); 
     } 
     else { 
      return; 
     } 

     port.onMessage.addListener(function(msg) { 
      try { 
       window[msg.namespace][msg.literal][msg.method].apply(this, msg.args); 
      } 
      catch(error) { 
       // your failed action goes here. 
      } 
     }); 
    }); 
};

请务必使通用的方法为你的消息监听器工作需要。我喜欢上面给出的格式 - 它非常强大。发送消息来回只需将它们张贴到插座：

socket.post({ namespace: "myNamespace", 
       literal: "myLiteral", 
       method: "myMethod", 
       args: ["argOne", "argTwo"] 
      }); 
});

因此，如果这是从弹出的页面执行，然后在后台页面会叫：

window.myNamespace.myLiteral.myMethod(argOne, argTwo);

对我来说这是一个非常好的可重用的JavaScript对象。你甚至可以添加特定原型的功能，如果你想 - 这样它更容易发送消息：

Socket.prototype = { 
    sendOneTwo: function() { 
     socket.post({ namespace: "myNamespace", 
         literal: "myLiteral", 
         method: "myMethod", 
         args: ["argOne", "argTwo"] 
    }); 
};

现在你不得不说的是：

socket.sendOneTwo();

来源

2012-03-02 17:28:39 jjNford

注意，背景页和弹出生活在相同的过程（扩展过程），所以一个页面可以获得另一个页面的DOM窗口，然后直接调用函数或设置变量。例如，在弹出可拨打chrome.extension.getBackgroundPage修改背景：

chrome.extension.getBackgroundPage().variable = 42;

和背景页面能够调用chrome.extension.getViews得到弹出：使用传统DOM

var popups = chrome.extension.getViews({type: "popup"}); 
if (0 < popups.length) 
    popups[0].variable = 42;

另一种方式来设置共享变量的API，因为每个扩展名都有一个假来源（例如“eakjnniffhfegdpfehmnpcmjiameincp”）。因此，当您在后台修改localStorage，document.cookie或IndexedDB时，可以在弹出窗口中读回。

也就是说，即使在扩展过程中的页面中，您仍可能仍想使用消息传递API，因为它可能会使您的代码更加统一。消息传递是与内容脚本进行通信的唯一方式。

来源

2012-03-02 18:39:20 yonran

对于刚刚调试的目的，我觉得这在弹出的JS非常方便：

console = chrome.extension.getBackgroundPage().console

来源

2015-01-30 00:24:28

如何从弹出窗口与background.js交互？

回答

相关问题