今回は私が作成したChrome拡張機能「ブックマークマネージャー」について紹介したいと思います。この記事では、拡張機能の作成過程を具体的に説明し、実際に自作してみる方法をステップバイステップで解説します。
なぜブックマークマネージャーを作ったのか
日々の業務で使用するウェブサイトの数は膨大です。頻繁にアクセスするサイトが多いと、効率的に管理する方法が必要になります。Chromeの標準機能でもブックマーク管理はできますが、もっと使いやすく、カスタマイズ可能なツールが欲しいと思い、自作することにしました。
必要なもの
Chrome拡張機能を作成するために必要なものは以下の通りです：
- テキストエディタ（例：VSCode、Sublime Text）
- Chromeブラウザ
- 基本的なHTML、CSS、JavaScriptの知識
これらのツールと知識があれば、誰でも簡単に拡張機能を作成することができます。
プロジェクトの準備
まずは、プロジェクトフォルダを作成し、その中に必要なファイルを配置します。以下のような構造にします：
bookmark_extension/
│
├── icons/
│ ├── icon16.png
│ ├── icon48.png
│ ├── icon128.png
│
├── manifest.json
├── popup.html
├── popup.js
└── styles.css
アイコンの準備
iconsフォルダには、拡張機能のアイコンを格納します。これらのアイコンはChromeウェブストアに表示されるもので、サイズは16×16、48×48、128×128ピクセルの3種類が必要です。
manifest.jsonの設定
manifest.jsonは拡張機能のメタデータを定義するファイルです。これにより、拡張機能の名前、バージョン、パーミッションなどを設定します。
jsonコードをコピーする
{
"manifest_version": 3,
"name": "Enhanced Bookmark Portal",
"version": "1.1",
"description": "An enhanced bookmark portal with updated links and a stylish design.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"permissions": [
"bookmarks"
]
}
popup.htmlの作成
次に、ポップアップとして表示されるHTMLファイルを作成します。このファイルでは、ブックマークリストとそれを管理するためのUIを定義します。
htmlコードをコピーする
<!DOCTYPE html>
<html>
<head>
<title>Enhanced Bookmark Portal</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1>Bookmark Portal</h1>
<ul id="bookmark-list">
<!-- ブックマークリンクがここに挿入されます -->
</ul>
<button id="open-selected">Open Selected</button>
</div>
<script src="popup.js"></script>
</body>
</html>
styles.cssの作成
styles.cssファイルでは、ポップアップのスタイルを定義します。ここでは、各ブックマークリンクに淡い色を付けて、チェックボックスの配置やボタンのスタイルを設定します。
cssコードをコピーする
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
width: 350px; /* ワイドに設定 */
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 15px;
}
label {
display: flex;
align-items: center;
width: 100%;
}
a {
flex-grow: 1;
padding: 15px;
border-radius: 5px;
text-decoration: none;
color: #1a73e8;
font-weight: bold;
transition: background-color 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
a.googlesheets { background-color: #e6f7ff; }
a.slack { background-color: #e6f7ff; }
a.shipandco { background-color: #e6ffe6; }
a.shopify { background-color: #e6ffe6; }
a.amazon { background-color: #fff9e6; }
a.rakuten { background-color: #fff9e6; }
a.yahoo { background-color: #fff9e6; }
a.freshdesk { background-color: #e6fff7; }
a.logiless_dashboard { background-color: #e6f9ff; }
a.logiless { background-color: #ffe6f0; }
a.googledrive { background-color: #ffe6f0; }
a:hover {
background-color: #e0e0e0;
text-decoration: underline;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #1a73e8;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}
button:hover {
background-color: #1557b5;
}
input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}
popup.jsの作成
popup.jsファイルでは、ブックマークのリストを生成し、選択されたリンクを一度に開く機能を実装します。
javascript
コードをコピーする
document.addEventListener('DOMContentLoaded', function () {
const bookmarks = [
{ title: "Google Sheets", url: "https://docs.google.com/spreadsheets/xxxx", className: "googlesheets" },
{ title: "Google Drive", url: "https://drive.google.com/drive/yyyy", className: "googledrive" },
{ title: "Slack", url: "https://app.slack.com/client/zzzz", className: "slack" },
{ title: "Ship&co", url: "https://app.shipandco.com/orders", className: "shipandco" },
{ title: "Shopify", url: "https://admin.shopify.com/store/aaaa/orders", className: "shopify" },
{ title: "Amazon Seller Central", url: "https://sellercentral-japan.amazon.com/", className: "amazon" },
{ title: "Rakuten RMS", url: "https://glogin.rms.rakuten.co.jp/", className: "rakuten" },
{ title: "Yahoo Store", url: "https://pro.store.yahoo.co.jp/pro.aaaa", className: "yahoo" },
{ title: "Freshdesk", url: "https://aaaaa.freshdesk.com/a/tickets/filters/unresolved", className: "freshdesk" },
{ title: "Logiless Dashboard", url: "https://app2.logiless.com/aaaaa/dashboard", className: "logiless_dashboard" },
{ title: "Logiless", url: "https://app2.logiless.com/merchant/", className: "logiless" },
];
const bookmarkList = document.getElementById('bookmark-list');
bookmarks.forEach(bookmark => {
const listItem = document.createElement('li');
const label = document.createElement('label');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.value = bookmark.url;
label.appendChild(checkbox);
const link = document.createElement('a');
link.href = bookmark.url;
link.textContent = bookmark.title;
link.target = '_blank';
link.className = bookmark.className;
label.appendChild(link);
listItem.appendChild(label);
bookmarkList.appendChild
