Chrome Extension - Activating a script within the popup.html for the current tab

Question

I'm not sure how to properly ask this question because it's difficult to explain so I will use an example.

What I am trying to do is figure out how to activate something like a bookmarklet using a link inside of the popup.html of a chrome extension that will interact with the current tab.

For example: If you click on the chrome extension icon, a popup appears (the usual drop-down window). In that window would be say a button that increases the size of images (like a bookmarklet for your bookmarks bar).

What I want is for that button to interact with the currently opened tab rather than the popup.html page.

I have the proper permissions (all urls and tab) inside the manifest as well as the scripts being defined. Everything tests out ok there. But I know that my solution (not working) is probably way off the mark and I may not even be close at this point. So I am asking for help here.

background.js

function zii() {

    function zoomImage(image, amt) {
        if (image.initialHeight == null) { /* avoid accumulating integer-rounding error */
            image.initialHeight = image.height;
            image.initialWidth = image.width;
            image.scalingFactor = 1;
        }
        image.scalingFactor *= amt;
        image.width = image.scalingFactor * image.initialWidth;
        image.height = image.scalingFactor * image.initialHeight;
    }
    var i, L = document.images.length;
    for (i = 0; i < L; ++i) zoomImage(document.images[i], 2);
    if (!L) alert("This page contains no images."); 

}

popup.html

<button onClick="zii()">Test</button>

The background function is also linked inside of the popup.html page as well. The actual popup.html page is very large so I just showed the basics of it here without including all of the relevant code that pertains to other aspects of the extension.

I obviously have no idea what I am doing wrong or if what I am attempting is even possible.

The Objective Summary: Simply put, I just want to click on the button within the popup.html and increase the size of the images on the currently open tab (in the same way that you would do this with a bookmarklet).

Answer 1

First I recommend reading about the extensions architecture.

If you want to inject a .js file or some code in the current window by clicking a button in the popup you can simply do so by using chrome.tabs.executeScript inside your button onclick handler while passing null as the first tabId argument as it defaults to the active tab of the current window.

For example:

chrome.tabs.executeScript(null, {
    code: "console.log('Injected.')"
});

Or:

chrome.tabs.executeScript(null, {
    file: "content.js"
});

Be sure to also have "activeTab" in your manifest.json permissions.