CODEWITHSUNDEEP
javascriptgoogle-chrome-extensiontimerclick
Near
Near

Reputation: 401

Chrome extension: Clicking a button every X seconds

I am super new to chrome extension development, but I do have some quite basic JS knowledge. I am trying to make this extension where for a specific site I would have a browser action (preferably two : START and STOP). I would click a browser action (START) and a script would start that would repeatedly click one button for example every 1 or 2 minutes. Then I could click the STOP browser action to stop it.

Can anyone maybe guide me to the right direction how to do this because the whole idea of chrome message parsing and foreground/background scripts is a bit confusing to me. Also what's the best way of running a code that is repeating like this for this particular case?

Thanks a lot I appreciate all the help I can get.

Upvotes: 1

Views: 5276

Answers (1)

woxxom
woxxom

Reputation: 73526

The icon can be added with pageAction API (an icon inside the address box) or browserAction API (an icon on the toolbar). See sample extensions to get the feel how the API may be used: pageAction, browserAction.

As you can see from the samples both these APIs are used from the background script. To manipulate the active page DOM just inject a content script file/code with chrome.tabs.executeScript which will then click the button.

Here's a very basic example for browserAction without using messages because we simply can check whether our interval variable was already defined by the previous injection. The injected content script runs in its own "isolated world" so you don't have to worry about conflicts with page scripts or variables.

  • manifest.json

    {
    "name": "Start/stop",
    "version": "1.0",
    "permissions": ["activeTab"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_title": "Start me",
        "default_icon": {
            "19": "icon-start-19x19.png",
            "38": "icon-start-38x38.png"
        },
    },
    "manifest_version": 2
}

  • background.js, simple version:

    chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({file: "content.js"});
});

  • background.js, advanced version, changes the icon accordingly and independently for each tab:

    chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.browserAction.getTitle({tabId: tab.id}, function(title) {
        var newTitle, newIcon;
        if (title.indexOf("Start") == 0) {
            newTitle = "Stop me";  newIcon = "stop";
        else {
            newTitle = "Start me"; newIcon = "start";
        }
        chrome.browserAction.setTitle({tabId: tab.id, title: newTitle});
        chrome.browserAction.setIcon({
            tabId: tab.id,
            path: {
                19: "icon-"+newIcon+"-19x19.png",
                38: "icon-"+newIcon+"-38x38.png"
            }
        });
        chrome.tabs.executeScript({file: "content.js"});
    });
});

  • content.js:

    if (interval) {
    clearInterval(interval);
    interval = 0;
} else {
    var btn = document.querySelector("button.something");
    if (btn) {
        var interval = setInterval(function() {
            btn.click();
        }, 60 * 1000);
    }
}

Upvotes: 2

Related Questions