Создание расширения Chrome для сайта, использующего React.Как сохранить изменения после повторного рендеринга?

Question

Я хочу, чтобы мое расширение добавляло элементы на страницу.Но сайт использует React, что означает, что каждый раз, когда происходит изменение, страница перерисовывается, но без элементов, которые я добавил.

Я лишь до некоторой степени знаком с React из некоторых обучающих приложений, которые я создал долго.время назад.

Answer 1

Я реализовал комментарий @ wOxxOm, чтобы использовать MutationObserver, и он работал очень хорошо.

  static placeAndObserveMutations (insertionBoxSelector) {
    let placer = new Placement ();
    placer.place(insertionBoxSelector);
    placer.observeMutations(insertionBoxSelector);

  }

  place (insertionBoxSelector) {
    let box = $(insertionBoxSelector)
    this.insertionBox = box; //insertionBox is the element that the content
    // will be appended to
    this.addedBox = EnterBox.addInfo(box); //addedBox is the content
// Worth noting that at this point it's fairly empty. It'll get filled by
// async ajax calls while this is running. And all that will still be there
// when it's added back in the callback later.
  }

  observeMutations(insertionBoxSelector) {
    let observer = new MutationObserver (this.replaceBox.bind(this));
// this.insertionBox is a jQuery object and I assume `observe` doesn't accept that
    let insertionBox = document.querySelector(insertionBoxSelector);
    observer.observe(title, {attributes: true});
  }

  replaceBox () {
    this.insertionBox.append(this.addedBox);
    _position (this.addedBox);
  }

При этом кто-то предложил добавить контент над узлом React (то есть body) ипросто позиционирование добавленного контента абсолютно относительно окна.И так как это действительно решит отдельную проблему, с которой я столкнулся на некоторых страницах сайта, я, вероятно, сделаю это.Кроме того, это намного проще.

Но я подумал, что это все еще интересное решение редкой проблемы, поэтому я тоже хотел опубликовать его.