I am trying to create a simple chrome extension. I was able to load the extension but when I clicked the extension icon next to the address bar I get an error : Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Why?
My manifest.json file :
{
"name" : "Test",
"version" : "0.1",
"permissions" : ["<all_urls>", "tabs", "activeTab"],
"content_scripts" : [
{
"matches" : ["<all_urls>"],
"js" : ["content.js"]
}
],
"background" : {
"scripts" : ["background.js"]
},
"browser_action" : {
"default_popup" : "popup.html"
},
"manifest_version" : 2
}
popup.html :
<html>
<head>
<link rel="stylesheet" href="popup.css">
<script src="popup.js"></script>
</head>
<body>
<button>Click</button>
</body>
</html>
popup.js
chrome.tabs.query({active : true, currentWindow : true}, (tabs)=>{
chrome.tabs.sendMessage(tabs[0].id, {action : "button_click"}, response =>{
console.log(response);
})
});
content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse)=>{
if(request.action === "button_click"){
console.log("You clicked the button");
sendResponse("success");
}
})
popup.js is working fine because it is logging the response but content.js returns undefined
response. background.js is still empty so I excluded it.
This is my first time diving into chrome APIs so I'm really confused as to why it isn't working.