I am currently developing a WebExtension for a text editor that utilizes an ajax request to format the text when a button is clicked. I need the addon to detect any changes in the textarea element.
Despite attempting to use onchange or oninput events, they do not seem to trigger after receiving the response from the ajax request. The function responsible for setting the body upon ajax response is as follows:
function setBody(text) {
$(opts.codeEl).val(text); // opts.codeEl refers to the specific textarea
}
The ajax response data structure is like this:
{"Body":"Hello World","Error":""}
Is it feasible to manage this ajax request/response scenario within a WebExtension Content Script? Is there a way to monitor changes in the textarea's value in the DOM and potentially intercept the response?
The ajax request is handled in the website's separated javascript code and is isolated from my content script which controls the text editor through the WebExtension. Here is how the request is formulated:
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("");
}
}
});
}
Edit
Integrating an ajaxComplete handler:
$(document).ajaxComplete(function(event, jqxhr, options) {
if(options.url === "/fmt") {
console.log("formatted");
$('#code').change();
}
});
Embedding this script into the target site's header will execute upon receiving the ajax response. However, any attempts to alter the DOM using injected scripts such as change() or onchange() result in a security error stating "Permission denied to access property 'apply'."