CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
user285594
user285594

Reputation:

Google chrome - extension and webpage is not communicating

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>

Upvotes: 1

Views: 936

Answers (2)

user285594
user285594

Reputation:

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: enter image description here

b) click the first button, and load the directory/folder enter image description here

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.

enter image description here

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

a) run web-server

enter image description here

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:

enter image description here

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

Upvotes: 3

Xan
Xan

Reputation: 77531

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.

Upvotes: 1

Related Questions