CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
frio80
frio80

Reputation: 1333

Basic message passing in chrome extension seems to fail

I have read the documentation and this should be basic but I can't seem to get those alerts to appear. What's wrong?

popup.html

<html>
<head>
<script>
    function finder() {
        chrome.tabs.getSelected(null, function(tab) {
          chrome.tabs.sendMessage(tab.id, {type: "feature"}, function(response) {
            console.log(response.farewell);
          });
        });
    }
</script>
<style>
    p {
        border: 1px solid black;
        width:200px;
        font-size:10px;
    }
</style>
</head>
<body>
<p><a id="jira">Click to populate FE description</a></p>
<script>
var jira = document.getElementById('jira');
jira.addEventListener('click', finder, false);
</script>
</body>
</html>

Content Script:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    alert('sreceived');
    if (request.type == "feature") {
        alert('score!');
    }
});

Upvotes: 0

Views: 195

Answers (1)

Sudarshan
Sudarshan

Reputation: 18554

Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers (e.g. <button onclick="...">).

By above lines it is clear that your popup.html violates restrictions, which can be solved as follows:

Remove all <script> tags in popup.html and move the original code to popup.js.

<html>
<head>
<script src="popup.js"></script> <!-- Added this line -->
<style>
    p {
        border: 1px solid black;
        width:200px;
        font-size:10px;
    }
</style>
</head>
<body>
<p><a id="jira">Click to populate FE description</a></p>
</body>
</html>

I did not literally copy-paste the code in popup.js. These are the changes I made:

  1. chrome.tabs.getSelected() is deprecated in favour of chrome.tabs.query(), so I updated chrome.tabs.getSelected(null, function(tab) {});
  2. Commented out console.log(response.farewell); because there is no response handler from content script.

Final popup.js

function finder() {
    chrome.tabs.query({
        "status": "complete",
        "currentWindow": true,
        "active": true
    }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {
            type: "feature"
        }, function (response) {
            //console.log(response.farewell);
        });
    });
}
document.addEventListener('DOMContentLoaded',= function() {
    document.getElementById('jira').onclick = finder;
});

Cautions for manifest.json

  1. Ensured permissions are available as "permissions":["tabs","<all_urls>"],

  2. Permissions for content script also 

    "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
]

Final manifest.json

{
"name":"Basic Message Passing",
"description":"This demonstrates Basic Message Passing",
"browser_action":{
    "default_popup":"popup.html",
    "default_icon":"screen.png"
},
"manifest_version":2,
"version":"2",
"permissions":["tabs","<all_urls>"],
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Your content script was fine, so I did not change it.

Demonstration

Output:

enter image description here

enter image description here

Let me know if you need more information..

Upvotes: 5

Related Questions