Difference between background script and content script in chrome extension

Question

As the questions says, I just want to know the difference between background script and content script in chrome extension. When I logged the chrome object in both the scripts, I found the different objects.

Use case

I want to inject my javascript into the page when the icon is clicked So in manifest.json I added a content script but I am unable to listen to icon click event inside content script.

chrome.browserAction is not defined in chrome object in content script.

Question

How can I listen to click event in content script. Can we include both background and content script ?

This is my manifest.json

{
  "name": "First Plugin Testing",    
  "version": "1.0",
  "manifest_version": 2,    
  "description": "Trying hands on first extension",
  "background": { "scripts": ["background.js"] },
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "content_scripts": [
    {
      "matches": ["http://*/*"], 
      "js": ["temp.js"]
    }
  ]
}

Answer 1

I have found the answer to the questions asked.

A. Can we include both content script and background script ?

Yes, we can include both the background scripts and content scripts in manifest. To do interaction between them you can use Chrome Message Passing API.

I was doing the same way but there was some error in background script which I could not see therefore I posted this question after some searching on google.

B. How can I listen to click event in content script ?

Solution: We can not have browser click event in content script. It has only partial access to chrome object So you have to receive the click handler in background script and send message to content script and do whatever you want.

Use chrome.browserAction.onClicked event in background script and then use message passing to send the information to content script that user clicked on icon.