Question

我是创建Chrome扩展程序的新手，并且面临着从后台脚本（事件页面）到内容脚本保持连接打开的问题。我整天都在寻找，没有运气。大多数示例都使用非持久连接。

我的扩展程序需要将一些数据从网页发送到内容脚本。从内容脚本到后台脚本，本机消息与本机应用程序通信，后者返回通过后台脚本到内容脚本的答案，最后再次在网页上接收。

我能够将消息一直传递给本机应用程序并返回一个答案，但我的挑战是从后台传递它，因为后台脚本和内容脚本之间的连接已经死了。

文件：

的manifest.json

{
  "manifest_version": 2,

  "name": "MyExtenesion",
  "description": "MyExtension",
  "version": "0.1",

  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "MyExtension",
    "default_icon": "icon.png"    
  },
  "content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
    }
  ],
  "externally_connectable": {
    "matches": ["http://localhost/*"]
   },
  "permissions": [
    "tabs",
    "nativeMessaging",
    "http://localhost:5661/*"
  ]
}

content.js

var port = chrome.runtime.connect();

// Event sent from the web page is caught and the data is sent to the event page (background script)
document.addEventListener("MsgToContent", function(data) {  
    console.log('1 content MsgToContent');
    port.postMessage(data.detail);
});

// When the event page script connects to the content script
chrome.runtime.onConnect.addListener(function(port) {

    // When a message to the content script has been received
    //port.onMessage.addListener(function(msg) {
    chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
        alert('fra content: ' + msg);

        sendResponse();
    });
});

eventPage.js

var contentPort = null;

// Connect to native app
var port = chrome.runtime.connectNative('com.nativeApp');

chrome.tabs.onActivated.addListener(function(tabId, changeInfo, tab) {

    // When the page/tab loads, connect to its content script scope
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

        contentPort = chrome.tabs.connect(tabs[0].id);

        contentPort.onDisconnect.addListener(function() {
            console.log('tabs.query contentPort onDisconnect');
        });

        // When the content script has received a message
        contentPort.onMessage.addListener(function(msg) {
            console.log('x eventPage currentPort onMessage');
        });
    });
});

chrome.runtime.onConnect.addListener(function(pPort) {
    console.log('2 eventPage onConnect');

    // When receiving a message from the content script
    pPort.onMessage.addListener(function(msg) {
        console.log('3 eventPage onConnect onMessage');
        // Send message to the native app
        port.postMessage({ text: msg });  
    });
});

// Handles incoming messages from the native app
port.onMessage.addListener(function(msg) {
  console.log('4 eventPage port onMessage');
  contentPort.postMessage(msg); 
});

问题出在eventPage.js中。我尝试将 contentPort 当前连接到内容脚本，但当我从本机应用程序进入 onMessage 事件时，我想传递消息，我得到错误：

Error in event handler for (unknown): Error: Attempting to use a disconnected port object

在行 contentPort.postMessage（msg）;

如何保持连接打开，以便我可以发回信息？我感谢任何可以帮助我解决这个问题的提示。

我并不是真正了解沟通的最佳方式，因此欢迎任何建议。

后台脚本和内容脚本之间的连接丢失/消息

0 个答案: