Executing Chrome extension onclick instead of page load

Question

I created a Chrome extension that works as expected except that it only executes when I load a page that matches the conditions in the manifest. I have tried for hours to make it execute by clicking on the extension icon to no avail.

The closest I have been able to what I want is that I have been able to make the extension icon click to run the code, but then it does not run it on the loaded page. It runs it on the extension's space instead of the page DOM.

In the current state my code only runs when a page in the specified domain opens. I want to run it only when it matches that rule, but only when I click the extension icon.

Here is my code: manifest.json

    {
        "name": "Get Response URL",
        "version": "1.0",
        "manifest_version": 2,
        "browser_action": {
        "default_icon": "mkto_icon.png",
        "name": "Click to get URL"
        },
        "content_scripts": [{
            "js": ["contentscript.js"],
            "matches": ["http://mydomain.com/*"]
        }]
    }

contentscript.js

    if (document.getElementsByName("returnURL")){
        alert("\nThe Response URL on this form is:\n\n" + document.getElementsByName("returnURL")[0].value);
    }

Answer 1

As i see you want to run code when

• User has clicked on Browser Action ICON and
• URL pattern is a match

If so, you have use Background pages in conjunction with Tabs API.

Demonstration

This is a sample demonstration of your use case and you can put all your code and assign permissions for all match URL(s).

manifest.json

Registered Background Page, Browser Action and Permissions for Target Pages.

{
        "name": "Get Response URL",
        "version": "1.0",
        "manifest_version": 2,
        "browser_action": {
        "name": "Click to get URL"
        },
        "background":{
            "scripts":["background.js"]
        },
        "permissions":["https://www.google.co.in/*"] //Put All your URL here
 }

background.js

Put all Your Target Matching URL in a series of if conditions here

chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
    if (tab.url.indexOf("https://www.google.co.in/") != -1) { // Inspect whether the place where user clicked matches with our list of URL
        chrome.tabs.executeScript(tab.id, {
            "file": "contentscript.js"
        }, function () { // Execute your code
            console.log("Script Executed .. "); // Notification on Completion
        });
    }
});

contentscript.js

alert("Code Executed ... ");

Output

When you browse to https://www.google.co.in/ and after click of browser action you see Alert in the page.

References

• Tabs API
• Background Pages

Answer 2

use browserAction API ,see here

the onClick events may help you. also see these exsamples from google :