Расширение для Chrome: как спарсить данные со страницы и передать в функцию?

Question

[stupin_a]

Всем привет! Я новичок в JS и в программировании.
Сейчас работаю первые месяцы бэкенд джуном (ruby), но дали задачку написать расширение для Хрома (а js знаю только на базовом..).
Собственно, в данный задача состоит в том, чтобы расширение позволяло одним кликом взять из CRM Vtiger со странички проекта название, и создать карточку в Trello (пока без дополнительных фич). По примерам реализовал авторизацию через oauth-trello, карточку (задачу в trello) тоже научился создавать.
Да и вытащить со странички название проекта я смог (опять же по примерам на stackoverflow и др.), но передать эту переменную в функцию для создания карточки не получается(

Основной вопрос - как корректно передать переменную myProject в newCard, чтобы карточка в trello создавалась с именем проекта (взятый из ".projectname")? Например, даже когда вызываю console.log(myProject) в creationSuccess, я вижу название проекта, но в trello карточка создается с пустым именем( Если нужно, скину ссылку на репозиторий.

Не подскажете, что я делаю не так?)
Заранее благодарю за отклик)

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

[Stalker_RED]

myProject заполняется асинхронно. На момент создания newCard в myProject еще пусто.
вынесите создание newCard в отдельную ф-цию и вызывайте после заполнения myProject