Написание сценария Tampermonkey, который вставляет встроенные формы на веб-страницу, которые нельзя редактировать напрямую. Формы взаимодействуют с отдельным сервером.
Создал прототип с использованием jQuery, но я хочу заставить React работать для поддержки лучшего UX. В интересах согласованности с другой работой я также хотел бы использовать webpack и jsx.
Сценарий прост, выполняя одно действие за раз:
import React from 'react';
import ReactDOM from 'react-dom';
GM_addStyle(require(__dirname + '/styles/app.css'));
console.info("webpacked script is working!");
const Hello = () => <div>hello</div>
const graph = document.querySelector('a[href* = "url_here"]');
console.info(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?
Ха-ха, не уверен, хотите ли вы сказать, что это неразборчиво, весело или вы хотели опубликовать другую ссылку, но в любом случае оказывается, что я нашел свое решение в вашем ответе от 2012 года. Думаю, я не могу сказать спасибо, так что [отредактировано]!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Быстрое исправление: window = unsafeWindow в верхней части скрипта tampermonkey, легко добавляется с помощью BannerPlugin. webpack
Для других вариантов / фона: Почему window (и unsafeWindow) отличается от пользовательского скрипта и тега <script>?
Почти дубликат stackoverflow.com/a/1732454/331508.