Как добавить загрузочную ссылку в Tampermonkey? - PullRequest
0 голосов
/ 21 сентября 2019

Итак, ребята, я редактирую дизайн музыкального сайта для своих выступлений.

И просто хочу знать, как мне добавить ссылку на загрузку в моем скрипте пользователя?

Я подозреваю, что какой-то конфликт сценария / начальной загрузки может быть, но у меня нет знаний, чтобы отследить это: <</p>

Помните, я новичок в этом;поэтому, если что-то не совсем понятно, не стесняйтесь спрашивать: -)

Пример песни: Текст .

// ==UserScript==
// @name         Bootstrap Test
// @description  Why the bootstrap isnt working :<
// @author       leon
// @include      *://www.letras.mus.br/*/*
// @namespace    http://tampermonkey.net/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require      https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js
// @require      http://code.jquery.com/jquery-1.11.3.min.js
// @resource     bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_getResourceURL
// ==/UserScript==

loadPage(window.location.href);
function loadPage(urlCurrent) {
  var http = new XMLHttpRequest();
  http.open('GET', urlCurrent, true);
  http.onloadend = function () {
    // Creating carousel
    var carousel = document.createElement('div');
    carousel.setAttribute('id', '#myCarousel');
    carousel.setAttribute('class', 'carousel slide');
    carousel.setAttribute('data-ride', 'carousel');
    // <!-- Indicators -->
    var indicators = document.createElement('ol');
    indicators.setAttribute('class', 'carousel-indicators');
    // <!-- Wrapper for slides -->
    var inner = document.createElement('div');
    inner.setAttribute('class', 'carousel-inner');
    // <!-- Left and right controls -->
    var controls = document.createElement('a');
    controls.innerHTML = `
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    `;
    // To get page elements
    var html = new DOMParser().parseFromString(this.responseText, "text/html")
    html = html.documentElement;
    var el = html.getElementsByTagName("H1");
    var content = el[el.length - 1].outerHTML + "\n";
    el = html.getElementsByTagName("H2")[0];
    el.innerHTML = el.innerText;
    content += el.outerHTML + "\n";
    content += html.getElementsByTagName("P")[0].parentElement.innerHTML
    var amountParagraphs = html.getElementsByTagName("P")[0].parentElement.childElementCount;
    // To create the amount of slides on the carousel
    for (let i = 0; i < amountParagraphs; i++) {
      if (i == 0) {
        let indicator = document.createElement('li');
        indicator.setAttribute('data-target', '#myCarousel');
        indicator.setAttribute('data-slide-to', `${i}`);
        indicator.setAttribute('class', 'active');
        indicators.appendChild(indicator);
      } else {
        let indicator = document.createElement('li');
        indicator.setAttribute('data-target', '#myCarousel');
        indicator.setAttribute('data-slide-to', `${i}`);
        indicators.appendChild(indicator);
      }
    }
    // To insert all paragraphs in the carousel
    for (let i = 0; i < amountParagraphs; i++) {
      if (i == 0) {
        let item = document.createElement('div');
        item.setAttribute('class', 'item active');
        item.innerHTML = `
              <div class="carousel-caption">
            <p>${document.getElementsByTagName("P")[i].innerHTML}</p>
              </div >
            `;
        inner.appendChild(item);
      } else {
        let item = document.createElement('div');
        item.setAttribute('class', 'item');
        item.innerHTML = `
              <div class="carousel-caption">
            <p>${document.getElementsByTagName("P")[i].innerHTML}</p>
              </div >
            `;
        inner.appendChild(item);
      }
    }
    // Adding all the elements in the carousel
    carousel.appendChild(indicators);
    carousel.appendChild(inner);
    carousel.appendChild(controls);
    // To create bootstrap link
    function cssElement(url) {
      var link = document.createElement("link");
      link.href = url;
      link.rel="stylesheet";
      link.type="text/css";
      return link;
    }
    // To write everything in the window
    document.write(`
      document.head.appendChild(cssElement(GM_getResourceURL("bootstrapCSS")));
      "<style>\n" +
      "body { background-color:transparent; font-family:Arial, sans-serif; font-size:19px; text-align:center; word-wrap:break-word; margin:0px; }\n" +
      "h1 { color: rgb(255, 102, 0); font-size: 25px; font-weight: 700; letter-spacing: -1px; margin:0px; }\n" +
      "h2, a { color:rgb(183, 183, 0); font-size: 19px; font-weight: 700; letter-spacing: -1px; text-decoration: none; margin:0px; }\n" +
      "p { color: rgb(68, 68, 68); font-weight: 400; line-height: 30.4px; margin-bottom: 30.4px; }\n" +
      "</style>\n"
      + ${carousel}
    `);

    document.close();
  }

  http.send();
}
...