DuckDuckGo Search Buttons v8

Adds Google, Google Shopping, YouTube, Amazon, eBay, Bing, Reddit, and GitHub search buttons to DuckDuckGo search results with a visually appealing design for small and large displays, following the DuckDuckGo color scheme
目前为 2023-05-16 提交的版本。查看最新版本。
安装此脚本 ?
提问、发表评价，或者举报这个脚本。
Wrap lines
// ==UserScript==
// @name         DuckDuckGo Search Buttons v8
// @namespace    http://tampermonkey.net/
// @version      8
// @description  Adds Google, Google Shopping, YouTube, Amazon, eBay, Bing, Reddit, and GitHub search buttons to DuckDuckGo search results with a visually appealing design for small and large displays, following the DuckDuckGo color scheme
// @match        https://duckduckgo.com/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  const colorScheme = {
    lightBG: 'var(--ddg-light-bg)',
    lightHoverBG: 'var(--ddg-light-hover-bg)',
    text: 'var(--ddg-text)',
    lightHoverText: 'var(--ddg-light-hover-text)',
    google: '#4285f4',
    googleShopping: '#f4b400',
    youtube: '#ff0000',
    amazon: '#ff9900',
    ebay: '#0064d2',
    bing: '#2d89ef',
    reddit: '#ff4500',
    github: '#24292e'
  };

  // Create container for buttons
  const buttonsContainer = document.createElement('div');
  buttonsContainer.classList.add('ddg-buttons-container');
  const searchForm = document.querySelector('#search_form');
  searchForm.insertAdjacentElement('beforebegin', buttonsContainer);

  // Create buttons
  const buttons = [
    { text: 'Google', dataLink: 'google', className: 'ddg-google-button' },
    { text: 'Google Shopping', dataLink: 'googles', className: 'ddg-google-shopping-button' },
    { text: 'YouTube', dataLink: 'youtube', className: 'ddg-youtube-button' },
    { text: 'Amazon', dataLink: 'amazon', className: 'ddg-amazon-button' },
    { text: 'eBay', dataLink: 'ebay', className: 'ddg-ebay-button' },
    { text: 'Bing', dataLink: 'bing', className: 'ddg-bing-button' },
    { text: 'Reddit', dataLink: 'reddit', className: 'ddg-reddit-button' },
    { text: 'GitHub', dataLink: 'github', className: 'ddg-github-button' }
  ];

  buttons.forEach(button => {
    const buttonElement = createButtonElement(button.text, button.dataLink, button.className);
    buttonsContainer.appendChild(buttonElement);

    buttonElement.addEventListener('click', () => {
      const searchQuery = getSearchQuery();
      const url = getSearchUrl(button.dataLink, searchQuery);
      openUrlInNewTab(url);
    });
  });

  // Helper function to create button elements
  function createButtonElement(text, dataLink, className) {
    const button = document.createElement('a');
    button.classList.add(className);
    button.setAttribute('data-zci-link', dataLink);
    button.textContent = text;
    button.href = '#';
    return button;
  }

  // Helper function to get search query from DuckDuckGo search bar
  function getSearchQuery() {
    const searchInput = document.querySelector('#search_form_input');
    return searchInput.value;
  }

  // Helper function to get search URL for a button
  function getSearchUrl(dataLink, searchQuery) {
    switch (dataLink) {
      case 'google':
        return `https://www.google.com/search?q=${encodeURIComponent(searchQuery)}`;
      case 'googles':
        return `https://www.google.com/search?q=${encodeURIComponent(searchQuery)}&tbm=shop`;
      case 'youtube':
        return `https://www.youtube.com/results?search_query=${encodeURIComponent(searchQuery)}`;
      case 'amazon':
        return `https://www.amazon.com/s?k=${encodeURIComponent(searchQuery)}`;
      case 'ebay':
        return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(searchQuery)}`;
      case 'bing':
        return `https://www.bing.com/search?q=${encodeURIComponent(searchQuery)}`;
      case 'reddit':
        return `https://www.reddit.com/search?q=${encodeURIComponent(searchQuery)}`;
      case 'github':
        return `https://github.com/search?q=${encodeURIComponent(searchQuery)}`;
      default:
        return '';
    }
  }

  // Helper function to open URL in new tab
  function openUrlInNewTab(url) {
    const newTab = window.open(url, '_blank');
    newTab.focus();
  }

  // Add styles to buttons container
  const styles = `
    .ddg-buttons-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0;
      padding: 5px;
      background-color: ${colorScheme.lightBG};
      border-radius: 5px;
      width: 100%;
      overflow-x: auto;
    }

    .ddg-buttons-container a {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: ${colorScheme.text};
      font-size: 14px;
      font-weight: bold;
      border-radius: 5px;
      padding: 10px;
      margin-right: 5px;
      transition: background-color 0.2s ease;
      height: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ddg-buttons-container a:last-child {
      margin-right: 0;
    }

    .ddg-buttons-container a:hover {
      background-color: ${colorScheme.lightHoverBG};
      color: ${colorScheme.lightHoverText};
    }

    .ddg-google-button {
      background-color: ${colorScheme.google};
    }

    .ddg-google-shopping-button {
      background-color: ${colorScheme.googleShopping};
    }

    .ddg-youtube-button {
      background-color: ${colorScheme.youtube};
    }

    .ddg-amazon-button {
      background-color: ${colorScheme.amazon};
    }

    .ddg-ebay-button {
      background-color: ${colorScheme.ebay};
    }

    .ddg-bing-button {
      background-color: ${colorScheme.bing};
    }

    .ddg-reddit-button {
      background-color: ${colorScheme.reddit};
    }

    .ddg-github-button {
      background-color: #4B0082;
    }

    @media (max-width: 767px) {
      .ddg-buttons-container {
        flex-wrap: wrap;
        justify-content: center;
      }

      .ddg-buttons-container a {
        margin: 5px;
        font-size: 12px;
        padding: 6px;
      }
    }

    /* Dark mode styles */
    :root[data-theme="dark"] {
      --ddg-light-bg: #282828;
      --ddg-light-hover-bg: #3a3a3a;
      --ddg-text: #fff;
      --ddg-light-hover-text: #fff;
    }

    :root[data-theme="dark"] .ddg-google-button {
      background-color: #1a73e8;
    }

    :root[data-theme="dark"] .ddg-google-shopping-button {
      background-color: #f4b400;
    }

    :root[data-theme="dark"] .ddg-youtube-button {
      background-color: #ff0000;
    }

    :root[data-theme="dark"] .ddg-amazon-button {
      background-color: #ff9900;
    }

    :root[data-theme="dark"] .ddg-ebay-button {
      background-color: #0064d2;
    }

    :root[data-theme="dark"] .ddg-bing-button {
      background-color: #2d89ef;
    }

    :root[data-theme="dark"] .ddg-reddit-button {
      background-color: #ff4500;
    }

    :root[data-theme="dark"] .ddg-github-button {
      background-color: #4B0082;
    }
  `;
  const styleElement = document.createElement('style');
  styleElement.textContent = styles;
  document.head.appendChild(styleElement);

})();
欢迎访问Greasy Fork镜像
