XMLHttpRequestでJSONをPOST

はじめに

JSONのデータをサーバーに送って処理するのにXMLHttpRequestでPOSTしてサーブレットで受け取ります。

XMLHttpRequestでPOST

ブラウザの右クリックメニューで post json した時にデータをPOSTします。

• POSTする文字列は POST.stringify(object or array) する。
• POSTするときのヘッダーは xhr.setRequestHeader("Content-Type", "application/json")
• xhr.send(string) で送信

background.js

browser.contextMenus.create({
    id: "name",
    title: "get name",
    contexts: ["selection"]
});

browser.contextMenus.create({
    id: "postJson",
    title: "post json",
    contexts: ["all"]
});

name = "blue";
browser.contextMenus.onShown.addListener(info => {
    getting = browser.storage.local.get("name", function (value) {
        name = value.name;
        console.log("getting " + name);
    });
});

browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "name" ){
        console.log(name);
    } else if (info.menuItemId === "select text") {
        let persons = [];
        let person1 = new Object();
        person1.name = "Satoh Taro";
        person1.id = "123";
        person1.mail = "[e-mail]";
        persons.push(person1);
        let person2 = new Object();
        person2.name = "Suzuki Hana";
        person2.id = "124";
        person2.mail = "[e-mail]";
        persons.push(person2);
        let json = JSON.stringify(persons);
        console.log(json);
        var url = "http://localhost:9080/sampleWeb/TestServlet";
        console.log("start doPost");
        doPost(url, json);
        console.log("end doPost");
    }
});

function doPost(url, data) {
   console.log(url);
   var xhr = new XMLHttpRequest();
   xhr.open("POST", url);
   xhr.setRequestHeader("Content-Type", "application/json");
   xhr.onload = () => {
     console.log(xhr.status);
     console.log("success!");
   };
   xhr.onerror = () => {
     console.log(xhr.status);
     console.log("error!");
   };
   xhr.send(data);
}

このコードだけでうまくいくと思ったのですが、 xhr.statusの戻り値が 0 になってて動いてない、TCPモニターもとってみたのですがサーバーまでリクエストが来ていないような状況でした。

しばらく試行錯誤して "permissions" に "http:///" が必要だったことがわかりました。

manifest.json

{
    "manifest_version": 2,
    "name": "Sample Tool",
    "description": "Sample Tool for Firefox",
    "version": "1.0",
    "homepage_url": "https://sample.com",
    "icons": {
        "48": "icons/sample.png"
    },
    "applications": {
        "gecko": {
            "id": "[e-mail]",
            "strict_min_version": "42.0", 
            "update_url":"https://sample.com/"
        }
    },
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "options_ui": {
        "page": "options.html"
    },
    "permissions": [
        "contextMenus",
        "storage",
        "http://*/*"
    ],
    "content_scripts": [
        {
            "matches": [
                "https://qiita.com/keniooi/*"
            ],
            "js": [
                "sample.js"
            ]
        }
    ]
}

200が戻ってくるようになりました。

参考

menus.ContextType