In this article, I’m going to write my new idea of the Chrome Extension and the process from idea to release.

The issue that I found and wanted to solve

YouTube provides you with a caption function, it enables you to see auto generated captions of what people in the video are saying.

I usually use it, but it’s hard to use for me because the subtitles move too quickly to confirm what I would have heard. I came up with a new Extension idea what show a list of caption history on YouTube pages.It would be useful for checking previous sentences.

Consideration before beginning to develop

Technically, is it possible to modify the Youtube caption UI?

I thought it could develop as a Chrome Extension and I tried to develop a prototype in order to check the technical feasibility. As a result, I succeeded that my prototype could get YouTube caption data and display a caption list on the page.

Are there similar Extensions already available on the Google Chrome Store?

I searched the Chrome Store using keywords such as "Youtube Caption” and “Youtube Subtitle", I didn't find any products like my idea.

Do I need to pay any cost for this development?

This development is totally my hobby so I want not to pay any cost to maintain this extension.

This extension runs on the Chrome browser, and the server side programs aren't required. It means any cloud service fees aren't required.

Additionally, Development and publishing fees for the Chrome Store are free. Therefore, I can develop and maintain this extension without any cost.

User Interface

After thinking of those considerations, I started making a UI design.

It’s very simple. Simplicity is most important so that users can understand and start using it. It also helps me develop it quickly.

User experiences that I want to provide are following:

• After installing this extension, a list of captions will be displayed on each YouTube video page. By clicking a toggle switch on that page, you can switch to display it or not.
• The latest caption will be added at the bottom of the caption list. This caption text displays with a timestamp. You can also hide it.
• You can copy a list of captions to the clipboard.
• When you change the play position, Caption will start to add from a new start position.
• When changing the configurations, they are saved automatically. From the next time, they will be applied as the default setting.

Done developing in two days

I learned how to develop extensions with contents of Udemy and Youtube. I wrote an article about the architecture of Chrome Extension and learning materials.

• Architecture of Chrome Extension

I finished developing it in only two days, including learning. Because this requirement was very simple and I had the basic skills in JavaScript and CSS, so I could develop it without any problems.

This is a demo video. You can see this extension works well and the caption module appears in the right top of screen. Additionally, Auto translated subtitles also were displayed well.

Source code is here, for your reference. github.com/yoshi2t/youtube-caption-extension

Critical problem happened

After developing it, I was very disappointed that I found the same function on Youtube.

For detail, I found a “Show transcript” button that is hidden behind “...” button. Once clicking it, I saw the transcript module that is very similar to my idea.

I regretted that I couldn't find it before starting, but I can’t help it. I hope things I learned during these two days will help me out someday.

I found out that the development of Chrome Extension is very easy and a lot of fun. If I come up with a new idea, I would try to make it again.