To extract YouTube video tags using HTML, CSS, and JavaScript, it is necessary to utilize the YouTube Data API. The API enables users to obtain various information regarding YouTube videos, including their tags.
The initial step is to obtain an API key. This can be accomplished by creating a project in the Google Cloud Console and activating the YouTube Data API.
After obtaining an API key, you can employ it to generate requests to the YouTube Data API to retrieve data regarding videos. To extract the tags for a specific video, you must initiate a GET request to the “videos” endpoint, passing the video’s ID as a parameter.
In your HTML document, you can utilize JavaScript to create this request and analyze the response to obtain the video’s tags. To display the tags on your webpage in any desired style, CSS can be utilized.
Video Tutorial of How to Create Google Extension To Get YouTube Video Tags Using JavaScript
As you have seen on the given tutorial of How to Create Google Extension To Get YouTube Video Tags Using JavaScript, If you are feeling bored watching the given video tutorial of How to Create Google Extension To Get YouTube Video Tags Using JavaScript then you can copy or download the given codes below:
How to Create Google Extension To Get YouTube Video Tags Using JavaScript | Free Source Code
To create this program (Tag Finder). First, you need to create four Files one manifest.json and next HTML File and another one is CSS File and the last one is JavaScript File. After creating these files just paste the following codes in your file.
In the first place, make a manifest file with the name of manifest.json and paste the given codes in your manifest file record. Keep in mind, you’ve to make a document with .json extension.
{
"manifest_version": 2,
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "S-Tech04 YouTube",
"version": "1.0",
"description": "This extension will help you to get youtube videos tags",
"icons": {
"16": "img/logo16.png",
"48": "img/logo48.png",
"128": "img/logo128.png"
},
"browser_action": {
"default_title": "https://youtube.com/c/STech04",
"default_icon": "img/logo16.png",
"default_popup": "popup.html"
},
"content_scripts":[
{
"matches": ["https://www.youtube.com/watch?v=*"],
"js":["init.js"],
"css":["style.css"]
}
]
}
Next you need to create a html file with name of popup.html and paste the following html code in popup.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 300px;
padding: 30px;
border-radius: 20px;
}
</style>
</head>
<body>
<h2>This extension will help you to get youtube videos tags</h2>
</body>
</html>
Next create a CSS file with the name style.css and paste the following code in style.css file
.wrapper
{
width: 82%;
background: #fff;
border-radius: 10px;
padding: 18px 25px 20px;
box-shadow: 0 0 30px rgba(0,0,0,0.06);
margin-bottom: 20px;
}
.wrapper :where(.title, li, .details)
{
display: flex;
align-items: center;
}
.wrapper .title img
{
max-width: 21px;
}
.wrapper .title h2
{
margin-left: 8px;
font-size: 21px;
font-weight: 600;
}
.wrapper .url-field
{
width: 100%;
}
.wrapper .url-field .title
{
font-size: 18px;
color: #444;
width: 100%;
}
.wrapper .url-field .field
{
margin-top: 10px;
margin-bottom: 10px;
height: 50px;
width: 100%;
position: relative;
}
.wrapper .content
{
margin: 10px 0px;
}
.content p
{
font-size: 15px;
}
.content ul
{
display: flex;
flex-wrap: wrap;
min-height: 50px;
max-height: 300px;
border: 1px solid #a6a6a6;
border-radius: 5px;
padding: 7px;
margin: 12px 0;
overflow-y: auto;
}
.content ul li
{
color: #333;
margin: 4px 3px;
background: #f2f2f2;
border: 1px solid #e3e1e1;
border-radius: 30px;
padding: 5px 10px 5px 12px;
list-style: none;
font-size: 16px;
}
.content .details
{
justify-content: space-between;
}
.content .details p
{
font-size: 15px;
}
.content .details button
{
outline: none;
border: none;
color: #fff;
cursor: pointer;
background: #5372f0;
padding: 9px 15px;
border-radius: 5px;
font-size: 14px;
transition: 0.3s ease-in-out;
}
.content .details button:hover
{
background: #2c52ed;
}
At last step you need to add the following javascript in init.js file
function checkSideBar() {
const secondary_inner = document.querySelector("#secondary-inner");
if (secondary_inner) {
secondary_inner.insertAdjacentHTML(
"afterbegin",
`
<div class="wrapper">
<textarea hidden class="hidden"></textarea>
<div class="content">
<div class="url-field">
<div class="title">
<h2>Tags</h2>
</div>
<ul>
</ul>
</div>
<div class="details">
<p><span>0</span> Tags are found.</p>
<button>Copy All</button>
</div>
</div>
</div>
`
);
const ul = document.querySelector(".url-field ul");
const tagNum = document.querySelector(".details span");
let vidId = window.location.href;
if (vidId.indexOf("https://www.youtube.com/watch?v=") != -1) {
let Id = vidId.split("v=")[1].substring(0, 11);
// console.log(Id);
getTags(Id);
} else if (vidId.indexOf("https://youtu.be/") != -1) {
let Id = vidId.split("be/")[1].substring(0, 11);
// console.log(Id);
getTags(Id);
}
function getTags(Id) {
// Please Use your on api key
let key = "AIzaSyD3NXPLGOHw_MIBiEL6-Xc0LYTSsb_thQo";
// let key = ["Your Api key"];
fetch(`https://www.googleapis.com/youtube/v3/videos?id=${Id}&key=${key}&part=snippet` )
.then((res) => res.json())
.then((data) => {
let tags = data.items[0].snippet.tags;
if (tags === undefined) {
ul.innerHTML = `<li>No tags are found</li>`;
tagNum.innerHTML = "0";
} else {
let hidden = document.querySelector(".wrapper .hidden");
hidden.value = tags.toString();
createTags();
countTags();
}
function countTags() {
tagNum.innerHTML = tags.length;
}
function createTags() {
ul.querySelectorAll("li").forEach((li) => li.remove());
tags.slice()
.reverse()
.forEach((tag) => {
let liTags = `<li>${tag}</li>`;
ul.insertAdjacentHTML("afterbegin", liTags);
});
}
})
.catch((error) => {
console.log(error);
});
}
const copyBtn = document.querySelector(".details button");
copyBtn.addEventListener("click", () => {
let hidden = document.querySelector(".wrapper .hidden");
hidden.select();
hidden.setSelectionRange(0, 999999);
navigator.clipboard.writeText(hidden.value);
alert("Tags are copied");
});
// Get the current video's id
let videoId = new URL(window.location.href).searchParams.get("v");
// Create an observer to detect changes to the URL
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function () {
// Check if the video id has changed
let newVideoId = new URL(window.location.href).searchParams.get("v");
if (newVideoId !== videoId) {
// Update the input field
videoId = newVideoId;
getTags(videoId);
}
});
});
// Observe changes to the URL
observer.observe(document.body, { childList: true, subtree: true });
} else {
setTimeout(() => {
checkSideBar();
}, 500);
}
}
checkSideBar();
Also add icons in image folder with four different dimensions (128 x 128, 48 x 48, 19 x 19 and 16 x 16).
After completing all the above steps upload your extension to google chrome as I told you in the above video and test it.
That’s all, now you’ve successfully created a program to create Google Extension To Get YouTube Video Tags Using JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Click on the following download button to download all source code files.
