get-bing-background.js

// ==UserScript==
// @name         Get Bing Background
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Get Bing Background !
// @author       [email protected]
// @match        http://*.bing.com/*
// @include      http://*.bing.com/*
// @grant        none
// ==/UserScript==
(function() {
  const $containerStyle = {
    position: 'fixed',
    top: '43px',
    left: 0,
    height: '60px'
  };

  const $buttonStyle = {
    height: '60px',
    width: '60px',
    float: 'left'
  };

  const $listStyle = {
    height: '60px',
    listStyle: 'none',
    float: 'left',
    margin: 0
  };

  const $container = createElement('div', $containerStyle);
  const $button = createElement('button', $buttonStyle);
  const $close = createElement('button', $buttonStyle);
  const $list = createElement('ul', $listStyle);

  function createElement(tagName, style) {
    let el = document.createElement(tagName);
    Object.assign(el.style, style);
    return el;
  }

  function createList() {
    const API = 'http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=100';

    fetch(API).then(data => data.json()).then(json => {
      if (json && json.images && Array.isArray(json.images)) {
        json.images.map(item => item.url).forEach(url => {
          var li = createElement('li', { display: 'inline-block' });
          var img = createElement('img', { height: '60px' });
          img.src = url;
          li.appendChild(img);
          $list.appendChild(li);

          li.addEventListener('click', function() {
            document.querySelector('#bgDiv').style.backgroundImage = 'url(' + this.children[0].src + ')';
          });
        });
      }
    });
  }

  function init () {
    $button.textContent = '下载';
    $close.textContent = '关闭';

    $container.appendChild($button);
    $container.appendChild($list);
    $container.appendChild($close);
    document.body.appendChild($container);
    createList();

    $button.addEventListener('click', function() {
      window.open(window.getComputedStyle(document.querySelector('#bgDiv'), null).getPropertyValue('background-image').replace(/.*\("(.*)"\).*/, '$1'));
    });

    $close.addEventListener('click', function() {
      $container.remove();
    });

    console.info('bing bou!');
  }

  window.addEventListener('load', init);
})();