How to inject content script from background

Question

I am trying to inject my content script (stored in localhost) instead of having to use the manifest.

background.js:

chrome.browserAction.onClicked.addListener(function (event) {
    show_floater = !show_floater;
    // so that there is no need of adding it in the manifest
    chrome.tabs.executeScript(null, {
        // file: 'js/content_t.js', /* my content script */ }, () => {
        file: 'https://127.0.0.1/js/test1.js', /* my content script */}, () => {
        connect(show_floater) //this is where I call my function to establish a connection     
        });
    });
});

As you can see above there is a part of code commented out. That is how I used to do it. I used to inject a js file and from there inject the file in the localhost in the DOM.

But thinking about it there should be a way to decrease the file number to 2 instead of 3 right? I tried simply changing the file that I was injecting from the background script but it does not seem to work... (I put a console.log in the file to be injected and I see nothing).

The reason for the need of the file to be stored on a server is so that I can change the code of the extension without having to push for updates on the user side. I just change it in the server and next time a user uses it it has the most current version injected.

The function connect sends a message to the active tab

function connect(sf) {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const port = chrome.tabs.connect(tabs[0].id);
        let msg = {show_floater: sf};
        port.postMessage(JSON.stringify(msg));
    });
}

I'm new to all of this

this is what i have in my contents script:

content.js:

console.log('hello');

chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (msg) {
        msg = JSON.parse(msg);
        if (!injected) {
            injected = true;

            let link = document.createElement('link');
            document.querySelector('head').appendChild(link);
            link.className = 'beebole_css';
            link.href = 'https://127.0.0.1/css/test.css';
            link.type = 'text/css';
            link.rel = 'stylesheet';

            $$beebole_button$.insert_DOM_button();
            $$beebole_button$.add_button_functionality();
            // let s = document.createElement('script');
            // document.querySelector('body').appendChild(s);
            // s.className = 'beebole_js';
            // s.src = 'https://127.0.0.1/js/test.js';
            // s.type = 'text/javascript';
        }
    });
});

Again, the commented out part is what I used to do. I simply used to inject the file from localhost as a script. Now what I do is simply calling functions to add to the DOM what I need.

this might be overkill but here are the functions:

$$beebole_button$.insert_DOM_button = function () {
    // Main divs
    let div_container = document.createElement('div');
    let div_button = document.createElement('div');
    let div_form = document.createElement('div');

    // User input
    let txt_field = document.createElement('textarea');
    let submuit_comment_button = document.createElement('button');
    let select_project = document.createElement('input');

    // SVGs
    let beebole_svg = document.createElement('div');
    let mag_glass_svg = document.createElement('div');

    div_button.className = 'beebole_menu1';

    beebole_svg.className = 'beebole_logo';
    div_button.append(beebole_svg);

    select_project.className = 'beebole_select_project beebole_text_input';
    select_project.placeholder = 'Select project...';
    mag_glass_svg.className = 'beebole_mag_glass';
    select_project.appendChild(mag_glass_svg);

    div_form.appendChild(select_project);

    // txt_field.type = 'text';
    txt_field.className = 'beebole_comment beebole_text_input';
    // txt_field.rows = '5';
    txt_field.placeholder = window.$$beebole_button$.autoComment() || 'Enter comment here...';
    div_form.appendChild(txt_field);

    submuit_comment_button.type = 'button';
    submuit_comment_button.className = 'beebole_submuit_comment beebole_button';
    submuit_comment_button.innerHTML = 'submuit';

    div_form.appendChild(submuit_comment_button);
    div_form.className = 'beebole_form hidden';

    div_container.className = 'beebole beebole_default_position';
    div_container.setAttribute('tabIndex', '1');
    div_container.appendChild(div_button);
    div_container.appendChild(div_form);

    document.body.appendChild(div_container);
};

$$beebole_button$.add_button_functionality() is just what it says -> logic for the button drag, move, etc.