Chrome Extension workaround with popup html

Question

My project is a Chrome extension that will do the following.

Push the extension icon.
Popup will appear (from popup.html)
5 buttons will be in the popup.
When you click one of the four buttons, one javascript code will be executed.
close popup window.

So depending on the answer of this post over here

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

(big ups to Michael for his enormous help)

This example is only for one button. Created it with only one of my javascript code and works perfect. But when it comes to put all of the 5 buttons i 've tried to make this kind of coding but it didnt work at all (im new at javascript code so dont hate)

Here are the codes

MANIFEST.JSON

{
   "background": {
      "scripts": [ "background.js" ]
   },
   "browser_action": {
      "default_icon": "img/icon.png",
      "default_title": "TITLE",
      "default_popup": "popup.html"
   },
   "icons": {
      "128": "img/icon_128.png",
      "19": "img/icon19.png",
      "38": "img/icon38.png",
      "48": "img/icon_48_2.png"
   },
   "manifest_version": 2,
   "name": " NAME",
   "description": " DESCR ",
   "permissions": [ "activeTab" ],
   "version": "2.0"
}

POPUP.HTML

POPUP.JS

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


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

    })


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


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

    })

BACKGROUND.JS

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch (request.directive) {

             case 1 "popup-click-l":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab
                file: "script1.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.
            });

        case 2 "popup-click-f":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab
                file: "script2.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);
        }
    }
);

So the codes in the link are working PERFECT for only 1 button. in this example i am trying to make it work for 2 buttons but i cant find what im doing wrong. If anyone has any idea i would appreciate it.

Thanks a lot for your time!!!

(UPDATE 2. Updated codes for 2 buttons but not working.)

Teepeemm · Accepted Answer

You’re defining clickHandler twice, so only the second one counts. One fix would be:

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

In general, you’re repeating yourself too much. You could combine your DOMContentLoaded events into one:

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

but even better would be to put all the buttons into an array, so that popup.js is now:

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

document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.getElementsByTagName("button");
    for ( var i = 0 ; i < buttons.length ; i++ ) {
        buttons[i].addEventListener('click',clickHandler);
    }
})

(And I’d recommend button { font-size: 20px; } in your style instead of five separate ids.)

Finally, your switch statement is buggy. Once you start a case, you’ll keep going until you get to a break, so that case "popup-click-l" hits both cases. You could have a separate executeScript for each case, but even better would be to assign to fileName based on the case, and have a single injection at the end. Or best of all would be to have a javascript object define which files go with which ids, so that background.js is now:

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        var injected = {
            "click-me-l": "script1.js",
            "click-me-f": "script2.js"
        };
        chrome.tabs.executeScript(null, {
            "file": injected[request.directive],
            "allFrames": true
        });
        sendResponse({});
    }
);

Fundamentally, this comes back to a point I made in a comment: browser extensions are a bad way to learn javascript, because you’re learning two separate things at the same time. Your difficulties with switch, {}, and generally following the code is a javascript problem. Not seeing when the console tells you about syntax errors is more of a browser extension problem. And your biggest problem is that you’re not seeing which error is which.

Chrome Extension workaround with popup html

Answers (1)

Related Questions