I have been looking for an answer for almost a week now, but having read all the stackoverflow items i can't seem to find a solution that is working for me.

The error that i'm having is :

Port: Could not establish connection. Receiving end does not exist. lastError:30 set   lastError:30 dispatchOnDisconnect messaging:277

folder layout :

img
   developer_icon.png
js
   sidebar.js
   main.js
   jquery-2.0.3.js
manifest.json

my the manifest.json file looks something like this (it is version 2) :`

"browser_action": {
  "default_icon": "./img/developer_icon.png"
},

"content_scripts": [
{      
  "matches": ["*://*/*"],
  "js": ["./js/sidebar.js"],   
  "run_at": "document_end"
}
],

"background" : {
    "scripts" : ["./js/main.js","./js/jquery-2.0.3.js"] 
},

I want to handle the user clicking the extension icon so i could inject a sidebar in the existing website (because the extension i would like to develop requires that amount of space). So in main.js :

chrome.browserAction.onClicked.addListener(function(tab) {          
        chrome.tabs.getSelected(null, function(tab){        
            chrome.tabs.sendMessage(
                //Selected tab id
                tab.id,                         
                //Params inside a object data
                {callFunction: "toggleSidebar"}, 
                //Optional callback function
                function(response) {
                    console.log(response);
                }
            );
        });
    });

and in sidebar.js :

chrome.runtime.onMessage.addListener(function(req,sender,sendResponse){
    console.log("sidebar handling request");
    toggleSidebar();
});

but i'm never able to see the console.log in my console because of the error. Does someone know what i did wrong?

Thanks in advance!