JavaScript拡張機能でJSONファイルを読み込む方法


方法1: XMLHttpRequestを使用する方法

function loadJSONFile(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.overrideMimeType("application/json");
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    }
  };
  xhr.send(null);
}
// 使用例
loadJSONFile("example.json", function (data) {
  console.log(data);
});

方法2: Fetch APIを使用する方法(非同期)

fetch("example.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log(error);
  });

方法3: Chrome拡張機能のchrome.extension.getURL()を使用する方法

chrome.extension.getURL("example.json");

方法4: ファイルを直接読み込む方法(ローカルファイルシステムアクセスが必要です)

// <input type="file" id="fileInput">
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    var contents = e.target.result;
    var json = JSON.parse(contents);
    console.log(json);
  };
  reader.readAsText(file);
});

これらの方法を使用して、Chrome拡張機能でJSONファイルを読み込むことができます。適切な方法を選択し、必要に応じてコードを調整してください。