tampermonkeyでJavascriptがうまく動かない

Question

以下のコードで、jsonをconsoleに表示させたいと思っています。
デベロッパーツールで実行すると、うまく動くのですが、

var obj;
var json;

// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function() {
    var $ = window.jQuery;
    obj = $.getJSON('https://yuis.xsrv.jp/cdn/dev.json', function(data) {});
};
document.getElementsByTagName("head")[0].appendChild(script);

json = obj.responseJSON ;
console.log(json.keywords) ;

tampermonkeyだと、objが定義されていない、というエラーが出てしまいます。

// ==UserScript==
// @name         dev2
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==


var obj;
var json;

// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function() {
    var $ = window.jQuery;
    // Use $ here...
    // obj = $.getJSON('http://localhost:3000/api/index.json?url[]=https://www.microsoft.com/ja-jp/windows&url[]=https://en.wikipedia.org/wiki/Microsoft_Windows', function(data) {});
    obj = $.getJSON('https://yuis.xsrv.jp/cdn/dev.json', function(data) {});
};
document.getElementsByTagName("head")[0].appendChild(script);

json = obj.responseJSON ;
console.log(json.keywords) ;

エラー

ERROR: Execution of script 'dev2' failed! Cannot read property 'responseJSON' of undefined

obj
VM987:1 Uncaught ReferenceError: obj is not defined
    at <anonymous>:1:1

どこか抜けている部分などありますでしょうか？

Answer 1

どこか抜けている部分などありますでしょうか？

$.getJSONは非同期実行になるので、結果が帰ってくる前にjson = obj.responseJSON ;を実行しようとしてエラーになります。コンソールで実行する場合は、人間の入力が速くないので、次の行を入れる前に完了していたためにエラーとならなかっただけです。

データを受け取ったあとの処理は、$.getJSONに渡したfunction(data) {}の中で行いましょう。

Answer 2

おそらく以下のコードの onload の中と外でスコープが異なるからではないですかね。
変数obj外で定義してましたね。 maisumakun さんのとおり $.getJSONが非同期なのが原因ですね。

質問の回答とは逸れてしまいますが、 ajax が目的でしたら特に理由がない限りブラウザ標準の fetchAPI を使ったほうが簡単でいいと思います。（IE未実装）

var url = 'https://yuis.xsrv.jp/cdn/dev.json';
fetch(url)
.then(function(response){
  return response.json();
})
.then(function(json){
  console.log(json);
});

アロー関数を使うと冗長な function を回避できます。

var url = 'https://yuis.xsrv.jp/cdn/dev.json';
fetch(url)
.then((response) => response.json()) // 式なら return を省略して値を返せる
.then(json => { // 引数が一つなら () を省略できる
  console.log(json);
});

さらに async/await を使うと

const getJson = async url => {
  const response = await fetch(url);
  const json = await response.json();
  return json;
};

const url = 'https://yuis.xsrv.jp/cdn/dev.json';
const json = getJson(url);
console.log(json);

と出来ます。

参考

When (and why) you should use ES6 arrow functions — and when you shouldn’t
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita