Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

only works on new page load #2

Open
jsjoeio opened this issue Nov 10, 2022 · 6 comments · May be fixed by #6
Open

only works on new page load #2

jsjoeio opened this issue Nov 10, 2022 · 6 comments · May be fixed by #6

Comments

@jsjoeio
Copy link

jsjoeio commented Nov 10, 2022

See video:

Screen.Recording.2022-11-10.at.8.22.21.AM.mov
@wesbos
Copy link
Owner

wesbos commented Nov 10, 2022

yeah def PR this :) Didnt even think about how its a SPA. Some sort of history change event

@jsjoeio
Copy link
Author

jsjoeio commented Nov 10, 2022

Leaving some notes here...

I see the main function called is go

https://github.com/wesbos/who-blue/blob/main/scripts/content.js#L31-L40

Basically we need to "subscribe" to some sort of history change event. Maybe this one:

Listening to hashchange, popstate events:

window.addEventListener('hashchange', e => {
  console.log('URL hash changed', e);
  doSomething();
});
window.addEventListener('popstate', e => {
  console.log('State changed', e);
  doSomething();
});

Source

@jsjoeio
Copy link
Author

jsjoeio commented Nov 10, 2022

I tested both of those by putting them in the console on twitter.com and then navigating to a new profile via Twitter Search but neither logged. Ditching that approach.

Maybe one of these:

@Sync271
Copy link

Sync271 commented Nov 10, 2022

Leaving some notes here...

I see the main function called is go

https://github.com/wesbos/who-blue/blob/main/scripts/content.js#L31-L40

Basically we need to "subscribe" to some sort of history change event. Maybe this one:

Listening to hashchange, popstate events:

window.addEventListener('hashchange', e => {
  console.log('URL hash changed', e);
  doSomething();
});
window.addEventListener('popstate', e => {
  console.log('State changed', e);
  doSomething();
});

Source

Hey, so I did test both popstate and hashchange, popstate works only when you are going back and forth between pages using "back" and "forward" buttons (realised this after making the PR 😓) but what we can actually do is a combination of popstate and click to run when you click on a profile/page.

@JeffreyATW
Copy link

Might also consider doing this on scroll, as new elements appear as you do so.

@davwheat
Copy link

Potentially a MutationObserver looking for SVGs where aria-label is Verified account might be a better option?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants