在內容腳本中偵聽AJAX響應何時更改文本區域值

Question

我正在為文本編輯器編寫WebExtension 。 當用戶單擊按鈕時， format編輯器將觸發ajax請求，然后返回格式化的文本。 我需要我的插件來收聽textarea的更改。

我嘗試使用onchange或oninput ，但是當收到響應時， 不會觸發這些事件。 Ajax響應使用此功能（不是我自己的）設置主體：

function setBody(text) {
  $(opts.codeEl).val(text); // opts.codeEl is the textarea in question
}

ajax響應如下所示：

{"Body":"Hello World","Error":""}

是否可以通過WebExtension Content Script處理此Ajax請求/響應？ 以某種方式偵聽DOM中 textarea val變化？ 我可以聽和截取響應嗎？

Ajax請求是通過網站的javascript代碼發送和接收的， 與我正在使用的內容腳本（WebExtension代碼） 隔離開來。 請求是這個

function fmt() {
  loading();
  var data = {"body": body()};
  if ($(opts.fmtImportEl).is(":checked")) {
    data["imports"] = "true";
  }
  $.ajax("/fmt", {
    data: data,
    type: "POST",
    dataType: "json",
    success: function(data) {
      if (data.Error) {
        setError(data.Error);
      } else {
        setBody(data.Body);
        setError("");
      }
    }
  });
}

編輯

注入ajaxComplete處理程序：

  $(document).ajaxComplete(function(event, jqxhr, options) {
    if(options.url === "/fmt") {
      console.log("fmtted");
      $('#code').change();
    }
  });

當接收到ajax響應時，將調用目標站點標頭。 但是，當出於安全原因嘗試使用注入的腳本修改DOM （例如，通過調用change()或onchange() ，將引發Error: Permission denied to access property "apply"錯誤。

Answer 1

jQuery .val(value)確實調度了change事件。 調用.change()或.trigger("change") 。

如果你不知道什么時候setBody將被調用，您可以使用.ajaxStop()調用.change()在$(opts.codeEl)當最后$.ajax()調用完成。

 $(function() { let opts = { codeEl: document.querySelector("textarea") } $(opts.codeEl).on("change", function(event) { console.log("changed") }); function setBody(text) { $(opts.codeEl).val(text) } let url = URL.createObjectURL( new Blob([ JSON.stringify({ "Body": "Hello World", "Error": "" }) ], { type: "application/json" }) ); $.get(url) .then(function(data) { URL.revokeObjectURL(url); setBody(JSON.stringify(data)) }); $(document).ajaxComplete(function(event, jqxhr, options) { if (options.url === url) { console.log("ajaxStop"); $(opts.codeEl).change(); // trigger `change` event } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <textarea></textarea>