manifest.json
{
"manifest_version": 3,
"name": "Popup Link Menu",
"version": "1.0",
"description": "ポップアップにHTMLメニューを表示する拡張機能",
"action": {
"default_popup": "popup.html",
"default_title": "メニュー"
}
}
popup.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
body {
width: 220px;
padding: 10px;
font-family: sans-serif;
}
h2 {
font-size: 16px;
margin: 6px 0 10px;
text-align: center;
}
a.menu {
display: block;
padding: 8px;
margin-bottom: 6px;
background: #f2f2f2;
border-radius: 6px;
text-decoration: none;
color: #333;
text-align: center;
}
a.menu:hover {
background: #ddd;
}
</style>
</head>
<body>
<h2>クイックメニュー</h2>
<a class="menu" href="https://www.google.com/" target="_blank">Google を開く</a>
<a class="menu" href="http://〇〇.php" target="_blank">〇〇</a>
<a class="menu" href="http://〇〇/" target="_blank">〇〇</a>
<a class="menu" href="http://〇〇.php" target="_blank">〇〇</a>
<p style="font-size:12px; margin-top:10px; text-align:center;">
※ リンクは新しいタブで開きます
</p>
<script src="popup.js"></script>
</body>
</html>
popup.js
// 例：クリックされたリンクをログに残す
document.querySelectorAll("a.menu").forEach(link => {
link.addEventListener("click", () => {
console.log("open:", link.href);
});
});