Executing extension action without pageAction or browserAction

Question

I am making a dedicated extension for my website and I was wondering if it's possible to have the extension respond to a specific button click only on my website. I want to be able to execute captureVisibleTab when a user clicks a capture button on the page.

Answer 1

Overview

1. Inject a Content Script into the webpage in question.
2. Attach an event listener to the button.
3. In that listener, send a message to the Background page.
4. In the background tab, execute captureVisibleTab.

---

More in detail

1) Add a content script to your manifest:

"content_scripts" : [{
  "matches": ["*://example.com/path/to/page"]
  "js" : ["content.js"]
}]

2) In the content script (which will by default run after the page has loaded), assign a listener to the button:

// content.js
document.getElementById("myButton").addEventListener("click", handler);

3) Inside that handler, send a message to the background page:

// content.js
function handler(){
  chrome.runtime.sendMessage({ myButton : true });
}

4) In the background page, listen for that message and execute the code you want:

// background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  if(message.myButton) { doStuff(sender); }
});

function doStuff(tab){
  // captureVisibleTab or whatever you want 
}

---

Alternative solution

As abraham suggested, it's possible to use External Messaging to let your page itself send the message.

1) Add your site to "extenrally_connectable" manifest field:

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

2) In your webpage, chrome.runtime.sendMessage will be exposed if the user has your extension installed. You will need to know your extension's ID to use it.

// website.js
if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  // Installed
  var extensionId = "abcdefghijklmnoabcdefhijklmnoabc";
  chrome.runtime.sendMessage(extensionId, { myButton : true });
  // Maybe do some error-handling in a callback
}

3) In the background, you'll need onMessageExternal instead:

// background.js
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == "http://example.com/path/to/page" && message.myButton) {
      doStuff(sender);
    }
  }
);