Chrome extension: how to parse data from a page and pass it to a function?

Question

JavaScript

Hello! I am new to JS and programming.
Now I have been working for the first months as a backend jun (ruby), but I was given the task of writing an extension for Chrome (and I know js only on the base one ..).
Actually, at this point, the task is to make the extension allow one click to take the name from CRM Vtiger from the project page, and create a card in Trello (so far without additional features). By examples, I implemented authorization through oauth-trello, I also learned how to create a card (task in trello).
Yes, and I was able to pull the name of the project from the page (again, using examples on stackoverflow, etc.), but I can’t pass this variable to the function for creating a card (
The main question is how to correctly pass the variable myProjectin newCard so that the trello card is created with the project name (taken from ".projectname")? For example, even when I call console.log(myProject) in creationSuccess, I see the name of the project, but in trello the card is created with an empty name ( If necessary, I will throw off the link to the repository. Can
you tell me what I'm doing wrong?)
)
background.js

var myProject;
chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        window.myProject = $(request.content).find(".projectname").text(); 
    }
);
    
chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.executeScript(tab.id, {
        code: "chrome.extension.sendMessage({content: document.body.innerHTML}, function(response) { console.log('success'); });"
    }, function() { console.log('done'); });
});

// Trello Creating Card

var APP_KEY = '*app_key*';
var myList = '5d1089c67893fe7afb014694';

function trelloInit() {
    Trello.setKey(APP_KEY);
    Trello.setToken(localStorage.getItem('trello_token'));
    console.log(APP_KEY);
    console.log(localStorage.getItem('trello_token'))
}

var creationSuccess = function (data) {
    console.log('Card created successfully.');
    console.log(JSON.stringify(data, null, 2));
    console.log(myProject)
};

var newCard = {
    name: myProject, 
    desc: 'This is the description of our new card.',
    // Place this card at the top of our list 
    idList: myList,
    pos: 'top'
};

function createCard() {
    $("#trello_create_card").click(function () {
        trelloInit();
        console.log('Board creating started..');
        Trello.post('/cards/', newCard, creationSuccess);       
        console.log('Board created..');
    });
}
    
$(document).ready(createCard);

manifest.json

{
    "manifest_version": 2,
    "name": "VTIGER optimizer",
    "version": "0.0.1",
    "description": "Создание доски в Trello и чата в Discord",
    "icons": {
        "64": "icon.png"
    },
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Roonyx VTIGER optimizer",
        "default_popup": "popup.html"
    },
    "web_accessible_resources": [
        "settings/index.html",
        "popup.html"
    ],
    "options_page": "settings/index.html",
    "content_scripts": [
        {
            "js": [
                "scripts/jquery-2.1.1.js",
                "scripts/client.js",
                "scripts/key.js",
                "scripts/settings.js",
                "scripts/hashSearch.js",
                "scripts/content.js"
            ],
            "run_at": "document_idle",
            "matches": [ "<all_urls>" ]
        }
    ],
    "background": {
      "scripts": ["scripts/background.js"],
      "persistent": false
    },
    "permissions": ["storage", "identity", "tabs", "<all_urls>", "active_tab"]
}

Answer 1

myProject is populated asynchronously. At the moment newCard is created, myProject is still empty.
take out the creation of newCard in a separate function and call after filling myProject