在内容脚本中侦听 AJAX 响应何时更改 textarea val

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 内容脚本 的 ajax 请求/响应？以某种方式监听 DOM 中 textarea 的 val 的变化？我可以收听并拦截响应吗？

在网站的 javascript 代码中发送和接收 ajax 请求，与我正在为编辑器使用的内容脚本（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 响应时，将调用Into 目标站点标头。但是，当尝试使用注入脚本修改DOM 时（例如，出于安全原因，通过调用change() 或onchange()，它会引发Error: Permission denied to access property "apply" 错误。

Answer 1

jQuery .val(value) 确实调度 change 事件。致电.change() 或.trigger("change")。

如果您不知道何时会调用setBody，您可以在最后一次$.ajax() 调用完成时使用.ajaxStop() 在$(opts.codeEl) 上调用.change()。

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