Question

我正在尝试实现我自己的chrome扩展程序，在某个特定事件上，它会创建一个浏览器通知，并使用在background.js中计算的数据填充弹出窗口

这是mymanifest文件：

{
    "name": "Dummy name",
    "description": "Description",
    "manifest_version": 2,
    "version": "1.1.3",
    "icons": {
        "16": "icon_16.png",
        "48": "icon_48.png",
        "128": "icon_128.png",
        "256": "icon_256.png"
    },
    "browser_action": {
        "default_icon": "icon_48.png",
        "default_title": "Test",
        "default_popup": "popup.html"
    },
    "permissions": ["background","webRequest","webRequestBlocking","webNavigation","tabs","notifications"],
    "background": {
        "scripts":["jquery-1.8.1.min.js","classy.js","background.js"]
    }
}

我在background.js中调用sendMessage

show : function(result) {
    var that = this;
    chrome.extension.sendMessage({greeting: "hello"}, function(response) {
        console.log(response);
    });

    if(window.webkitNotifications) {
        var notification = webkitNotifications.createHTMLNotification('notification.html');
        notification.show();
        setTimeout(function(){
            notification.cancel();
            }, '7000');
        }
    }

我在popup.js中的消息监听器（来自chrome扩展示例）

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

我得到的唯一错误是

端口错误：无法建立连接。接收端没有存在。

感谢您的帮助！

Answer 1

弹出窗口没有标签ID，因此您将收到错误。

在这种情况下，您可以使用chrome.runtime.onMessage.addListener和chrome.runtime.sendMessage({ msg: "something_completed", data: { subject: "Loading", content: "Just completed!" } });。

所以在 background.js

中

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.msg === "something_completed") {
            //  To do something
            console.log(request.data.subject)
            console.log(request.data.content)
        }
    }
);

在 popup.js

中

nodes = Jenkins.instance.globalNodeProperties
nodes.getAll(hudson.slaves.EnvironmentVariablesNodeProperty.class)

if ( nodes.size() != 1 ) {
  println("error: unexpected number of environment variable containers: ${nodes.size()}, expected: 1")
} else {
  envVars = nodes[0].envVars
  envVars[args[0]] = args[1]
  Jenkins.instance.save()
  println("okay")
}

我希望它会对你有所帮助。

谢谢，

Answer 2

要解决此问题，您需要首先向background.js发送握手消息，然后将实际数据从background.js发送到popup.js 例如：在我的情况下，我所做的是

popup.js

＆＃13;

chrome.runtime.sendMessage({data:"Handshake"},function(response){
	
			});
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
	str = JSON.stringify(message.data);
});

＆＃13;

background.js

＆＃13;

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
//alert(message.data);
	chrome.runtime.sendMessage({data:datax},function(response){
			});
			});

＆＃13;

我想要做的是，只要我们点击图标，握手消息就会被发送到background.js，当它收到它时，我们就可以发送变量或者我们想要发送的任何数据popup.js在popup.html上呈现它。

Answer 3

使用runtime.sendMessage向后台脚本发送消息，使用tabs.sendMessage从后台发送到内容脚本。

请注意，您需要指定标签ID：

chrome.tabs.query({ active: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { greeting: 'hello' }, (response) => {
        console.log(response);
    });
});

您可以在此处找到完整的示例和文档：https://developer.chrome.com/extensions/messaging#simple

Answer 4

这是我发现的将数据从background.js发送到popup.js的两种最简单的方法：

1）使用存储空间

将值保存到存储中，一旦打开弹出窗口，它将从存储中获取值并将其显示在弹出窗口中。

background.js

chrome.storage.sync.set({ 'dataValue1': 'Some data 1.' });
chrome.storage.sync.set({ 'dataValue2': 'Some data 2.' });

popup.js

function updatePopup() {
    chrome.storage.sync.get(['dataValue1', 'dataValue2'], function (data) {
        document.getElementById("popupElement1").innerText = data.dataValue1;
        document.getElementById("popupElement2").innerText = data.dataValue2;
    });
}    
document.addEventListener('DOMContentLoaded', updatePopup);

popup.html

<html>    
<head>
    <script src="popup.js"></script>
</head>    
<body>
    <p id="popupElement1"></p>
    <p id="popupElement2"></p>
</body>    
</html>

manifest.json

{
    "name": "Background2popup",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This is a demo",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "permissions": [
        "<all_urls>",
        "storage",
        "tabs"
    ]
}

2）使用chrome.runtime.sendMessage（）

打开弹出窗口后，您会从弹出窗口向后台发送一条消息以建立连接/握手（否则，将得到“未经检查的运行时。lastError：无法建立连接。接收端不存在。”）。从后台向弹出窗口发送消息，但弹出窗口未打开）。建立连接后，首先从后台使用sendResponse将要发送的数据发送到弹出窗口。

background.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.method == "getStatus") {
        console.log(request.data)
        sendResponse({ method: "peepee", data: "poopoo" })
    }
});

popup.js

chrome.runtime.sendMessage({ method: "getStatus", data: "fag" }, function (res) {
    document.getElementById("popupElement1").innerText = res.method;
    document.getElementById("popupElement2").innerText = res.data;
return true;
});

popup.html＆manifest.json 与第一个示例相同

Answer 5

localStorage 解决方案

因为弹出窗口没有持久状态，您可能希望使用 localStorage 来存储弹出窗口状态并在弹出窗口打开时预加载它，并使用 storage 事件跟踪弹出窗口状态的变化打开。

背景：

localStorage.setItem('popupData', JSON.stringify({ tabReady: true }));

弹出窗口：

// Load the state from localStorage when popup opens
let popupData = JSON.parse(localStorage.getItem('popupData'));

// Keep track of changes to the popup state while the popup is open
window.addEventListener('storage', (e) => {
  if (e.key === 'popupData') {
    popupData = JSON.parse(e.newValue);
    console.log(popupData.tabReady);
  } 
});

将消息从background.js传递给popup.js

5 个答案:

localStorage 解决方案