javascript - Calling functions of parent site from an iframe inserted using chrome extension

Question

I'm trying to make a chrome extension which insert html code using an Iframe. I'm also inserting few js files to the head of the page which will call actual apis.Now i want the buttons in the iframe to call these functions and get result.How I'm supposed to do that because chrome is blocking the cross origin request as my iframe follows protocol : extension://*. And the Api calls can only be made from parent website due to csrf token.

One solution can be to not to insert html using iframe but directly to the page but it is messing up the css file of the parent website and also it is harder to maintain

Iframe

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('frame.html');

    iframe.style.cssText = 'display:block;' +
                           'width:100%;height:100%;';
    document.body.appendChild(iframe);
}

Api Calls

const apiCall = (data, url) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            registerError: false,
            url,
            type: 'POST',
            headers: {
                "X-CSRF-TOKEN": window.csrfToken
            },
            data,
            success: function (e) {
                resolve(e);
            },
            error: function (e) {
                reject(e);
            }
        }, false, false);
    })

}

Answer 1

等待大神答复