Fixes

✦ There was a problem with displaying the new search results over the card subtitles results i forgot to delete the subtitlels cards before appending the search result which was easy to fix tbh
✦ Had to change the rest of my class names because it was over ridden by websites which was annoying because i know i should have handled this better from the beginning ‘-’

✦ Removed most of the console.logs or commented them i think this is unprofessional of me to keep them there so i removed or commented them and removed my tasks.txt file lol
✦ also had to fix stuff like adding a ? before accessing object keys so if it’s undefined it doesn’t cuz errors
✦ I added a feedback text for how many donwloads there are left i think i talked about it in the last devlog
✦ I fixed some css stuff i usually use the devtools to fix these things and then copy and paste these changes because i don’t want to reload my extention everytime i make a small change
✦ i also spent some time testing everything in different websites that’s how i knew that these problems exist in the first place

The Initial Message

✦ I have added an initial message only if it’s the user first time downloading the extention and i kinda got the idea for this message thing from hridya from his flavourtown utils ext

✦ I used chatgpt to make the design for the message cuz i needed something fast and functional i edited some of his styles tho and changed the box shadow they gave me
✦ It closes when you click on it or press ctrl + b which is the shortcut

README.MD

✦ I had to use preview websites because i needed to see what im doing but then it turns out i could have just used github preview i realized that too late and also added these cool badges

✦ I updated the demo video and linked the badges to my github profile and release link

I Messed up

✦ Turns out i should have used chrome.storage.local directly from my content js i don’t know why i used the background worker to store that but i’m learning why not

✦ also i should have used another shortcut for the customization control panel and made the panel a normal div element and added it in my content js but i didn’t do that i have used the worst method to display the panel
✦ i basically made the panel a new chrome tab and it gave me a looot of headache but i didn’t know that i shouldn’t have used it when i started because this is my first time building an extension

Trying to record a new Demo (Found new bugs)

✦ I had a lot of troubles trying to record the demo as there are a lof of things that could go wrong anyway i edited the demo video using my phone
✦ I found a problem with the connection between the control panel and the background to the content js
✦ i used chrome api to detect the active tab so i can use that to connect the Customization panel to the content js subtitles but there was a problem which was if you had two chrome windows opened they both have seprate active tabs so my code always took the first active tab which was the wrong one
✦ I made it so that when the user clicks on the open control panel button it saves the current window id which is the window the user has focused at that moment and then when i send messages to the content js i use that window id to get the active tab so stuff don’t get mixed up

Changelog

• Sub-Extension/commit/81becbf
• Readme update and removing the task file
• Sub-Extension/commit/3d165f8

Optimization & Fixes

✦ I have fixed my panels search input when it’s now working ✦ also I have fixed problems with the caching
✦ There was a problem with the language filter because I separated my code into two conditions one if the Data is TV shows then add all filters but if they’re movies add only the language filter but I forget to append the container of the filters element in the case where it’s a movie
Fixed a problem with the Nothing found label it wasn’t working
✦ I hadn’t set the movie search for the panel in the last devlog so I did that and made sure it’s working i was testing on youtube this what made me realize that my id and class names were overlapping with websites
✦ removed the console.logs i used for debugging and also changed the readme a bit i’m gonna preview it and maybe change it again so i can add the new stuff i added
✦ Changed some stuff in the styling of the control panel of the subtitles
✦ Added a feedback text when you inject the subtitles so you know whether it worked or not and i also might add a display for how many remaining downloads my api key can make so the user knows if it’ll work or not

Upcoming

✦ Considering doing some final-touch changes improving the styling maybe i’m not sure yet
✦ I definitely need something to tell the user that there’s a shortcut for the search panel because i haven’t done that and might add somestuff to the popup cuz it looks a bit ugly with the search thing

What i learnt

✦ i learnt more about the chrome api and how everything works i’m still struggling a bit to wrap my head around it but it’s not that hard i wish i started the right way and actually spent some time learning before i started the project but i could have not started the project if i waited to know everything first which i’m happy about
✦ I definitely didn’t know that i could do this when i first started but now i feel like there are fun stuff out there we just have to uncover them lol

Changelog

• Sub-Extension/commit/8b490b9

Search Panel

✦ This is kinda the big thing that took me all of this and i kinda found myself immersed in it and spent triple that time fixing problems
✦ i spent 5 hours without noticing i would have devlogged more but i got annoyed because i had to fix a lot of stuff and had to go through all of my old code to figure out how i was gonna make this .
✦ Sooo it’s a panel you open with ctrl+b (i’m might let the user choose the shortcut) it’s basically a panel so you can search and inject subtitles faster than the extention popup i left the extention popup there too they both use the same storage so they’re linked.
✦ I’m using the background worker to fetch the data for me so it’s easier to manage and store data, i have a lot to learn lol the browser api got a lot of stuff im still trying to understand.
✦ I basically copied the search element from the devtools that was in the extention popup and pasted it in the page content itself and edited the css until i got what i wanted and then used that css in my code.

Backend Deployment

✦ i deployed my backend to heruko becaseu i’m closing in on finsihing the project the final touches and fixes are just left
✦ i feel like there’s a lot of stuff to be fixed but as long as my extention works correctly im happy with that

Improvements

✦ Changed the subtitles card thing css styling because it looked bad i added svg icons so they’re user friendly and also changed the color of some stuff too and used coolors.co to help me with colors that fit together
✦ Used a var for my backend url string so i don’t have to go through every fetch manually after deployment

Ongoing stuff

✦ the search isn’t working right now inside the panel which is im trying to fix atm but it’s taking longer than normal because i don’t know what the issue is But i think i’m going in the right direction

✦ After that i’m gonna go through my code again to make sure i won’t break my extention im also gonna cache the data the panel will fetch because i haven’t settin that up yet

Frustrating things

✦ I don’t know why it’s taking me so long to do all of this but that might be the annoying part i enjoy it as long as it’s working but what can i say
✦ Also my code is a complete mess and a complete hole of dirt and mud like literally it looks like a mountain of suffering

Fixing

✦ I fixed the class,id names because they’re overlapping with websites’ elements because i literally use the simplest words when coding
✦ a lot of stuff break to the point i can’t remeber what i fixed, the searchinput element eventlistener wasn’t working correctly and also i was using document.body.innerHTMLwhich broke too much things tbh
✦ there was a lot of case edges where the extention broke so i had to add more coniditonal checks to prevent that

Attached a photo i forgot to attach with the last devlog lol

Changelog

• fixing my injected elements id names and class names so they dont overlap with websites elements
• Sub-Extension/commit/a4a3ad0
• Heroku deployment

Fully Working Now

✦ Finallly the main functionality is now workingg the inject button is working and now you can directly search and download subtitles to the extention without having to go anywhere or do anything
✦ i spent some time debugging a problem i had to use postman to send requests to see what the issue was, it turns out i was passing the wrong param as usual

Backend

✦ I set up the code for the download route to fetch the download link from opensubtitles website, I love backend work but i detest something called frontend

Going Over My Logic

✦ I used a drawing website on my tablet to write my logic and go through it because i had trouble fixing my code and i told myself why not try something new to help me solve the problem faster, i used a random website but it was pretty cool tbh
✦ There was an error with how i used a var before initialization fixed that one too and i hope i preveted anything else from breaking too

Debugging

✦ I didn’t take much debugging this time but at the start i had to , i fixed this problem with the var initialization
✦ i also added caching for the episode and session select values to prevent confusion, wrote the code to call the background worker to fetch and send the subtitles data to the content js
✦ I fixed a problem with the subtitles control panel it wasn’t showing the initial delay value when opening it

Future Plans

- Considering to change the styling for the subtitles card for sure
- Might add a shortcut for the search and subtitles inject panel so you can open it without having to click on google chrome extention tab

Changelog

Sub-Extension/commit/9760c92
Sub-Extension/commit/a233133

Bugs

✦ I have spent a lof of time trying to debug a problem but it turns out to be a problem with misspelling a word in the backend
✦ I though there was a problem with the fetching which turns out to be true the api isn’t accurate when it comes to searching movies or tv shows by the name of it (I’m using the imdb id to fetch them)
✦ I might take a look again at the npm package code on github to figure out whether i should use multiple params like the imdb id and tmdb id at once or they should have their own seprate requests

Backend

✦ I added the movie subtitles fetch it’s similar to the tv one but just with different request parameters it wasn’t hard thanks to the npm package i’m using
✦ I’m still working on it because i feel like the fetching isn’t the best i feel i should add more filters i’ll see
✦ i could be even using the library the wrong way im only passing one param but there isn’t enough documentation for it

Clean code implementation

✦ I made seprate functions for each the tv shows and the movies
✦ wrote comments to make it easier for me to read my code
✦ Made seprate functions for some of the code

Changelog

• Sub-Extension/commit/2ed7059
• Sub-Extension/commit/bd731cc
• Backend Fetch

Caching & Storage

✦ So i have made everything stored in chrome.local.storage i cached the state of the catg and the state of the search and the subtitles file cards themselves
✦ Fixed tons of problems and had to debugg too much stuff and i had to restructure the code so i can make it clean and so i can use it too
✦ I spent a lot of time going back and forth until everything worked and then tested to see if there’re any other issues
✦ i obviously won’t be able to debug all the problems but i fixed the most vital ones

Backend

✦ I seprated the api into a search route and a download route
✦ i’m gonna recieve the data from the popup and then download the subtitle and send it back to the popup I might use the background worker for that so if the user closes the popup it still works

What i’m going to do

✦ I’m going to write the necessary code in the popup so i have all the data i need to download the subtitles and then write the backend code to send the request with these data
✦ I still have to send this data to the background worker or use the background worker to handle the download with the backend directly (what im probably going to do)
✦ definitely going to change the slop design of the subtitles fetching
✦ I still haven’t implemented the movie subtitles fetch i only have the tv shows fetch but this one is easy so im doing it first and just so that i can finished the popup all at once
✦ i’m gonna have to write the backend for the movie subtitles fetch , i gotta check the documentation to see how im gonna do that

Optimization

✦ I tried to lower how many times i have to use chrome.local.storage.get my code is half a mess but im okay with it i feel like there are just some stuff i need to do like showing “No result” if there are no data stuff like that

Changelog

• Sub-Extension/commit/4bf2026
• Sub-Extension/commit/ed532d2

My suffering

✦ I started working on the menu bar so it’s All, tv shows , movies and finished it
✦ i can assure you that i didn’t do anything useful other than adjusting the css for the animation getting the animation working the way i wanted it and some other stuff but what took long was this animation damn
✦ i spent a loooot of time trying to fix the animation because it wasn’t resetting and restarting and i was creating this circle elment using ::after in the start but then i switched to a nomral div
✦ I added a line below the menu bar

Fixes

✦ i fixed a problem with the overlay container the red “subtitles delay button” when you hover over it 3 seconds and it goes away which is a problem so i fixed that
✦ Not fixed but i cleaned my code in a way changed some stuff so it’s organized

Optimization

✦ I added an arrow-back svg to take the user to the previos state it’s gonna be in the devlog video
✦ Saved the state so if the user goes back the cahced data is shown again
✦ I’m doing something similar to react but not perfectly the same i’m cleaning the whole element innerhtml before i append anything
✦ I’m gonna finish off this menu bar functionality since it isn’t working yet i just finished the design of it and then im gonna get to file downloads and desiging the subtitles cards

Changelog

• UGHHHHHHHHHHH finally got the animation working with the help of chatgpt
• Trying to do the navigation bar animation working I’m suffering here

What i did

✦ Finally, Everything is working with the subtitles fetching and i can’t imagine how much more potential i can get out of this
✦ I have added sorting using the language i also added manual search so like if the automatic fetching didn’t work you can type the name of the show because the data might be corrupted for that tv show or movie
✦ i asked chatgpt to make for me the subtitles cards because i wanted to see the data as fast as i can so i can fix if there’s anything wrong
✦ I love how everything is so far i just hope the api doesn’t screw me over when i try to download subtitles
✦ There’s a limit on the number of downloads my api key can handle i haven’t tested it but i have to get everything working before i start draining some of those downloads

What i’m going to do

✦ There’s a lot of things i want to get done like how i’ll unzip the subtitle file im not even sure if the data is .zip but i’ll check
✦ I’m currently overwhelmed because my code is a literal mess but i’ll get to that later
✦ i noticed that im only fetching tv shows when the user search for anything im fixing that in the future but so far im focusing on getting the subtitles fetching working correctly and integrate it with the overlay so it’s automatic

Fixes

✦ i spent quite sometime fixing the horizontal scroll bar i wanted to remove it completely but just couldn’t
✦ fixed some of the css of the cards i asked chat gpt too
✦ i also fixed a problem with fetching the data i was fetching using the wrong parameters because i didn’t notice it in the doc lol

Changelog

• Subtitles fetching in action !!!
• Backend setup

Subtitles fetch Api integration

• I didn’t expect to find an api that can actually fetch subtitles since i have tried to find one before but failed miserably
• I’m using a wrapper api for a website called opensubtitles.com and it’s quite nice but it requirs a backend so that’s what im doing

Setting the Backend

• I’m using express and node js for the backend it’s a very simple backend i don’t know if i should use a whole express server for this but if it works it works
• I’m gonna deploy it to heroku after it’s done im only creating one route which is /api
• I’m fetching the data using imdb id so it’s accurate and working perfect im gonna
• I’m still working on everything and laying the prototype before actually desiging anything so everything is raw
• I keep searching basic stuff like select,option tags in html i forgot most of the stuff
• also im using chatgpt to give me some useful infos like how to fetch the imdb id using a show name or its tldb id it’s helpful in fetching information fast

Some additional improvements

• I’m saving the search state so the user won’t have to write and fetch their tv show every time the popup closes

I’m currently coding the selection of the episode and session so it fetchs data accurately and help the user find what session and episode they’re looking for

Api integration

• I used an api called tdlb or something like that to fetch movies and series names and photos and rating and got it working

popup implementation

• So I added an animation to my search input it’s still in progress but I have learnt stuff I haven’t understood in decades like the ::after and ::before in CSS I made a cool infinite loop and am still working on improving it because it looks a bit dull tbh

• I have added a container for the results that come from the API and made chat GPT design the card for the data I spent the rest of the time fixing spacing issues and how the cards would take up space in my pop-up

• I’m considering adding permanent storage to my popup because if the user closes the pop-up nothing is saved or kept in storage so I might change that in the future

Changelog

• finished the text animation and made sure i didn’t break anything else
• API INTEGRATION and added the search input and still working on it

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