Написание скрипта Tampermonkey, который внедряет формы встраиваемые в веб-страницу, которую нельзя редактировать напрямую. Формы взаимодействуют с отдельным бэкэндом.
Построил прототип с использованием jQuery, но собираюсь использовать React для поддержки лучшего UX. В целях обеспечения его совместимости с другими работами, я хотел бы также использовать webpack и jsx.
Делая одну вещь за раз, скрипт тривиален:
import React from 'react';
import ReactDOM from 'react-dom';
GM_addStyle(require(__dirname + '/styles/app.css'));
console.log("webpacked script is working!");
const Hello = () => <div>hello</div>
const graph = document.querySelector('a[href*="url_here"]');
console.log(graph);
ReactDOM.render(<Hello />, graph)
Я пробовал querySelectorAll byTagName, на тот случай, если они будут как-то отличаться.
Однако сгенерированный сценарий завершается с ошибкой «максимальная глубина обновления выполнена успешно» после ряда этих вызовов:
"Упакованный скрипт работает!" выводится на консоль, а целевой элемент удаляется из dom, но div <Hello /> не отображается на его месте.
Эта оскорбительная строка, упакованная / переданная, но не минимизированная и начинающаяся с fakeNode, находится здесь:
if ("undefined" != typeof window && "function" == typeof window.dispatchEvent && "undefined" != typeof document && "function" == typeof document.createEvent) {
var fakeNode = document.createElement("react");
invokeGuardedCallbackImpl = function(name, func, context, a, b, c, d, e, f) {
"undefined" == typeof document && invariant(!1, "The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous.");
var evt = document.createEvent("Event"), didError = !0, windowEvent = window.event, windowEventDescriptor = Object.getOwnPropertyDescriptor(window, "event"), funcArgs = Array.prototype.slice.call(arguments, 3);
var error = void 0, didSetError = !1, isCrossOriginError = !1;
function handleWindowError(event) {
if (error = event.error, didSetError = !0, null === error && 0 === event.colno && 0 === event.lineno && (isCrossOriginError = !0),
event.defaultPrevented && null != error && "object" == typeof error) try {
error._suppressLogging = !0;
} catch (inner) {}
}
var evtType = "react-" + (name || "invokeguardedcallback");
window.addEventListener("error", handleWindowError), fakeNode.addEventListener(evtType, function callCallback() {
fakeNode.removeEventListener(evtType, callCallback, !1), void 0 !== window.event && window.hasOwnProperty("event") && (window.event = windowEvent),
func.apply(context, funcArgs), didError = !1;
}, !1), evt.initEvent(evtType, !1, !1), fakeNode.dispatchEvent(evt), windowEventDescriptor && Object.defineProperty(window, "event", windowEventDescriptor),
didError && (didSetError ? isCrossOriginError && (error = new Error("A cross-origin error was thrown. React doesn't have access to the actual error object in development. See ... for more information.")) : error = new Error("An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the \"Pause on exceptions\" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue."),
this.onError(error)), window.removeEventListener("error", handleWindowError);
};
}
Мне кажется, что ReactDOM не получает доступ к ожидаемому объекту окна, вероятно, где-то прокси Tampermonkey.
Это тот случай, или это другая проблема?
Есть ли способ заставить ReactDOM правильно отображать в этом скрипте Tampermonkey?