Upcoming feature

pheew so im trying to make the extention more dynamic by integrsting an api with it
i have tried multiple approach but i think the best solution would be that i redirect the user to a subtiltes website and when they download the file i automatically store it
I have tried a couple of apis but im using only one now
also im trying to improve my css but im real bad at designing

Fixes

• a lot of bugs in youtube I tried to fix most of them i made my extention run when the browser is idle it was loading before the document loads but i forgot to change that when i was testing
• I discovered that the extention
  wasn’t working well on youtube because of how i
  inject the content so i optimize it by checking if
  the url id changes i inject the overlay again but
  keeping the chrome event listeners the same
• I also changed the font of the control panel and adjusted the color selector fixed its position too it wasn’t centered
• I commented my feature because i still haven’t gotten to it yet since i was trying to fix the extention to work again i got rejected because it wasn’t working so i hope it’ll work now
• Also fixed the subtitle delay displayer it was showing nothing when you first use the extention because i didn’t set the var to 0 if it was the user first use of my extention
• Made so that when the user pauses the video it shows the subtitle file name so he knows what file he currently has embedded but i might change that i didn’t like it much but i needed it

Changelog

• fix(windowpopup):I fixed some css in there like
• Opps pushed stuff im testing uncommented
• feat(popupbackground):trying to add a search

Final commit

Optimization (26 minutes)

• i made sure everything was working fine for the last time
• optimized the css layout so it’s positioned the correct way every time
• Made it so the subtitles resizes itself to the screen every time the user scrolls or resizes the window

What i learned :)

✦ I liked this project a lot though it’s not the hardest or the most unique out there but i enjoyed it because i built it to solve my own problem and it was much fun to reverse engineer extentions and this is my first time ever building an extention so it has been a great journey
✦ I learned how to build extentions which is obvious
✦ Learned how to interact with chrome api for extentions
✦ I also didn’t know much about iframes and video elements in html which was a huge thing for me to learn
✦ Learned more about how streaming works in youtube and different streaming websites since i was reverse engineering stuff they use small packs of video and send it back and forth
✦ Learned how to handle stuff step by step and get a better understanding of how things work

Tech used

✦ I used javascript to build this project with a bit of html and css ( I didn’t vibe code the extetnion popup) which was the funniest part lol life hasn’t been better
✦ Chrome api and i used my knowledge in backend to actually get this to work it’s similar to full stack website

Improvments (1h 38m)

• It works on Youtube now lol i definitely didn’t think it was gonna be this easy to hack youtube pages but it turned out to be fun
• i even changed the code so it works on any website with video element inside of it
• edited the design a bit
• Maybe i should add more font control to it but i still don’t know if anyone will find it useful other than me
• fixed a problem with youtube the overlay kept escaping the video container

I’m so happy with this because i thought youtube was impenetrable and stuff but it’s good to know that we can manipulate content on youtube this opens a lot of doors

Fixes (43 minutes)

• added responsive to the subtitle controls so it’s working on smaller devices i kept changing the width and height and make sure it’s resizeable
  and i also spent some time on my phone to design the blueprint for the logo i made it with the help of ai but thanks good they didn’t ruin it My prototype for the logo sucked anyway

Insertions

• I created an icon to the extention and spent some time trying to get it to work ;_ i made the 3d blurprint for it and after that i converted it to a 32x32 png to add it to my project file

SOOOOO

✦ I made sure to try other websites to see if the extention works and it did
i tried it on the website i use to watch tv shows and made sure it works even in the worst situations like on mobile phone and it worked fine and i also tried it on similar sites to the one i watch tv shows on they were working too since they all use iframe or element

Implementation

• I have added a control panel to control subtitles layout and delay and it took so much because i handled delay in the wrong way at first i was storing it in my js file in a normal var but now i’m using the browser storage to store delays and make it so that it works even if you refresh the delay state will still work
• changed the design of the extention a bit i didn’t like the old one it wasn’t even a design but i like the new one it has a simple contrast to it and i love minimalism
• Spent a lot of time to make sure the content.js-control panel messaging system works and delay and everything else it had a lot of issues because i didn’t understand how things worked but it was much harder to fix the bugs than to actually learn how these stuff connect together

What i did

• I have changed my design it’s terrible either ways
• spent a lot and too much time doing the delay thing with the event listeners but they didn’t work
• made the delay work with a button
• changed some stuff in the structure of my code and how i handle subtitles so the user don’t have to reupload the subtitles every time they refresh

HOLY MOLLY

• So i started this devlog session with reverse engineering an extention called subtital it’s similar if not exact to what i wanna do im building mine for phones though,i have spent maybe the first 5 or 4 hours debugging and scanning their code trying anything that can help find out how they do it after a lot of suffering

• i found how they did it and then kept going back and forth with chat gpt to help me implement it and finally i did it and i’m still going to finish it up polish it but it’s almost ready but DAMMN this was tough and brain melting stuff. here is what i have come to

Learning procces

• I know nothing about web extensions so i spent most of the time debugging and trying to make the code work there’s a lot of stuff it’s my first time hearing about like background workers and content scripts and a lot of unknown territory but extentions turn out to be normal css and html and java script im using chrome api to build the extention so it probably won’t be the best choice since it won’t work on all browsers but i’ll see im also using mainfest v3 which is the tech behind the extention

Algorithm writing

• i wrote the code that deconstructs the subtitles file and turn it into segments it was a bit hard because i didn’t even understand .stl files it’s my first time seeing them but the algorithm building was straightforward since i built a telegram bot before and it had a similar approach to this Algorithm
• i connected my background worker with my content script and the popup input listener and it was messy as hell things kept breaking but don’t mind the design it’s just a place holder