Как реорганизовать расширение Chrome для файла drag-and-drop для устранения ошибок CORB - PullRequest
Новая
       44

Как реорганизовать расширение Chrome для файла drag-and-drop для устранения ошибок CORB

0 голосов
/ 06 апреля 2020

У меня есть старое расширение Chrome, которое добавляло функцию перетаскивания на сайт с загрузкой файлов. На сайте есть страницы на одном поддомене (например: https://foo.site.com/page1.php, https://foo.site.com/page2.php..), А конечная точка загрузки находится на другом поддомене (например: https://bar.site.com/upload.php). Начиная с предыдущей версии Chrome расширение перестало работать из-за более строгих правил CORS. POST для загрузки файла, похоже, выполнен успешно, но ответ заблокирован с ошибкой CORB, и мне нужен ответ, чтобы узнать, где находится новый удаленный путь файла.

Я попытался выполнить рефакторинг путем перемещения запросов от скрипта контента до фонового скрипта, в соответствии с рекомендациями Google. Тем не менее, я не могу понять, как поделиться файлом перетаскивания на страницу с помощью фонового скрипта. Вот пример кода:

content. js: 

var setupDragAndDrop = function () {
  (
    document.getElementById("some_element")
  ).addEventListener("drop", function (e) {
    for (var t = 0, s = e.dataTransfer.files.length; t < s; t++)
      upload(e.dataTransfer.files[t], function (e) {
        insertResponseOnPage(e); // Use the upload response to show the new remote path on the page
      });
    e.preventDefault();
  });
},

var upload = function(file, callback) {
  chrome.runtime.sendMessage(
    {
      need: "upload",
      file: file,
      callback: callback
    }
  );
}

background. js (есть некоторые другие логики c, которые позволяют сообщению заканчиваться в этом методе, но здесь он заканчивается файлом и обратным вызовом): 

var upload = function(file, callback) {
  var formData = new FormData();
  formData.append('file', file);

  const UPLOAD_URL = 'https://bar.site.com/upload.php';
  var xhr = new XMLHttpRequest();
  xhr.open('POST', UPLOAD_URL, true);
  xhr.withCredentials = "true";

  xhr.onload = callback;

  xhr.send(formData);
};

Эта проблема, которую я вижу, заключается в том, что file, заканчивающийся на фоновой странице, является пустым объектом. Мне кажется, я где-то читал, что все, что отправлено с API сообщений, должно быть JSON сериализуемым, поэтому я предполагаю, что File не так? Я получаю такое же поведение, если я пытаюсь также отправить объект FormData. Я также попытался пойти по пути, чтобы как-то получить путь к файлу и воссоздать файл на фоновой странице, но, очевидно, вы не можете получить путь из системного файла в JS по соображениям безопасности.

Есть ли способ исправить это расширение? Мне не принадлежит сайт, к которому это расширение пытается добавить функциональность, поэтому я не могу переместить конечную точку загрузки на тот же поддомен.

...