☰

亚马逊搜索结果添加序号和广告ID

为亚马逊搜索结果页面上的广告和自然搜索结果添加序号, 并为广告结果添加广告ID

当前为 2024-05-10 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         亚马逊搜索结果添加序号和广告ID
  3. // @namespace    https://noobbei.top
  4. // @version      1.0.1
  5. // @description  为亚马逊搜索结果页面上的广告和自然搜索结果添加序号, 并为广告结果添加广告ID
  6. // @author       noobbei
  7. // @match        https://www.amazon.com/*
  8. // @match        https://www.amazon.co.uk/*
  9. // @match        https://www.amazon.de/*
  10. // @match        https://www.amazon.it/*
  11. // @match        https://www.amazon.fr/*
  12. // @match        https://www.amazon.es/*
  13. // @match        https://www.amazon.se/*
  14. // @match        https://www.amazon.com.mx/*
  15. // @match        https://www.amazon.co.jp/*
  16. // @match        https://www.amazon.ca/*
  17. // @icon         https://www.amazon.com/favicon.ico
  18. // @license      MIT
  19. // @grant        none
  20. // ==/UserScript==
  21.  
  22.  
  23. (function() {
  24.     'use strict';
  25.  
  26.     // 封装逻辑于一个函数中
  27.     const applyLabelsAndIds = () => {
  28.         // 计数器重置
  29.         let adCounter = 1;
  30.         let searchResultCounter = 1;
  31.  
  32.         // 获取所有搜索结果的元素
  33.         let searchResults = document.querySelectorAll('div[data-component-type="s-search-result"], .sbv-video-single-product');
  34.  
  35.         searchResults.forEach(result => {
  36.             let label;
  37.             let adIdElement;
  38.  
  39.             // 检查是否已添加过标签
  40.             if(result.querySelector('.ad-counter-label, .search-result-counter-label')) {
  41.                 return; // 如果已添加标签，跳过这个元素
  42.             }
  43.  
  44.             // 检查是否是广告
  45.             if (result.classList.contains('AdHolder') || result.classList.contains('sbv-video-single-product')) {
  46.  
  47.                 // 创建序号标签
  48.                 label = createLabel(`${adCounter}`, 'gold');
  49.                 label.classList.add('ad-counter-label'); // 添加自定义类以避免重复添加
  50.  
  51.  
  52.                 // 从data-s-safe-ajax-modal-trigger属性获取广告ID
  53.                 let adDataAttribute = result.querySelector('[data-s-safe-ajax-modal-trigger]');
  54.                 // console.log('adData');
  55.                 // console.log(adDataAttribute);
  56.                 let adId = null;
  57.                 if (adDataAttribute) {
  58.                     // 解码HTML实体，然后解析JSON
  59.                     const adData = JSON.parse(adDataAttribute.getAttribute('data-s-safe-ajax-modal-trigger'));
  60.                     let ajaxUrl = adData.ajaxUrl;
  61.                     adId = decodeURIComponent(ajaxUrl).match(/"adId":"([^"]*)"/)[1];
  62.  
  63.                 }
  64.  
  65.                 // 如果找到广告ID，则创建并添加一个包含广告ID的标签
  66.                 if (adId) {
  67.                     adIdElement = document.createElement('span');
  68.                     adIdElement.textContent = `广告ID: ${adId}`;
  69.                     adIdElement.style.backgroundColor = '#DAA520'; // 金色背景色
  70.                     adIdElement.style.color = '#FFFFFF'; // 白色字体
  71.                     adIdElement.style.fontWeight = 'bold'; // 字体加粗
  72.                     adIdElement.style.padding = '3px 6px'; // 内边距
  73.                     adIdElement.style.marginLeft = '10px'; // 左边距
  74.                     adIdElement.style.borderRadius = '4px'; // 边框圆角
  75.                     adIdElement.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.3)'; // 简单阴影效果
  76.                     adIdElement.style.fontSize = '0.75rem'; // 字体大小
  77.                     adIdElement.style.textAlign = 'center'; // 文本居中
  78.                     adIdElement.style.verticalAlign = 'middle'; // 垂直居中
  79.                     adIdElement.style.display = 'inline-block'; // 使用inline-block以便应用宽高、边距等
  80.                     adIdElement.style.minWidth = '80px'; // 最小宽度，保证布局的一致性
  81.                     adIdElement.style.height = '20px'; // 元素高度
  82.                     adIdElement.style.lineHeight = '20px'; // 行高与元素高度一致以垂直居中文本
  83.  
  84.                 }
  85.  
  86.  
  87.                 // 增加广告计数器
  88.                 adCounter++;
  89.  
  90.             } else {
  91.                 // 创建序号标签
  92.                 label = createLabel(`${searchResultCounter}`, 'green');
  93.                 label.classList.add('search-result-counter-label'); // 添加自定义类以避免重复添加
  94.  
  95.                 // 增加搜索结果计数器
  96.                 searchResultCounter++;
  97.             }
  98.  
  99.             // 将序号标签预置到搜索结果元素的顶部
  100.             result.insertBefore(label, result.firstChild);
  101.             if(adIdElement){
  102.                 // 将广告ID标签插入到广告序号标签之后
  103.                 result.insertBefore(adIdElement, label.nextSibling);
  104.             }
  105.         });
  106.     };
  107.  
  108.     // 创建标签的函数，避免重复代码
  109.     function createLabel(text, backgroundColor) {
  110.         let label = document.createElement('span');
  111.         label.textContent = text;
  112.         // 样式设置
  113.         label.style.backgroundColor = backgroundColor;
  114.         label.style.borderRadius = '50%';
  115.         label.style.color = '#000';
  116.         label.style.display = 'inline-table';
  117.         label.style.width = '25px';
  118.         label.style.height = '25px';
  119.         label.style.textAlign = 'center';
  120.         label.style.marginLeft = '10px';
  121.         label.style.marginRight = '5px';
  122.         label.style.lineHeight = '25px';
  123.         label.style.verticalAlign = 'middle';
  124.         return label;
  125.     }
  126.  
  127.     // 使用MutationObserver来监视DOM的变化
  128.     let observer = new MutationObserver((mutations) => {
  129.         mutations.forEach((mutation) => {
  130.             if (mutation.addedNodes.length) {
  131.                 applyLabelsAndIds();
  132.             }
  133.         });
  134.     });
  135.  
  136.     // 监视整个body的变化
  137.     observer.observe(document.body, {childList: true, subtree: true});
  138.  
  139.     // 初次调用
  140.     applyLabelsAndIds();
  141. })();