0

i would like to call a api via post from my chrome-extension, the problem is a don't get the response data.

i just got Cross-Origin Read Blocking (CORB) in the console and the response is empty.

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8080/api/v1/login/ldap with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

first i tried to call the ajax directly:

$.ajax({
            type:    'POST',
            url:     'http://127.0.0.1:8080/api/v1/login/local',
            data:    postBody,
            success: function(resData, status, jqXHR) {
                console.log({resData, status, jqXHR});
            },
            error:   function(jqXHR, status) {
                console.log({jqXHR, status});
            }
        });

i tried to move my ajax call from content.js to background.js like this

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if(request.contentScriptQuery === 'login') {
            $.ajax({
                type:    'POST',
                url:     'http://127.0.0.1:8080/api/v1/login/local',
                data:    postBody,
                success: function(resData, status, jqXHR) {
                    sendResponse([
                        {
                            resData: resData,
                            status:  status,
                            jqXHR:   jqXHR
                        }, null
                    ]);
                },
                error:   function(jqXHR, status) {
                    sendResponse([
                        null, {
                            status: status,
                            jqXHR:  jqXHR
                        }
                    ]);
                }
            });
        }
//right here?
return true;
    });

content.js

chrome.runtime.sendMessage({contentScriptQuery: 'login'}, messageResponse =>{
            console.log(messageResponse);
        });

But in this case i got the following error:

"Unchecked runtime.lastError: The message port closed before a response was received."

and i don't know how to keep the port open and recieve the request body. or even if i get a body or stil get the corb problem.

here is my last try from today, still port closed :-(

"Unchecked runtime.lastError: The message port closed before a response was received."

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    if(request.contentScriptQuery === 'loginLocal') {
        $.ajax({
            type: 'POST',
            url:  'http://127.0.0.1:8080/api/v1/login/local',
            data: postBody
        }).then(function(resData, status, jqXHR) {
            sendResponse([
                {
                    statuscode: jqXHR.status,
                    resData:    resData,
                    status:     status
                }, null
            ]);
        }, function(jqXHR, status) {
            sendResponse([
                null, {
                    statuscode: jqXHR.status,
                    status:     status
                }
            ]);
        });
        return true;
    }
});
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
JarITZ
  • 29
  • 7
  • You need `return true` at the end of onMessage listener to keep the channel open for sendResponse. – wOxxOm Jun 06 '19 at 14:34
  • just before the last }) or where do i have to add it. It is more difficult because i use ajax? -> i added it in my question. if it is right there it does not work :-( – JarITZ Jun 06 '19 at 14:45
  • Make sure to click the reload icon in chrome://extensions page and also reload the web page. I also don't think `jqXHR` can be transferred via messaging because it contains functions, you shouldn't need it in your content script anyway. – wOxxOm Jun 06 '19 at 15:33
  • https://stackoverflow.com/a/55215898/441757 and https://stackoverflow.com/a/55156266/441757 and https://stackoverflow.com/a/55175483/441757 may be relevant (or may not be…) – sideshowbarker Jun 06 '19 at 16:39
  • @sideshowbarker sorry they did not help me. i have a problem with the message port that closes too early. – JarITZ Jun 07 '19 at 07:57
  • @wOxxOm i try to do it without jqXHR but it does not help at all. i always reload the extension before test it, but thanks for the advise. i updated my code above but same problem as before message port closes – JarITZ Jun 07 '19 at 07:58

1 Answers1

3

i changed to sendRequest - works for me:

content.js

chrome.extension.sendRequest({contentScriptQuery: 'login'}, function(messageResponse) {
            const[response, error] = messageResponse;
            if(response === null){
                console.log(error);
            } else {
                console.log(response.resData);
            }
});

background.js

chrome.extension.onRequest.addListener(function (message, sender, sendResponse) {
        if(message.contentScriptQuery === 'login') {
            $.ajax({
                type: 'POST',
                url:  'http://127.0.0.1:8080/api/v1/login/local',
            }).then(function(resData, status, jqXHR) {
                sendResponse(sendResponse([
                    {
                        resData: resData,
                        status:  status
                    }, null
                ]));
            }, function(jqXHR, status) {
                    sendResponse([
                        null, {
                            status: status
                        }
                    ]);
            });

            return true;
        }
    });
JarITZ
  • 29
  • 7