You are browsing as a guest. Sign up (or log in) to start making projects!

Propheus

  • 5 Devlogs
  • 5 Total hours

A stardance browser extension to allow for more functionality.

Open comments for this post

1h 32m 36s logged

Added saving functionality and a testing UI to toggle online mode.

Added saving functionality and a testing UI to toggle online mode.

Replying to @tudor

0
11
Open comments for this post

48m 37s logged

For the last hour or so I had realized a big problem with the current implementation, which is that the Stardance app uses Turbo, which apparently in this case acts like a SPA (Single page application). Truth be told, I had to make more use of AI here than I usually would (however I did not copy paste code or add anything which I didn’t first check or understand) as I have not been personally faced with this problem before, however I was aware of this challenge from previous projects or blogs read. The problem was that if I just kept creating a new loop on every navigation to circumvent this, old loops would end up never finishing and would just keep waiting for new posts to load (which never happened), inevitably leading to a memory leak eventually. The fix ended up being using document.documentElement instead of document.body for the mutation because (according to GPT, however I will write a comment in case I come across any documentation) Turbo will replace stuff of the body inside of the whole HTML of the page (so, to ), which triggers a mutation when watching documentElement, however if we watch document.body, and Turbo replaces that all together, MutationObserver stays attached to the old, now removed, node, which means we are basically watching a dead node for new posts (again, take this with a grain of salt). This means I could also scrap the waitForElm function and shorten the code. There are likely many better ways to do this (which are welcome in the comments), but for someone who is still a beginner in extension and web development overall, I am just happy that it works and that AI helped me discover something new that I think is a challenge for many extensions that operate on modern web applications such as Youtube, X etc. Now free of bugs, I will continue working on the UI.

For the last hour or so I had realized a big problem with the current implementation, which is that the Stardance app uses Turbo, which apparently in this case acts like a SPA (Single page application). Truth be told, I had to make more use of AI here than I usually would (however I did not copy paste code or add anything which I didn’t first check or understand) as I have not been personally faced with this problem before, however I was aware of this challenge from previous projects or blogs read. The problem was that if I just kept creating a new loop on every navigation to circumvent this, old loops would end up never finishing and would just keep waiting for new posts to load (which never happened), inevitably leading to a memory leak eventually. The fix ended up being using document.documentElement instead of document.body for the mutation because (according to GPT, however I will write a comment in case I come across any documentation) Turbo will replace stuff of the body inside of the whole HTML of the page (so, to ), which triggers a mutation when watching documentElement, however if we watch document.body, and Turbo replaces that all together, MutationObserver stays attached to the old, now removed, node, which means we are basically watching a dead node for new posts (again, take this with a grain of salt). This means I could also scrap the waitForElm function and shorten the code. There are likely many better ways to do this (which are welcome in the comments), but for someone who is still a beginner in extension and web development overall, I am just happy that it works and that AI helped me discover something new that I think is a challenge for many extensions that operate on modern web applications such as Youtube, X etc. Now free of bugs, I will continue working on the UI.

Replying to @tudor

0
11
Open comments for this post

1h 6m 44s logged

I decided to change the location of the button as I spent too much time being unsuccessful in trying to line it up with the others. I also made it such that newly loaded posts are also updated with this button via the MutationObserver API (Thank you StackOverflow). This is how it looks like so far. Next I will focus on making an UI to add actual saving functionality to the buttons and make some kind of server to be able to store bookmarks “in the cloud”.

I decided to change the location of the button as I spent too much time being unsuccessful in trying to line it up with the others. I also made it such that newly loaded posts are also updated with this button via the MutationObserver API (Thank you StackOverflow). This is how it looks like so far. Next I will focus on making an UI to add actual saving functionality to the buttons and make some kind of server to be able to store bookmarks “in the cloud”.

Replying to @tudor

0
27
Open comments for this post

1h 19m 11s logged

Managed to write it up a bit, now added a favorite button, however I am facing a small problem with alignment relative to the other SVGS. Will focus on debugging this for now, and then continue towards actually making an UI to browse saved posts or even make a small server in Python to allow users save them remotely.

Managed to write it up a bit, now added a favorite button, however I am facing a small problem with alignment relative to the other SVGS. Will focus on debugging this for now, and then continue towards actually making an UI to browse saved posts or even make a small server in Python to allow users save them remotely.

Replying to @tudor

0
11
Open comments for this post

20m 19s logged

I have now started work on this by creating the manifest.json file and some other boilerplate like a very small README.md and added the MIT license. Next I will start to look into how the main home page of Stardance gets posts and how I can add new stuff to it. Will start by doing a bookmarking feature (like adding a favorite button that you usually see on social media). This is my first time making an extension so it will hopefully be fun and interesting.

I have now started work on this by creating the manifest.json file and some other boilerplate like a very small README.md and added the MIT license. Next I will start to look into how the main home page of Stardance gets posts and how I can add new stuff to it. Will start by doing a bookmarking feature (like adding a favorite button that you usually see on social media). This is my first time making an extension so it will hopefully be fun and interesting.

Replying to @tudor

0
15

Followers

Loading…