Amazon_Keepa_Sakura_Button

Add links to Keepa and Sakura Checker to the Amazon.co.jp product screen.
目前為 2024-06-30 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name            Amazon_Keepa_Sakura_Button
// @name:ja         Amazonの商品画面に価格履歴とサクラチェックのボタンを追加
// @namespace       https://greasyfork.org/users/1324207
// @match           https://www.amazon.co.jp/dp/*
// @match           https://www.amazon.co.jp/*/dp/*
// @match           https://www.amazon.co.jp/gp/product/*
// @match           https://www.amazon.co.jp/exec/obidos/ASIN/*
// @match           https://www.amazon.co.jp/o/ASIN/*
// @version         1.1.1
// @author          乾かしカラス
// @description     Add links to Keepa and Sakura Checker to the Amazon.co.jp product screen.
// @description:ja  Amazonの商品画面にKeepaとサクラチェッカーへのリンクを追加します。
// @license         MIT
// @icon            https://www.amazon.co.jp/favicon.ico
// ==/UserScript==

(() => {
    'use strict';

    const TARGET_ELEMENT_SELECTORS = [
        '#buyNow',
        '#add-to-cart-button',
        '#buybox .a-button-stack',
        '#add-to-cart-button-ubb',
        '#buybox-see-all-buying-choices',
        '#buybox-see-all-buying-choices-announce',
        '#rcx-subscribe-submit-button-announce',
        '#dealsAccordionRow',
        '#outOfStock'
    ];

    const ASIN_SOURCES = [
        () => window.location.pathname.match(/\/(?:dp|gp\/product|exec\/obidos\/asin|o\/ASIN)\/(\w{10})/)?.[1],
        () => new URLSearchParams(window.location.search).get('asin'),
        () => document.querySelector('[name="ASIN.0"],[name="ASIN"]')?.value,
    ];

    let previousUrl = window.location.href;

    const observer = new MutationObserver(() => {
        if (previousUrl !== window.location.href) {
            previousUrl = window.location.href;
            addCheckerLinks();
        }
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });

    function addCheckerLinks() {
        removeCheckerLinks();

        const asin = extractAsin();
        if (!asin) return;

        const linksHtml = `
            <div id='checker-links' class='checker'>
                <a href='https://keepa.com/#!product/5-${asin}/' target='_blank' class='price-history-link'>
                    価格履歴
                </a>
                <a href='https://sakura-checker.jp/search/${asin}/' target='_blank' class='sakura-checker-link'>
                    サクラチェック
                </a>
            </div>`;

        const targetElement = findTargetElementForCheckerLinks();
        if (targetElement) {
            targetElement.insertAdjacentHTML('afterend', linksHtml);
        }
    }

    function removeCheckerLinks() {
        document.getElementById('checker-links')?.remove();
    }

    function extractAsin() {
        for (const source of ASIN_SOURCES) {
            const asin = source();
            if (asin) return asin;
        }
        return '';
    }

    function findTargetElementForCheckerLinks() {
        for (const selector of TARGET_ELEMENT_SELECTORS) {
            const targetElement = document.querySelector(selector);
            if (targetElement) return targetElement.closest('div.a-section');
        }
        return null;
    }

    function addCheckerStyles() {
        const styleHtml = `
            <style>
                .checker a {
                    display: inline-block;
                    border: 0;
                    height: 4ex;
                    line-height: 4ex;
                    margin-bottom: 1.2ex;
                    width: 100%;
                    text-align: center;
                    color: black;
                    border-radius: 10em;
                    text-decoration: none;
                    font-size: 1em;
                }
                .sakura-checker-link {
                    background: deeppink;
                }
                .sakura-checker-link:hover {
                    background: Crimson;
                }
                .price-history-link {
                    background: DeepSkyBlue;
                }
                .price-history-link:hover {
                    background: DodgerBlue;
                }
                @media screen and (max-width: 768px) {
                    .checker a {
                        height: 5.5ex;
                        line-height: 5.5ex;
                    }
                }
            </style>`;
        document.head.insertAdjacentHTML('beforeend', styleHtml);
    }

    addCheckerStyles();
    addCheckerLinks();
})();