Отправка формы в расширении Chrome не работает

Question

Я создаю расширение Chrome, которое состоит из формы, которая при отправке выполняет onsubmit="submit(); return false;".

Я знаю, что метод submit работает, потому что я создал кнопку вне формы с onclick="submit()", и это прекрасно работает.

Вот форма:

<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>

А вот функция submit():

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;
}

Итак, когда я нажимаю кнопку «Отправить» со всеми заполненными полями, происходит следующее: поля комментариев и теги становятся пустыми, и все… Я пробовал множество различных способов выполнения submit(), но ни один из них не был сработало ... Спасибо.

Answer 1

Отправка запроса в другой порт запрещена политикой перекрестного происхождения. Если вы откроете консоль ошибок, вы, вероятно, увидите ошибку безопасности.

Вы можете установить разрешения домена в манифесте, но не можете установить порт.

Answer 2

Загружается ли страница с расширения или с веб-сайта, и вы пытаетесь вызвать функцию submit() в скрипте содержимого расширения?

Если функция submit находится в скрипте контента, ее нельзя вызвать с веб-сайта, поскольку система безопасности расширений Chrome не разрешает вызовы javascript между содержимым страницы и javascript в скриптах содержимого.