No action in passing simple message from popup.html to background.js

Question

I'm new to chrome extension coding and relatively new to javascript. The extension is of the type page_action . I'm trying to send a simple message to background.js on click of button in popup.html. I've seen similar questions on this site, however nothing seems working. The loading of the extension is fine. please help

/* __background.js__  */

function checkForValidUrl(tabId, changeInfo,tab){
console.log("Extension loaded");
chrome.pageAction.show(tabId);
}

function readMessage (request, sender, sendResponse){
alert("reached");
console.log(request.greeting);
sendRequest({farewell:"goodbye"});
}

chrome.extension.onRequest.addListener(readMessage);
chrome.tabs.onUpdated.addListener(checkForValidUrl);


 /* __manifest.json__  */
{
"name": "DemoExtension",
"version": "1.0",
"manifest_version": 2,
"background": {
    "scripts": [
    "jquery.js",
    "background.js"
    ]
},

"description": "demo extension to learn coding chrome extensions.",
"icons": {
    "16": "images/16x16.png",
    "48": "images/48x48.png",
    "128": "images/128x128.png"
},

"page_action": {
    "default_icon": {
        "19": "images/19x19.png",
        "38": "images/38x38.png"
    },
    "default_title": "Demo extension",
    "default_popup": "popup.html"
},

"options_page": "options.html",

"permissions": [
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*"
]   
 }

-

__popup.html__
<!DOCTYPE HTML>
<html>
<head>
    <title>Demo extension</title>
    <script src="./popup.js"></script>
</head>
<body>
    <button id="clickMe">Add</button>   
</body>
</html>

-

__popup.js__
function sendMessageToExtn() {
alert("reached in popup");
chrome.extension.sendMessage({
    greeting : "hello" }, 
            function(response) { console.log(response.farewell);
});
}

document.getElementById('clickMe').addEventListener('click', function () {
sendMessageToExtn();

});

I'm now getting error Uncaught TypeError: Cannot call method 'addEventListener' of null (anonymous function)

There is a similar question .

possible duplicate of [Port error while changing chrome extension from manifest v1 to v2](http://stackoverflow.com/questions/11913575/port-error-while-changing-chrome-extension-from-manifest-v1-to-v2) — apsillers, Aug 14 '13 at 18:38
@apsillers I've added the manifest.json. I don't think port error is there. Please confirm it yourself. I will remove the script from popup.html to an external file and try again. Thanks — Abhishek, Aug 14 '13 at 18:53
I've provided that duplicate because you've made the same mistake (inline script in your HTML), fixable in the same way, even though the mistake causes different problems for you than it did for that other person. — apsillers, Aug 14 '13 at 19:24
@apsillers I've moved the script to external js file, however i'm getting following error in debugger now. __Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:"__ __popup.html__ ` Add item to CreateYourLook ` — Abhishek, Aug 14 '13 at 20:54
(You can edit your question with new code, since comments do not allow line breaks.) The problem is still with inline code -- this time the inline `onclick` event handler. See the [duplicate I linked earlier](http://stackoverflow.com/a/11914797/710446) for the solution using `addEventListener`, listed under "Inline event listeners". — apsillers, Aug 14 '13 at 20:59
@apsillers i've edited the question with new code as per the suggestions. Now there is a different error and couldn't any solutions on google — Abhishek, Aug 14 '13 at 21:48
@apsillers got it , the error was solved by moving `` to the body, below the button. The error was solved. Thanks — Abhishek, Aug 14 '13 at 21:55

score 0 · Accepted Answer · edited Apr 12 '21 at 12:30

0

Solved the problem. Firstly incorporating the suggestions by @apsillers. Then finally by moving the

<script src="./popup.js"></script>

in the body from the head, below the button tags.

edited Apr 12 '21 at 12:30

Ɗααɳιടԋ Sყҽԃ

128
1
12

answered Aug 16 '13 at 15:23

Abhishek

63
2
10

No action in passing simple message from popup.html to background.js

1 Answers1