Ошибка «Не удалось установить sh соединение. Получающий конец не существует» при попытке подключения из React

Question

Расширение

Chrome запускает приложение в отдельном окне от домена "http://localhost: 3000 ". Домен использует приложение React.

My React App:

React:

componentDidMount() {
  let connectApp = chrome.runtime.connect(
    "ID My Chrome Extension",
      {
        name: "test",
      }
    );

    connectApp.onMessage.addListener((msg, sender, sendResponse) => {
      console.log(msg);
    });

    connectApp.onDisconnect.addListener((obj) => {
      console.log("disconnected port", obj);
    });
}

Chrome Расширение:

фон. js

function sendInfoProspectWithDom(data) {
  chrome.runtime.sendMessage({
      text: "create-new-propsect"
  });
}

chrome.runtime.onConnect.addListener(function (obj) {
  console.log("onConnect");
});

манифест. json

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.1.0",
  "description": "test Description",
  "browser_action": {},
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["*://mail.google.com/*"],
      "js": ["content.js"]
    }
  ],
  "externally_connectable": {
    "ids": ["*"],
    "matches": [
      "https://localhost:3000/*",
      "http://localhost:3000/*"
    ],
    "accepts_tls_channel_id": false
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "https://*/*",
    "http://*/*"
  ]
}

Ошибка:

||||||||||||||||||||||||||||||||||||||| |||||||||||||||||||||||||||||||||

Answer 1

Сообщение об ошибке означает, что нет правильно зарегистрированного прослушивателя или добавочный номер не был включен во время отправки сообщения.

См. отправка сообщений с веб-страниц section:

Из вашего приложения или расширения вы можете прослушивать сообщения с веб-страниц через среду выполнения. onMessageExternal или среду выполнения. onConnectExternal API, похож на обмен сообщениями между расширениями. Только веб-страница может инициировать соединение.

Поэтому вам нужно заменить onConnect на onConnectExternal:

chrome.runtime.onConnectExternal.addListener(port => {
  //
});