Question

我的Flask应用程序应从新闻站点读取URL（文章的URL），并分析文章的属性（可读性索引，html属性等）。

我在本地运行它没有问题。我正在使用此Chrome扩展程序（https://chrome.google.com/webstore/detail/tabstore-plugin/jngplpdonggccbjlmbphlbancacmpmpp?hl=en）保存网址。单击按钮Save it之后，它将所有打开的选项卡的URL保存到json，然后我局部运行我的flask，并从保存在PC中的json读取这些url（然后我分析文本属性...）。

但是，在几周后，我想部署我的烧瓶（在Heroku / PythonEverywhere /上我还没有决定在哪里...），我意识到，它不会像这样工作，我需要弄清楚 如何将POST请求（带有URL的json文件）发送到在服务器上（而非本地）运行的Flask应用。

我编辑了一点TABS商店chrome插件-我添加了运行我的Flask应用程序的按钮（只是为了打开新站点==我的Flask应用程序），整个过程看起来就像我单击“保存URL”，然后单击按钮，使用我的Flask应用打开新标签页（已经从chrome插件获取了网址）。

已编辑...

我只是想知道如何通过Flask显示输出（我通过POSTMAN应用模拟了POST）...我的flask应用有很大一部分，其中显示了发布的URL。

@app.route('/jsonexample', methods=['POST'])
def jsonexample():
    req_data = request.get_json()
    #json is formatted as list, so we choose 1st element from list
    url_n1 = req_data[0]             

    return '''
           The 1st url is: {}
           '''.format(url_n1)

但是有人可以帮助我处理JavaScript中的POST请求吗？？？我是JS的新手。

这是我的manifest.json：

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 2,
  "name": "tabStore_MREVAK_version",
  "description": "This extension will store the urls of all the tabs opened and launch the FLASK  APP",
  "version": "1.0",
  "minimum_chrome_version": "23",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "tabs",
    "notifications",
    "fontSettings"
   ]
}

这是我的popup.html：

<!doctype html>
<html>
  <head>
    <title>tabStore</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <!-- <input type="button" id="btnOpenNewTab" value="Click to open new tab"/> -->
    <button id="saveActionId"> Save urls </button>
    <button id="btnOpenNewTab"> Click to open App </button>
    <button id="loadActionId"> Load </button>
    <input type="file" id="files" name="files[]" style="visibility: hidden;" multiple /> 
    <a id="downloadAnchorElem" style="display:none"></a>
  </body>
</html>

这是我整个插件的逻辑-popup.js：

document.addEventListener('DOMContentLoaded', function() {

    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
    //
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    // button to open stackoverflow-just placeholder, it will be link on my flask app
    window.addEventListener('DOMContentLoaded', function() {
        // your button here
        var link = document.getElementById('btnOpenNewTab');
        // onClick's logic below:
            link.addEventListener('click', function() {
                var newURL = "http://stackoverflow.com/";
                chrome.tabs.create({ url: newURL });
            });
    });




    var saveActionButton = document.getElementById('saveActionId');
    saveActionButton.addEventListener('click', function() {
        myArray = [];
        chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
        function (array_of_Tabs) {  //Tab tab
            arrayLength = array_of_Tabs.length;
            //alert(arrayLength);
            for (var i = 0; i < arrayLength; i++) {
                myArray.push(array_of_Tabs[i].url);
            }
            obj = JSON.parse(JSON.stringify(myArray));
            //alert(JSON.stringify(obj));
            var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
            var dlAnchorElem = document.getElementById('downloadAnchorElem');
            dlAnchorElem.setAttribute("href",     dataStr     );
            dlAnchorElem.setAttribute("download", "tabs.json");
            dlAnchorElem.click();
        });
    }, false);


    var loadActionButton = document.getElementById('loadActionId');
    loadActionButton.addEventListener('click', function() {
        document.getElementById('files').click();
    }, false);


    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        for (var i = 0, f; f = files[i]; i++) {
            var start = 0;
            var stop = f.size - 1;
            reader = new FileReader();
            //alert(f.name);
            // If we use onloadend, we need to check the readyState.
            reader.onloadend = function(evt) {
                if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                    jsonObj = JSON.parse(evt.target.result);
                    for (var i=0; i<jsonObj.length; i++) {
                         chrome.tabs.create({"url": jsonObj[i]}); //chrome.tabs.create({"url": 'http://www.google.com'});
                    }
                }
            };
            var blob = f.slice(start, stop + 1);
            reader.readAsBinaryString(blob);
        }
    };
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

}, false);

如何通过Chrome扩展程序向已部署的FLASK APP发送POST（带有URL的json文件）请求？

0 个答案: