none
How to capture JSON response of XMLHTTPRequest POST via Edge extension? RRS feed

  • Question

  • Hi,

    I am trying to fetch data from a web page. I found its data come from 2 JSON files. The web page sends 2 XMLHTTPRequest (POST) to server, and the server would response with the 2 JSON files. That's why I am trying to capture the 2 JSON files.

    I tried to develop an Edge extension to raise same XMLHTTPRequest, but I encounter Cross-Origin Resource Sharing (CORS) limitation on Edge. I am new on front-end development. Anybody know how to capture web page's background JSON data? Or how to resolve CORS limitation?

    Thanks,

    Albert Ye

    Wednesday, August 15, 2018 9:47 AM

All replies

  • Hi Albert Ye,

    Try to refer Fetch Api. MS Edge support it.

    It may help you to solve the issue.

    Fetch (or the undeniable limitations of XHR)

    Fetch Api

    Regards

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    Thursday, August 16, 2018 3:15 AM
    Moderator
  • Hi Deepak,

    I tried this, but nothing returned.

    This is manifest.json.

    {
        "name": "守望先锋生涯数据助手",
        "author": "上海咆哮帝",
        "version": "0.1",
        "description": "用于辅助守望先锋玩家整理生涯数据",
        "permission": ["*ow.blizzard.cn/career*"],
        "browser_action": {
            "default_icon": {
                "20": "images/Overwatch-128.png",
                "40": "images/Overwatch-128.png"
            },
            "default_title": "Overwatch Insight Assistance",
            "default_popup": "popup.html"
        },
        "icons": {
            "20": "images/Overwatch-128.png",
            "40": "images/Overwatch-128.png"
        }
    }


    This is the extension content.

    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="css/styles.css" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <h1>守望先锋生涯数据助手</h1>
            <p>测试中</p>
            <button id="cap">获取数据</button>
            <button id="exp">导出数据</button>
            <button id="upl">上传数据</button>
            <script src="js/popup.js"></script>
        </body>
    </html>

    And this is popup.js.

    var cap=document.getElementById('cap');
    var exp=document.getElementById('exp');
    var upl=document.getElementById('upl');
    
    // clk=function(){
    //     alert('Test');
    // }
    
    cap.onclick=function(){
        var url="http://ow.blizzard.cn/action/career/profile/gamedata?1534023511361";
        fetch(url, {method: 'POST', headers: 'application/json; charset=utf-8', credentials: 'include'}).then(function(res){
            var jjj=res.json();
            window.alert(jjj);
        });
    };
    exp.onclick=function(){window.alert('Test');};
    upl.onclick=function(){window.alert('Test');};

    This is the CSS file, but I don't think it's important to this problem.

    * {
        font-family: 'Segoe UI';
    }
    
    h1 {
        font-weight: 600;
        font-size: .9em;
    }
    
    p {
        font-weight: 500;
        font-size: .8em;
        margin-bottom: 10px;
    }

    --Albert

    Monday, August 20, 2018 5:59 PM
  • Hi Deepak,

    By the way, I have read this.

    How we captured AJAX requests from a website tab with a Chrome Extension

    Thanks,

    Albert

    Monday, August 20, 2018 6:03 PM