注入iframe与内容脚本之间的通信--通过后台页面传递的消息
我在tab中注射一种tab。现在在iframe内部，基于用户的操作，我需要显示一些error/warning/success notifications。但是，我想在tab中而不是在iframe中显示这些通知。因此，我需要在iframe和content script之间进行通信。现在，这些notifications基于用户的操作是动态的，因此我想到了通过background page在iframe和content script之间的message passing。
因此，我所做的就是将消息从iframe发送到background。现在，background page和content script都监听这些消息，但是只有background page能够接收它们。在接收消息时，它会将它们反射回sender tab。现在content script可以接收这些消息，因为它们是从background page发送的。
现在，我使用custom events尝试了同样的方法，但是没有起作用。
，但是我想知道其他比我做的更有效的方法？？。
编辑：下面是相关代码
iframe.js:
$scope.hideFrame = function(){
sendMessageToBackground("hideFrame");
};
$scope.checkIfFormValid = function(){
if(!($scope.taskName === "" || $scope.group.selectedGroup === null )){
$scope.addTask();
}
else{
sendMessageToBackground("invalidForm");
}
};
function sendMessageToBackground(msg){
chrome.runtime.sendMessage({type: msg});
}background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.type){
case "hideFrame":
chrome.tabs.sendMessage(sender.tab.id,{type:"hideFrame"});
break;
case "invalidForm":
chrome.tabs.sendMessage(sender.tab.id,{type:"invalidForm"});
break;
}
});content.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.type){
case "invalidForm":
var n = noty({
text : ' Please fill all details',
type : 'error',
layout : 'topRight',
timeout : 10000,
theme : 'defaultTheme'
});
break;
case "hideFrame":
$("#isolatedFrame").hide();
break;
}
});使用window.parent.postMessage**(not工作的)**：
iframe.js:
function sendMessageToContent(msg){
// chrome.runtime.sendMessage({type: msg});
window.parent.postMessage({ type: "fromFrame", message: msg }, "*");
}content.js:
window.addEventListener("message", function(event) {
if (event.source != window)
return;
if (event.data.type && (event.data.type == "fromFrame")) {
console.log("Content script received: " + event.data.message);
}
}, false);另外，当我在window.parent.postMessage({ type: "fromFrame", message: msg }, "*");添加一个window.parent.postMessage({ type: "fromFrame", message: msg }, "*");并尝试查看window.parent对象时，inspected target是断开连接的。我不知道为什么会这样？？
回答 1
Stack Overflow用户
发布于 2020-10-22 06:31:24
是的，有一种更有效的方法来实现它--使用tabs.sendMessage。
扩展不能使用此方法向内容脚本发送消息。若要向内容脚本发送消息，请使用tabs.sendMessage。(见runtime.sendMessage文档 )
这是密码。
iframe.js：
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});content.js：
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
console.log('greeting:", request.greeting);
sendResponse({farewell: "goodbye"});您还可以参考https://developer.chrome.com/extensions/messaging#simple了解更多细节。
编辑
因为iframe.js是一个内容脚本，所以您应该使用chrome.runtime.sendMessage发送消息，而不使用chrome.tabs API。否则，chrome.tabs将是undefined。
https://stackoverflow.com/questions/33297084
复制相似问题
腾讯云开发者
