MCT04_TEAM02

Project Title: Youtube Chrome Extention

Table Of Content

👉 About the project

👉 Key Features

👉 Code Explanation

👉 Technology Used

👉 Summary

About the project

Simplify your YouTube experience with this Chrome extension that adds a plus button to the video page. Click the button to instantly bookmark the current timestamp, allowing you to effortlessly revisit your favorite moments. Manage your saved timestamps through the extension interface for a seamless and personalized video-watching experience. Enjoy the convenience of quick and intuitive bookmarking with the YouTube Timestamp Bookmark Extension.

Key Features

One-Click Bookmarking: Effortlessly bookmark your favorite YouTube video moments with a single click on the plus button.
Quick Access: Easily revisit saved timestamps through the extension interface, providing quick and organized access to your bookmarked video segments.

Code explanation

✍ HTML:-

The provided HTML code establishes the structure for a webpage featuring bookmarks for a video. It includes a container with a title (“Your bookmarks for this video”) and a div element with the class “bookmarks” where the bookmarks will be displayed. The JavaScript file “popup.js” is linked to this HTML file using the script tag with the “type” attribute set to “module”. This setup suggests that the functionality and interactivity, particularly related to bookmarks, are implemented in the linked JavaScript file.

✍ CSS:-

This CSS code defines a container with a fixed width, a title with specific styling, and a textbox with width and font size settings. It further styles a list of bookmarks, each represented as a flex container with a border-radius, shadow, and background color. The individual bookmarks contain titles and controls, including images with hover effects and adjustments on transition. The controls are aligned to the right. The design creates a visually appealing and organized bookmark section.

✍ JavaScript:-

background.js (to check the link of the YT)

The code is a Chrome extension content script with an onUpdated listener. It detects updates in tabs, specifically targeting YouTube video pages. If a YouTube video tab is found, it extracts the video ID from the URL parameters and sends a “NEW” message with the video ID to the content script using chrome.tabs.sendMessage. The script focuses on efficiently handling updates and communicating with the content script for YouTube video pages.

contentScript.js (to check the content and manipulate YT's DOM)

The code is a Chrome extension content script that enhances YouTube video pages with bookmarking functionality. It injects a bookmark button into the video player controls, allowing users to bookmark the current timestamp of the video. Bookmarks are stored in Chrome sync storage for each specific video, sorted by timestamp. The script listens for messages from the background script, handling events such as creating new bookmarks, setting the video playback time, and deleting bookmarks. The getTime function formats seconds into a timestamp.

util.js (to activate the current window)

The code defines a concise asynchronous function, getActiveTabURL, using the chrome.tabs API in a Chrome extension. It queries and returns the URL of the active tab in the current window.

popup.js (to activate the current window)

The code is part of a Chrome extension for managing bookmarks on YouTube videos. Key features include adding, viewing, playing, and deleting bookmarks. It imports the getActiveTabURL function, defines functions for UI manipulation, and includes event handlers for play and delete actions. The document load event listener initializes the extension by fetching and displaying bookmarks for the current YouTube video.

✍ JSON:-

The JSON represents a browser extension (“demo Bookmarks”) for saving YouTube timestamps. It has permissions for storage and tabs, injects scripts into YouTube pages, and follows Manifest Version 3.

Technology Used

✔ HTML ✔ CSS ✔ Jvascript ✔ JSON

Summary

The provided code is a Chrome extension designed for managing bookmarks on YouTube videos. It imports the getActiveTabURL function and defines functions for handling UI, including adding, viewing, playing, and deleting bookmarks. The extension initializes on the document load event, fetching and displaying bookmarks for the current YouTube video. Notably, the code focuses on providing a streamlined bookmarking experience within the YouTube environment.