[BUG] Some navigation drops inline anchors

[MikkelWestermann]

What happened?

I've noticed an issue where clicking links (or the chrome back button) in an app drops the inline anchors. I've made a little example, that attaches a red div on all anchor tags on a page (simple example for visibility):

import type { PlasmoGetInlineAnchorList } from "plasmo"

export const getInlineAnchorList: PlasmoGetInlineAnchorList = () =>
  document.querySelectorAll("a")

export default function () {
  return (
    <div
      style={{
        padding: 2,
        backgroundColor: "red"
      }}>
      RED
    </div>
  )
}

In the below recording it can be seen how the anchors are removed when the back button is clicked. Then they are re-applied after reload. And finally, they're removed again when clicking "New issue".

Screen.Recording.2022-11-13.at.10.13.16.mov

I've only seen this effect on Github, so I guess those actions are implemented differently on GH. But I'd assume it's also a problem on other sites.

Not sure if this is a bug or just something I need to handle differently in my extension.

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

Thanks for the bug report! This indicates the csui mounter for inline anchor needs more improvement. It seems any anchor/link navigation can kills the CSUI, and requires a re-run (?) <- which is quite weird. I always thought CSUI get re-run by the browser whenever you navigate to a new page (?)... but perhaps the CSUI must track its document navigation to remount itself?

This requires a bit of investigation, we'd love some help figuring out all the cases where the CSUI logic needs to be re-triggered ;d

[MikkelWestermann]

Thanks for the quick response! Yeah, I assumed it would rerun on page change as well. I don't know if it's any anchor... it seems like it's only under certain circumstances, but I can't really figure out which. I'd be happy to help out! I'm a little swamped at the moment, but I'll see if I can make some time for it.

[Hogan-TR]

Hi All, I found the code above could not work on Node.js Doc and some other websites (some web like github is ok). When I double click the page, it worked again.

2022-12-08.22-49-51.mp4

OS: MacOS; Brower: Chrome; Version: Plasmo@0.58.0.
Hope for your help, Thanks!

[emmaalecrim]

Thanks for the quick response! Yeah, I assumed it would rerun on page change as well. I don't know if it's any anchor... it seems like it's only under certain circumstances, but I can't really figure out which. I'd be happy to help out! I'm a little swamped at the moment, but I'll see if I can make some time for it.

This issue seems to happen often when you navigate in an SPA