Submitting form in a chrome extension doesn't work

I'm building a chrome extension that consists on a form that when submitted executes onsubmit="submit(); return false;".

I know the method submit works because I created a button outside the form with onclick="submit()" and that works perfectly.

Here is the form:

<form method="post" name="gaffeForm" onsubmit="submit(this); return false;">
    <div>
        <div class="submitField">
            <p class="formp">Title :</p>
            <input type="text" name="title" size="50" id="pageTitle" placeholder="Title" required />
        </div>
        <div class="submitField">
            <p class="formp">URL :</p>
            <input type="url" name="url" size="50" id="pageURL" placeholder="URL" required />
        </div>
        <div class="submitField">
            <p class="formp">Error :</p>
            <textarea name="gaffe" rows="5" cols="50" id="pageGaffe" placeholder="Gaffe" required ></textarea>
        </div>
        <div class="submitField">
            <p class="formp">Comment :</p>
            <textarea name="comment" rows="5" cols="50" id="gaffeComment" placeholder="Your comment on the gaffe" required ></textarea>
        </div>
        <div class="submitField">
            <p class="formp">Tags :</p>
            <input type="text" name="tags" size="50" id="gaffeTags" placeholder="Separate the tags with a comma" required />开发者_开发技巧
        </div>
        <div id="GaffeSubmit">
            <input type="submit" value="Submit" />
        </div>
    </div>
</form>

And here is the submit() function:

function submit(f) {
    var xhr = new XMLHttpRequest();

    var title = $('#pageTitle').val().replace(/\//g, "%2F");
    var url = $('#pageURL').val().replace(/http:\/\//, "").replace(/https:\/\//, "").replace(/\//g, "%2F");
    var gaffe = $('#pageGaffe').val().replace(/\//g, "%2F");
    var comment = $('#gaffeComment').val().replace(/\//g, "%2F");
    var tags = $('#gaffeTags').val().replace(/\//g, "%2F");

    xhr.open("POST", "http://localhost:3000/F0ETF87dar8F7deO92K/" + title + "/" + url + "/" + gaffe + "/" + comment + "/" + tags, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (req.status == 200) window.close();
        }
    };
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Connection", "close");
    xhr.send();
    return false;
}

So, when I click submit with all my fields filled in what happens is that the fields comment and tags go blank, and that's it... I've tried a lot of different ways of executing submit() but none have worked... Thank you.

Is the page loaded from the extension or is it loaded from a website and you are trying to have the submit() function in an extension content script called?

If the submit function is in a content script it can't be called from a website as the chrome extension security system doesn't allow javascript calls between page content and javascript in content scripts.

Sending request to a different port is prohibited by the cross-origin policy. If you open error console you will probably see a security error.

You can set domain permissions in the manifest, but you cannot set port.