Open new tab with local index.html from popup and send there a message

Question

The SendMessage does not work on new Tab console.

The message does not arrive on the tab that was just opened.

Nothing is displayed on the console.

Below is all the files in the format I am using

Manisfest.json

{
   "name": "SYSHP",
   "version": "1.0",
   "description" : "SYSHP",
   "manifest_version": 2,
   "permissions": [ "http://*/", "tabs", "activeTab", "notifications", "background" ],
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js",
                "lib/jquery.min.js"
            ],
            "run_at": "document_end"
        }
    ],

   "icons": {
    "128": "icon128.png",
    "48": "icon48.png"
    },

   "browser_action": {
       "default_icon": "icon128.png",
       "default_title": "SYSHP",
       "default_popup": "popup.html" 
   }

}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SYSHP</title>
</head>
<body>

    <button id="preparaLista">Preparar Lista</button>
    <button>Download</button>


</body>

<script src="lib/jquery.min.js"></script>
<script src="popup.js"></script>

</html>

popup.js

var url = ('chrome-extension://' + chrome.i18n.getMessage('@@extension_id') + '/index.html');

 document.getElementById("preparaLista").addEventListener("click",handleClick);

    function handleClick(){
        chrome.tabs.create({ url: url }, function(tab) {
            chrome.tabs.sendMessage(tab.id, {type: "action_example"});
        });
    }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>SYSHP</title>
</head>
<body>




</body>
<script src="lib/jquery.min.js"></script>
<script src="content.js"></script>


</html>

content.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

    console.log("received message from popup: "+request.type);

});

This is loading the normal files. But the message does not display on the console. tks — marcelo.delta, Jul 13 '17 at 16:19
*Please* don't load jQuery into **every** page (`content_scripts` with your `matches`) unless you **need** to. jQuery is 85kiB of minimized code. This is a significant burden with which to saddle *every single page*. What of those of us who have 100's of tabs open? While it's possible you really *need* to load jQuery, it's more likely that you are doing so for the convenience of saving a couple/few hundred characters in your own code by not using vanilla JavaScript. If that's the case (we have no way to know), doing so is a *very* poor trade-off from your user's point of view. — Makyen, Jul 15 '17 at 04:21
You are using `chrome.tabs.sendMessage()` to try to send a message to a tab containing an HTML page from within your extension. This will not work. Such pages run in the background context. See [Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)](https://stackoverflow.com/a/41420772) — Makyen, Jul 15 '17 at 04:27
For your content scripts: `"js":[ "content.js", "lib/jquery.min.js"]` won't work. If you are wanting to use jQuery in *content.js*, then you need `"js":[ "lib/jquery.min.js","content.js"]`. — Makyen, Jul 15 '17 at 04:29

score 0 · Accepted Answer · answered Jul 13 '17 at 22:10

popup.js

document.getElementById("preparaLista").addEventListener("click",handleClick);

    function handleClick(){
        chrome.tabs.create({ url: chrome.runtime.getURL("index.html") }, function(tab) {

            var handler = function(tabId, changeInfo) {
                if(tabId === tab.id && changeInfo.status === "complete"){
                chrome.tabs.onUpdated.removeListener(handler);
                chrome.tabs.sendMessage(tabId, {type: 'opa'});
                }
            };

            // in case we're faster than page load (usually):
            chrome.tabs.onUpdated.addListener(handler);
            // just in case we're too late with the listener:
            chrome.tabs.sendMessage(tab.id, {type: "action_example2"});

        });
    }

content.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

    console.log("received message from popup: "+request.type);

});

Is this an actual answer, or is it additional information for your question? — Makyen, Jul 15 '17 at 04:22
While this code may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) of how and why this solves the problem would really help to improve the quality of your post. Remember that you are answering the question for readers in the future, not just the person asking now! Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply. — Makyen, Jul 15 '17 at 04:22

Open new tab with local index.html from popup and send there a message

1 Answers1