Merhaba arkadaşlar ben Kruvazör
Bugün sizlerle tarayıcı üzerinde açık bulunan spesifik bir uzantıya sahip Urlleri listelemenize yarayan bir google extension yapacağız.
Örneğin "YouTube" şeklinde başlayan tüm urlleri toplayan bir extension elde edebileceksiniz.
Senaryo:
Bir sosyal medya müzik yayıncısı açtığı yayınlarda bazen kullanıcıların attığı şarkı linkleri incelemektedir.
Atılan şarkılar her gün artmakta ve yığılmakta olduğu için bir yerde biriktirilmesi gereksinimi oluşmuştur.
Yayıncı elle tek tek tüm linkleri aç kopyala txtye yapıştır yapmaya çok üşendiği için hemen yazılımcı arkadaşını aramış ve keyifli keyifli durumu anlatmış.
3 Gündür uyumayan çilekeş yazılımcı ise telefondan gelen o enerjik seslerle daha da perişan ve çilekeş olmuştur.
Teklifi kabul eder ve geliştirmeye başlar...
Bu bir Google Extension olduğu için Her google extensionda bulunan manifest dosyasını doldurmayı da unutmayarak benim yazdığım ilk konuyu okur ve nasıl kurulacağını öğrenir.
Google Extension nasıl kurulur?
MANİFEST DOSYASI
Bugün sizlerle tarayıcı üzerinde açık bulunan spesifik bir uzantıya sahip Urlleri listelemenize yarayan bir google extension yapacağız.
Örneğin "YouTube" şeklinde başlayan tüm urlleri toplayan bir extension elde edebileceksiniz.
Senaryo:
Bir sosyal medya müzik yayıncısı açtığı yayınlarda bazen kullanıcıların attığı şarkı linkleri incelemektedir.
Atılan şarkılar her gün artmakta ve yığılmakta olduğu için bir yerde biriktirilmesi gereksinimi oluşmuştur.
Yayıncı elle tek tek tüm linkleri aç kopyala txtye yapıştır yapmaya çok üşendiği için hemen yazılımcı arkadaşını aramış ve keyifli keyifli durumu anlatmış.
3 Gündür uyumayan çilekeş yazılımcı ise telefondan gelen o enerjik seslerle daha da perişan ve çilekeş olmuştur.
Teklifi kabul eder ve geliştirmeye başlar...
Bu bir Google Extension olduğu için Her google extensionda bulunan manifest dosyasını doldurmayı da unutmayarak benim yazdığım ilk konuyu okur ve nasıl kurulacağını öğrenir.
Google Extension nasıl kurulur?
MANİFEST DOSYASI
JSON:
{
"manifest_version": 3,
"version": "1.0",
"name": "Url Toplayıcı",
"action": {
"default_popup": "index.html",
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}HTML KODLARI
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div class="container">
<button id="tab-btn">KAYDET</button>
<button id="delete-btn">LİSTE SİL</button>
<button id="kapat-btn">SEKME KAPAT</button>
</div>
<ul id="ul-el"></ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>CSS KODLARI
CSS:
body {
margin: 0;
padding: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-width: 400px;
background-color: #000;
color: #00ff00;
}
.container {
margin-top: 20px;
text-align: center;
}
button {
margin-top: 10px;
padding: 10px 20px;
background: transparent;
color: #00ff00;
font-weight: bold;
border: 2px solid #00ff00;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}
button:hover {
background: #00ff00;
color: #000;
}
ul {
margin-top: 20px;
list-style: none;
padding-left: 0;
}
li {
margin-top: 5px;
}
li a {
color: #00ff00;
text-decoration: none;
}
button {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 1s;
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-in-left {
animation: slideInLeft 0.5s;
}İŞİN EĞLENCELİ KISMI JS KODLARI
JavaScript:
// Kaydedilmiş bağlantıları tutmak için boş bir dizi oluştur
let myLeads = [];
// HTML içerisindeki elementlere erişim sağlamak için gerekli olan referanslar
const ulEl = document.getElementById('ul-el');
const deleteBtn = document.getElementById("delete-btn");
const tabBtn = document.getElementById("tab-btn");
// Local Storage'dan kaydedilmiş bağlantıları al
const leadsFromLocalStorage = JSON.parse(localStorage.getItem('myLeads'));
// Eğer kaydedilmiş bağlantılar varsa, diziye aktar ve sayfayı güncelle
if (leadsFromLocalStorage) {
myLeads = leadsFromLocalStorage;
render(myLeads);
}
// Bağlantıları sayfaya render etmek için bir fonksiyon
function render(leads) {
let listItems = "";
for (var i = 0; i < leads.length; i++) {
listItems += `
<li>
<a href='${leads[i]}' target='_blank'>
${leads[i]}
</a>
</li>
`
}
ulEl.innerHTML = listItems;
}
// Kaydedilmiş bağlantıları ve local storage'ı temizleme işlemi
deleteBtn.addEventListener("dblclick", function() {
localStorage.clear();
myLeads = [];
render(myLeads);
});
// Şu anki tarayıcı üzerindeki sekmeleri kontrol edip uygun olanları kaydetme işlemi
tabBtn.addEventListener("click", function() {
chrome.tabs.query({}, function(allTabs) {
for (let i = 0; i < allTabs.length; i++) {
// Belirli bir domain'e ait sekmeleri filtreleme
// burayı istediğiniz şekilde ayarlayın.
if (allTabs[i].url.startsWith("https://www.youtube.com/watch?v=")) {
myLeads.push(allTabs[i].url);
}
}
// Local storage'a güncellenmiş bağlantıları kaydetme
localStorage.setItem("myLeads", JSON.stringify(myLeads));
render(myLeads);
});
});
// Belirli bir domain'e ait sekmeleri kapatma işlemi
const kapatBtn = document.getElementById("kapat-btn");
kapatBtn.addEventListener("click", function() {
chrome.tabs.query({}, function(allTabs) {
for (let i = 0; i < allTabs.length; i++) {
const tabUrl = allTabs[i].url;
if (tabUrl.startsWith("https://www.youtube.com/watch?v=")) {
chrome.tabs.remove(allTabs[i].id, function() {
// Sekme başarıyla kapatıldığında yapılacak işlemleri burada ekleyebilirsiniz.
});
}
}
});
});
OKUDUĞUNUZ İÇİN TEŞEKKÜRLER
