Waze UI with URL Manager２

Wazeのエディター画面上にURL管理用UIを表示
当前为 2024-10-01 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Waze UI with URL Manager２
// @namespace    https://greasyfork.org/ja/users/735907-cauliflower-carrot
// @version      1.2
// @description  Wazeのエディター画面上にURL管理用UIを表示
// @author       aoi
// @match        https://www.waze.com/ja/editor*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    window.addEventListener('load', function() {
        // ボタンを作成して追加
        const button = document.createElement("button");
        button.innerHTML = "URL管理";
        button.style.position = "fixed";
        button.style.zIndex = "10000";
        button.style.backgroundColor = "#4CAF50";
        button.style.color = "white";
        button.style.border = "none";
        button.style.borderRadius = "5px";
        button.style.cursor = "pointer";
        button.style.fontSize = "16px";
        button.style.padding = "5px 10px";
        button.style.right = "310px";
        button.style.top = "1px";

        // URL管理のUI要素を作成
        const urlManagementDiv = document.createElement("div");
        urlManagementDiv.innerHTML = `
            <h3 style="text-align: left; margin: 0 0 10px 0;">URL 管理</h3>
            <input type="text" id="urlInput" placeholder="URLを入力" style="width: 100%; padding: 5px; box-sizing: border-box;">
            <input type="text" id="nameInput" placeholder="住所名を入力" style="width: 100%; padding: 5px; box-sizing: border-box; margin-top: 5px;">
            <button id="addUrlButton" style="width: 100%; margin-top: 5px; padding: 5px; background-color: blue; color: white; border: none; border-radius: 5px;">URL追加</button>
            <ul id="urlList" style="list-style: none; padding: 0; margin: 10px 0 0 0; max-height: 150px; overflow-y: auto;"></ul>
        `;
        urlManagementDiv.style.position = "fixed";
        urlManagementDiv.style.right = "10px";
        urlManagementDiv.style.top = "60px";
        urlManagementDiv.style.zIndex = "10000";
        urlManagementDiv.style.backgroundColor = "#f9f9f9";
        urlManagementDiv.style.padding = "15px";
        urlManagementDiv.style.border = "1px solid #ccc";
        urlManagementDiv.style.borderRadius = "5px";
        urlManagementDiv.style.width = "350px"; // 横幅を広げる
        urlManagementDiv.style.display = "none"; // 初期状態では非表示

        // URLを保存するためのリスト
        let allowedUrls = JSON.parse(localStorage.getItem('allowedUrls')) || [];

        // URLリストの表示を更新する関数
        function updateUrlList() {
            const urlList = document.getElementById('urlList');
            urlList.innerHTML = '';
            allowedUrls.forEach((item) => {
                const li = document.createElement('li');
                li.style.display = "flex";
                li.style.justifyContent = "space-between";
                li.style.alignItems = "center";
                li.innerHTML = `<span style="flex: 1;"><a href="${item.url}" style="color: blue;" onclick="window.location='${item.url}'; return false;">${item.name || item.url}</a></span>`;
                const removeButton = document.createElement('button');
                removeButton.textContent = '削除';
                removeButton.style.marginLeft = "10px";
                removeButton.addEventListener('click', function() {
                    allowedUrls = allowedUrls.filter(i => i.url !== item.url);
                    localStorage.setItem('allowedUrls', JSON.stringify(allowedUrls));
                    updateUrlList();
                });
                li.appendChild(removeButton);
                urlList.appendChild(li);
            });
        }

        // URLを追加するイベント
        document.addEventListener('click', function(e) {
            if (e.target && e.target.id === 'addUrlButton') {
                const urlInput = document.getElementById('urlInput');
                const nameInput = document.getElementById('nameInput');
                const newUrl = urlInput.value.trim();
                const newName = nameInput.value.trim();

                if (newUrl && !allowedUrls.some(item => item.url === newUrl)) {
                    allowedUrls.push({ url: newUrl, name: newName });
                    localStorage.setItem('allowedUrls', JSON.stringify(allowedUrls));
                    urlInput.value = '';
                    nameInput.value = '';
                    updateUrlList();
                } else if (allowedUrls.some(item => item.url === newUrl)) {
                    alert('このURLは既にリストに存在します。');
                } else {
                    alert('URLを入力してください。');
                }
            }
        });

        // ボタンをクリックしたときにUIを表示・非表示
        button.addEventListener('click', function() {
            if (urlManagementDiv.style.display === "none") {
                urlManagementDiv.style.display = "block";
            } else {
                urlManagementDiv.style.display = "none";
            }
        });

        // ページにボタンとUIを追加
        document.body.appendChild(button);
        document.body.appendChild(urlManagementDiv);

        // 初期状態でURLリストを更新
        updateUrlList();
    });
})();