はじめに
自分はブラウジングをしている際、気づけば多くのタブを開いたままにしてしまい、数が物凄いことになってしまう場面がよくあります。
その状況を少しずつ緩和するために、Chrome の拡張機能の勉強もしながら自分でタブ整理を行う機能を作ってみることにしました。
２つ以上同じ URL のページを開いているタブを閉じる
自分の場合、よく閲覧するページを既に他のタブで開いているのに、新たに別のタブで開き直してしまい、結果的に同じ URL のタブが複数できてしまうことがよくあります。
なので、同じ URL のタブが２つ以上ある場合、１つ以外は閉じてしまう機能を作ってみたいと思います。
拡張機能を作成していく
ファイル構成
manifest.json
popup.html
popup.js
manifest.json
{
"name": "Tab duplicate resolution",
"description": "Tab duplicate resolution",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
今回は、誤ってアイコンをクリックしてしまった際にそのままタブが閉じられるのを防ぐため、
ツールバーに表示された拡張機能のアイコンをクリックし、
表示されたポップアップの中身を更にクリックすることで重複しているタブが閉じられるようにします。
そのため、
"action": {
"default_popup": "popup.html"
}
でポップアップする html の指定を行っています。
また、今回はタブの情報が必要となるため、
"permissions": [
"tabs"
]
上記のように tabs の許可を行っています。
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>popup</title>
<style>
body{
width: 230px;
}
button{
background-color: transparent;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="tabCountMessage"></button>
<script src="popup.js"></script>
</body>
</html>
拡張機能のアイコンをクリックした際に表示する、ポップアップの中身を記載します。
今回は、tabCountMessage を指定している箇所に重複しているタブの数を記載し、それをクリックすることでタブが閉じられるようにします。
また、最低限の style を指定して見た目を整えています。
popup.js
let duplicateTabs = []
chrome.tabs.query({}, tabs => {
tabUrls = tabs.map((tab) => tab.url)
duplicateTabs = tabs.filter((tab, index) => {
return tabUrls.indexOf(tab.url) !== tabUrls.lastIndexOf(tab.url) && tabUrls.indexOf(tab.url) < index
})
document.getElementById("tabCountMessage").innerHTML = "重複している"+ duplicateTabs.length+"個のタブを閉じる"
})
document.getElementById("tabCountMessage").addEventListener("click", async () => {
duplicateTabs.forEach((tab) => {
chrome.tabs.remove(tab.id)
})
window.close()
})
ポップアップで動作するスクリプトです。
chrome.tabs.query({}, tabs => {
tabUrls = tabs.map((tab) => tab.url)
duplicateTabs = tabs.filter((tab, index) => {
return tabUrls.indexOf(tab.url) !== tabUrls.lastIndexOf(tab.url) && tabUrls.indexOf(tab.url) < index
})
document.getElementById("tabCountMessage").innerHTML = "重複している"+ duplicateTabs.length+"個のタブを閉じる"
})
上記の部分で、ポップアップが表示された際に閉じられる予定のタブの数を数え、tabCountMessageを指定した要素に表示するようにしています。
document.getElementById("tabCountMessage").addEventListener("click", async () => {
duplicateTabs.forEach((tab) => {
chrome.tabs.remove(tab.id)
})
window.close()
})
そして、tabCountMessageを指定した要素がクリックされた際に
重複したタブの削除を行い、そのままポップアップを閉じるようにしています。
動かしてみる
無事、重複したタブを閉じてくれました！