Chrome extension launches the app in a separate window from the domain "http://localhost:3000" . The domain uses the app React.

My React App:

React:

ponentDidMount() {
  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 Extantion:

background.js

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

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

manifest.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/*"],
      "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://*/*"
  ]
}

Error:

Chrome extension launches the app in a separate window from the domain "http://localhost:3000" . The domain uses the app React.

My React App:

React:

ponentDidMount() {
  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 Extantion:

background.js

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

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

manifest.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./*"],
      "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://*/*"
  ]
}

Error:

• javascript
• reactjs
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Apr 25, 2020 at 13:34 Aleksey Ladutska Ladutia asked Apr 24, 2020 at 18:50 Aleksey Ladutska LadutiaAleksey Ladutska Ladutia 1311 gold badge11 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The error message means there is no correctly registered listener or the extension wasn't enabled at the time the message was sent.

See sending messages from web pages section:

From your app or extension, you may listen to messages from web pages via the runtime.onMessageExternal or runtime.onConnectExternal APIs, similar to cross-extension messaging. Only the web page can initiate a connection.

So you need to replace onConnect with onConnectExternal:

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