Tampermonkey для доступа к вызову / URL-адресу JSON на странице? - PullRequest
0 голосов
/ 30 октября 2018

У меня есть страница index.html, которая вызывает внешний URL. Этот внешний URL является конечной точкой JSON. Другими словами, я вижу два ресурса, когда открываю инструменты разработчика (с F12 ): index.html и myJSONEndpoint.

Я хочу иметь возможность получать этот JSON каждый раз, когда я загружаю index.html, и что-то с ним делать.

Сумеют ли Greasemonkey или Tampermonkey этого добиться?

Пример страницы:

<!doctype html>
<html>
<head>
 <title>Weather</title>
<script>
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
             var myObj = JSON.parse(this.responseText);
        }
 };
xmlhttp.open("GET", "https://api.weather.gov/points/39.7456,-97.0892", true);
xmlhttp.send();
</script>
</head>
<body>
  <p>Page Loaded...</p>
</body>
</html>

Когда я загружаю эту страницу, в dev-tools появляются два запроса. Страница базового индекса и запрос JSON.

Я хочу взять содержимое JSON и вставить его в DOM. Пользователь может затем скопировать / вставить оттуда.
Создать новый <div>, а затем вставить туда содержимое?

1 Ответ

0 голосов
/ 03 ноября 2018

Re:

ОК, так что, может быть, проще взять контент JSON и нажать на DOM? Пользователь может затем скопировать / вставить оттуда.

Хорошо, код ниже показывает, как это сделать.
Обратите внимание, что указанный вами JSON-URL сам по себе не содержит данных о погоде. Указывает на правильное местоположение для получения этих данных для указанных координат.

Ниже приведен полный рабочий скрипт Tampermonkey . Он добавляет информацию из этого первого вызова JSON в левую колонку вопросов переполнения стека, например (щелкните изображение, чтобы увеличить его) :

& ЕПРС; & ЕПРС; & ЕПРС; Mashup

// ==UserScript==
// @name     _Fetch and use JSON
// @match    https://stackoverflow.com/questions/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_xmlhttpRequest
// @grant    GM_addStyle
// @connect  api.weather.gov
// ==/UserScript==
/* global $ */
/* eslint-disable no-multi-spaces, curly */

var apiURL = "https://api.weather.gov/points/39.7456,-97.0892";

GM_xmlhttpRequest ( {
    method:         "GET",
    url:            apiURL,
    responseType:   "json",
    onload:         processJSON_Response,
    onabort:        reportAJAX_Error,
    onerror:        reportAJAX_Error,
    ontimeout:      reportAJAX_Error
} );

function processJSON_Response (rspObj) {
    if (rspObj.status != 200  &&  rspObj.status != 304) {
        reportAJAX_Error (rspObj);
        return;
    }
    //-- The payload from the API will be in rspObj.response.
    var pyLd        = rspObj.response;
    /*-- The rest is defined by the structure specified/returned by the API.
        See its docs for more.
    */
    var nearbyCity  = pyLd.properties.relativeLocation.properties.city;
    var usaState    = pyLd.properties.relativeLocation.properties.state;
    var forecastURL = pyLd.properties.forecast;

    //-- Add the info to a div and insert that div somewhere...
    var resultsDiv  = $( `
        <div id="tmJsonMashupResults">
            For ${nearbyCity}, ${usaState}; you can see the forecast (JSON) at
            <a href="${forecastURL}">this link</a>.
        </div>
    ` );
    var targetNd    = $("#left-sidebar > div > nav[role='navigation']");
    if (targetNd.length)
        targetNd.append (resultsDiv);
    else
        console.error ("TM scrpt => Target node not found.");
}

function reportAJAX_Error (rspObj) {
    console.error (`TM scrpt => Error ${rspObj.status}!  ${rspObj.statusText}`);
}

//-- Style the results:
GM_addStyle ( `
    #tmJsonMashupResults {
        color: black;
        background: #f9fff9;
        padding: 0.75ex 1.3ex;
        border: 1px double gray;
        border-radius: 1ex;
    }
` );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...