Making a Chrome extension for a site that uses React. How to persist changes after re-rendering?

I want my extension to add elements to a page. But the site uses React which means every time there's a change the page is re-rendered but without the elements that I added.

I'm only passingly familiar with React from some tutorial apps I built a long time ago.

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

asked Nov 20 '18 at 23:28

MCB

1,46411328

1

You can probably use MutationObserver to detect the changes in DOM and re-add your stuff.

– wOxxOm
Nov 21 '18 at 5:15

@wOxxOm Hey, that worked post it as an answer and I'll accept it.

– MCB
Nov 22 '18 at 18:50

I think it'd be more useful if you post an answer with the working code.

– wOxxOm
Nov 22 '18 at 18:56

add a comment |

I want my extension to add elements to a page. But the site uses React which means every time there's a change the page is re-rendered but without the elements that I added.

I'm only passingly familiar with React from some tutorial apps I built a long time ago.

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

asked Nov 20 '18 at 23:28

MCB

1,46411328

1

You can probably use MutationObserver to detect the changes in DOM and re-add your stuff.

– wOxxOm
Nov 21 '18 at 5:15

@wOxxOm Hey, that worked post it as an answer and I'll accept it.

– MCB
Nov 22 '18 at 18:50

I think it'd be more useful if you post an answer with the working code.

– wOxxOm
Nov 22 '18 at 18:56

add a comment |

I want my extension to add elements to a page. But the site uses React which means every time there's a change the page is re-rendered but without the elements that I added.

I'm only passingly familiar with React from some tutorial apps I built a long time ago.

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

asked Nov 20 '18 at 23:28

MCB

1,46411328

I want my extension to add elements to a page. But the site uses React which means every time there's a change the page is re-rendered but without the elements that I added.

I'm only passingly familiar with React from some tutorial apps I built a long time ago.

javascript reactjs google-chrome-extension

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

asked Nov 20 '18 at 23:28

MCB

1,46411328

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

asked Nov 20 '18 at 23:28

MCB

1,46411328

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

edited Nov 23 '18 at 11:01

Xan

54.2k10106135

asked Nov 20 '18 at 23:28

MCB

1,46411328

asked Nov 20 '18 at 23:28

MCB

1,46411328

asked Nov 20 '18 at 23:28

MCB

1,46411328

1

You can probably use MutationObserver to detect the changes in DOM and re-add your stuff.

– wOxxOm
Nov 21 '18 at 5:15

@wOxxOm Hey, that worked post it as an answer and I'll accept it.

– MCB
Nov 22 '18 at 18:50

I think it'd be more useful if you post an answer with the working code.

– wOxxOm
Nov 22 '18 at 18:56

add a comment |

1

You can probably use MutationObserver to detect the changes in DOM and re-add your stuff.

– wOxxOm
Nov 21 '18 at 5:15

@wOxxOm Hey, that worked post it as an answer and I'll accept it.

– MCB
Nov 22 '18 at 18:50

I think it'd be more useful if you post an answer with the working code.

– wOxxOm
Nov 22 '18 at 18:56

You can probably use MutationObserver to detect the changes in DOM and re-add your stuff.

– wOxxOm
Nov 21 '18 at 5:15

@wOxxOm Hey, that worked post it as an answer and I'll accept it.

– MCB
Nov 22 '18 at 18:50

I think it'd be more useful if you post an answer with the working code.

– wOxxOm
Nov 22 '18 at 18:56

add a comment |

1 Answer
1

active

oldest

votes

I implemented @wOxxOm's comment to use MutationObserver and it worked very well.

  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);

  }

That being said someone suggested adding the content above the React node (i.e. the body) and just positioning the added content absolutely relative to the window. And as this will actually solve a separate problem I was having on some pages of a site I'll probably do that. Also, it's far simpler.

But I thought this was still an interesting solution to a rare problem so I wanted to post it as well.

answered Nov 22 '18 at 20:10

MCB

1,46411328

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403160%2fmaking-a-chrome-extension-for-a-site-that-uses-react-how-to-persist-changes-aft%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I implemented @wOxxOm's comment to use MutationObserver and it worked very well.

  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);

  }

But I thought this was still an interesting solution to a rare problem so I wanted to post it as well.

answered Nov 22 '18 at 20:10

MCB

1,46411328

add a comment |

I implemented @wOxxOm's comment to use MutationObserver and it worked very well.

  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);

  }

But I thought this was still an interesting solution to a rare problem so I wanted to post it as well.

answered Nov 22 '18 at 20:10

MCB

1,46411328

add a comment |

I implemented @wOxxOm's comment to use MutationObserver and it worked very well.

  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);

  }

But I thought this was still an interesting solution to a rare problem so I wanted to post it as well.

answered Nov 22 '18 at 20:10

MCB

1,46411328

I implemented @wOxxOm's comment to use MutationObserver and it worked very well.

  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);

  }

But I thought this was still an interesting solution to a rare problem so I wanted to post it as well.

answered Nov 22 '18 at 20:10

MCB

1,46411328

answered Nov 22 '18 at 20:10

MCB

1,46411328

answered Nov 22 '18 at 20:10

MCB

1,46411328

answered Nov 22 '18 at 20:10

MCB

1,46411328

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk