Chrome Extension manipulate DOM ONLY if tab is in focus

Question

I have a Chrome Extension that subscribes to a WebSocket and pops a window when a message comes down that socket. This runs in a background script, so no matter what OS you're on, you can get alerts that pop up on your screen.

The same Chrome Extension also injects some elements into a webpage (call it "example.com") to make it more functional (note that example.com is NOT a site I have control over). For example "click a member's name to send them a message." Clicking the name opens a modal on this page where the message can be sent.

What I'm trying to do is blend these together, so that if you have an open window to example.com and it is in focus, then when a message comes in I want to open the chat in that tab itself, rather than as a new pop-up window.

The problem is: the script that injects the DOM elements for the chat only appear on the example.com/friends/ URL, whereas my background script doesn't seem to have control over the tab DOMs itself.

My question is: how can my background script to call this function? Or to itself detect the presence of the #slider ID and animate it sliding out itself?

Here is my code today:

manifest.json

...more above...
  "background":{
    "scripts": [ "background_functions.js", "event.js", "background.js", "jquery-3.2.1.min.js"],
    "persistent": true
  },

  "content_scripts": [
    {
      "matches": [
        "https://*.example.com/*"
      ],
      "js": ["jquery-3.2.1.min.js", "content_header.js"]
    },
    {
      "matches": [
        "https://*.example.com/friends/*"
      ],
      "js": ["jquery-3.2.1.min.js", "content_reserv.js"]
    },
... more below...

content_reserv.js

...more above...

    var slider_html = "<div id='slider' style='display: inline-block; top:0; margin-right: -400px; width: 400px; height: 100%; position: fixed; right: 0; z-index: 999; background-color: white;'>"+
        "<iframe frameborder='0' src='https://site-i-do-control.com/chat/' width='380' height='750'></iframe></div>";

    var slider_tab = "<div id='slider_tab' style='width: 115px; height: 39px; position: fixed; right: -40px; z-index: 998; transform: rotate(-90deg); top: 200px; background: white; font-size: 20pt; border: solid 2px black; cursor: pointer;'>💬 Chat</div>";

    function toggleSlider() {
        if(jQuery(this).css("margin-right") === "400px") {
            jQuery('#slider').animate({"margin-right": '-=400'});
            jQuery('#slider_tab').animate({"margin-right": '-=400'});
        }
        else {
            jQuery('#slider').animate({"margin-right": '+=400'});
            jQuery('#slider_tab').animate({"margin-right": '+=400'});
        }
    }

    jQuery('form').append(slider_html).append(slider_tab);
    jQuery('#slider_tab').click(toggleSlider);

background_functions.js

...more above...
    var matching_url = "example.com/friend";
    chrome.windows.getAll({populate : true}, function (window_list) {
        if(type == "sms") for(var i=0;i<window_list.length;i++) { // loop windows
            for(var j=0; j<window_list[i].tabs.length; j++) { // loop tabs
                if(window_list[i].tabs[j].highlighted) { // only concerned with the highlighted tabs

                    // Only care if the window is example.com/friend
                    if(window_list[i].tabs[j].url !== undefined && 
                        window_list[i].tabs[j].url.indexOf(matching_url) >= 0) {

                        chrome.windows.get(window_list[i].tabs[j].windowId, function(win) {
                            if(win.focused) { // only care if it is IN FOCUS

                                /* THE FOLLOWING LINE IS NOT WORKING */
                                toggleSlider(); // attempting to call the function in content_resv.js

                                console.log("Since window is already focused we did a slider instead of a pop.");
                                return false;
                            }
                        });

                    } // end "Yes, example.com/friend page has focus"
                }
            }
        }

        // TODO: fix this so it doesn't pop IF the slider executed above (change from asynch to synch)
        chrome.windows.create( windowData, function(win) {
            popWindow(windowData, win); // custom function
        });
    });
...more below...