Exploring the Raw Manifest.json File
The manifest.json file is the cornerstone of any Chrome Extension. It serves as the configuration file that defines essential settings for the extension. For ImprovedTub, this file includes configurations like “background” scripts, content_scripts, permission and more. Without a properly configured manifest.json file, the extension simply cannot function.
These fields describe the extension:
permissions field specify the scope of the extension’s functionality. For example, to interact with Youtube’s DOM or store user preferences, we need to explicitly request access in the manifest:
The host_permissions field tells that this extension is only dealing with Youtube pages:
The background field specify scripts that run in the background, maintaining the persistent state of the extension. For ImprovedTub, this is crucial for managing event listeners and controlling features like toggle button. The background.js is a JavaScript file that will run separately from the web browser thread, the service_worker would not have access to content of web page, but it has capabilities to speak with the extension using the extension messaging system.
The content_scripts field define the scripts that will run within the context of the web pages. This is where we inject the logic to manipulate the user interface, such as adding the toggle button and displaying or hiding the details block.
The default_popup field tells me what html file will be served as the Extension’s UI:
Adding Switch Button
After having some knowledge about files’ structure and purpose via the manifest.json, I started adding a switch button named Details inside the menu/skeleton-parts/channel.js file:
channel_details_button: {
component: 'switch',
text: 'Details',
value: false, // Default state is off
on: {
const apiKey = YOUTUBE_API_KEY;
const switchElement = event.target.closest('.satus-switch');
const isChecked = switchElement && switchElement.dataset.value === 'true';
console.log(isChecked)
try {
const videoId = await getCurrentVideoId();
const videoInfo = await getVideoInfo(apiKey, videoId);
const channelId = videoInfo.snippet.channelId;
const channelInfo = await getChannelInfo(apiKey, channelId);
chrome.tabs.query({active: true, currentWindow:
