How to show Chrome Extension on certain domains?

Question

I\'m writing my first Chrome Extension. I\'ve used permission, but I\'m seeing my button everywhere.

How can I only show the button on the addresses I\'m writing th

Answer 1

Create background.js which checks for updated and highlighted tab.

function checkForValidUrl(tabId, changeInfo, tab) {

   // If  'example.com' is the hostname for the tabs url.
   var a = document.createElement ('a');
   a.href = tab.url;
   if (a.hostname == "example.com") {
       // ... show the page action.
       chrome.pageAction.show(tabId);
   }
};

// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
//For highlighted tab as well
chrome.tabs.onHighlighted.addListener(checkForValidUrl);

Create popup.html and popup.js in the similar manner.

You can use the variables defined in background.js in content scripts (popup.js) with chrome.extension.getBackgroundPage().variableName

Here's the example extention download link.

For your reference and ease, here's the sample manifest.json file

 {
    "manifest_version": 2,
    "name": "Example Extension",
    "version": "1.0",

    "background": {
        "scripts": ["background.js"]
    },

    "page_action":{
        "default_icon": "images/icon_16.png",
        "default_popup": "popup.html",
        "default_title": "Title for the extension"
    },
    "permissions": [
        "tabs"
    ]
}