Detect a button click in the browser_action form of a Google Chrome Extension

Question

How can something so simple be so impossible?

All I want to do is click the browser_action button of my extension, open a form with a couple of settings, and then cl

Answer 1

Your Goal

• Click extension button
• Extension popup window opens with controls
• Execute script on current tab based on controls in extension popup

Tips

• Think of the background page as the control hub. It takes incoming requests from various scripts in your Chrome extension, has elevated permissions to do things like cross-domain requests (if defined in the manifest), and more.
• You should use the manifest version 2 since version 1 is deprecated.
• Manifest version 2 doesn't allow inline scripts so all scripts will need to be loaded as their own file.

---

Example

manifest.json

{
    "name": "Stackoverflow Popup Example",
    "manifest_version": 2,
    "version": "0.1",
    "description": "Run process on page activated by click in extension popup",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ]
}

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch (request.directive) {
        case "popup-click":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab
                file: "contentscript.js", // script to inject into page and run in sandbox
                allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
            });
            sendResponse({}); // sending back empty response to sender
            break;
        default:
            // helps debug when request directive doesn't match
            alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
        }
    }
);

popup.html

    
        
        
    
    
        Click Me!
    

popup.js

function clickHandler(e) {
    chrome.runtime.sendMessage({directive: "popup-click"}, function(response) {
        this.close(); // close the popup when the background finishes processing request
    });
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('click-me').addEventListener('click', clickHandler);
})

contentscript.js

console.log("chrome extension party!");

---

Running Example Screenshots

Clicking extension button with browser window opened to exampley.com

After clicking 'Click Me!' button in extension popup

---

Example files in zip

http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip