Google chrome - extension and webpage is not communicating

Question

I am trying to access from webpage to extension and from extension to webpage. here is my following unit test but its all failing. how do i get feedback from extension to my webpage? and how do i verify my webpage is connected to the extension or if its received the query?

Extension Manifest.json:

{
  "name" : "Idle - Simple Example",
  "version" : "1.0.1",
  "description" : "Demonstrates the Idle API",
  "externally_connectable": {
    "matches": ["http://localhost/*"]
  },  
  "background" : {
    "scripts": ["background.js"]
  },
  "permissions" : [ "idle" ],
  "manifest_version": 2
}

Extension background.js:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

chrome.runtime.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"});
  });

Webpage http://localhost/index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>I am WebPage</title>
</head>
<body>

<script type="text/javascript" >
if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  console.log("Step 1: trying");
  chrome.runtime.sendMessage("omodcbfdcmifigpokakmlmobfidhgnij",{greeting: "hello"}, function(response) {
    console.log(response);
  });

}
</script>

</body>
</html>

Your code doesn't make the slightest sense. Can you perform [Rubber Duck Debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging) and verify what you wanted to do? — Xan, Feb 03 '16 at 22:08
I have updated the code. i am sending greeting hello but nothing happens. — , Feb 03 '16 at 22:20

score 3 · Answer 1 · answered Feb 03 '16 at 23:43

NOTE:

There are too many confusions. not very well explained and documented. we should answer them very well here, so that its clear enough like spoon feed.

it does not matter if localhost is used it works with Google Chrome. i was able to run it as http://localhost/index.html without making fake domain.

Goal of this steps: make my webpage (here webpage means http:// or https://www.example.com/file_iam_working.html) connecting extension (here extension means manifest.json and background.js file), there is also called app to not to get confuse the whole thing, we are working on webpage and extension on this issue.

i will document later for app only, so that its easy to read and do it on your own without wasting too much time. lets not get confused.

Step 1: make manifest.json and background.js to make our extension

manifest.json:

{
  "name" : "Idle - Simple Example",
  "version" : "1.0.1",
  "description" : "Demonstrates the Idle API",
  "externally_connectable": {
    "matches": [
      "*://localhost/*"
    ]
  }, 
  "background": {
      "scripts": [ "background.js" ]
  },   
  "permissions" : [ 
    "idle",
    "*://localhost/*"
  ],
  "manifest_version": 2
}

background.js:

console.log("Step 1 - boot");
chrome.runtime.onMessageExternal.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"});
});

Step 2: load the extension in google chrome

a) navigate to:

b) click the first button, and load the directory/folder

c) once its reloaded as extension, you will see as below (approximately) and it has an ID. if it was app it would had another button called "launch", we are not making this as app so ignore that.

Step 3: run your webpage to connect to the extension you just prepared.

a) run web-server

b) make your webpage so that you can open it as http://localhost/index.html or https://localhost/index.html, in this example we are making this bulletproof for http://. So i made one file index.html and with following source code.

index.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>I am WebPage, like Facebook or Stackoverflow. Think like kid of 5 years old</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>

<script type="text/javascript" >  

if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  console.log("Step 1: trying");
  chrome.runtime.sendMessage("omodcbfdcmifigpokakmlmobfidhgnij",{greeting: "hello"}, function(response) {
    console.log(response);
  });

}
</script>

</body>
</html>

Step 4: in your google chrome go to console and see the output from extension to webpage, shown below:

Stay smiling :) and make answers more easy-way, so that kids can learn-it without thinking its rocket science like complicated.

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

You are mixing up different communication types in Chrome. You need to re-read the guide in the docs.

Your background listens to onMessage event, that only registers messages internal to the extension.

It also tries to send a message with chrome.tabs.sendMessage, which only communicates with content scripts. Of which you don't have any.

Your webpage code sends a message that is considered external and therefore needs onMessageExternal listener.

Note that a background page cannot send a message to the webpage: if you need bidirectional communication, you can either establish a port with connect/onConnectExternal or add a content script in the mix with something like that and that.

A separate issue is that Chrome may not allow localhost as a connectable domain. A solution is to assign a fake domain to your machine with hosts file.

edited May 23 '17 at 10:28

Community

1
1

answered Feb 03 '16 at 22:31

Xan

74,770
16
179
206

Sir thank you its working now but it was a nightmare for me to get started. Please see my EDIT. thank you for your advise. you are genius. – Feb 03 '16 at 23:37
1

Please undo your edit and post it as a second answer - that would be the norm for Stack Overflow Q&A format. Will be happy to upvote, too. – Xan Feb 03 '16 at 23:38
Thank you sir. it was very kind of you that i finally understood the basics of Google chrome extensions. i have updated my EDIT section to answer section. – Feb 03 '16 at 23:43

Google chrome - extension and webpage is not communicating

2 Answers2