Внедрить html в результате вызова API Chrome Extension

Question

Вопрос

Как получить результат json из API-вызова и ввести результат на страницу html?

Контекст

В рамках веб-расширения, над которым я работаю, я вызываю и API для получения json.

моего popup.html щелчок по кнопке, который вызывает файл call.js.

вызов. js (пример)

$.ajax({
        type: 'GET',
        url:body,
        headers: headers,
        success:function(data) {
              console.log(data);
              // use return json to update html
              // maybe open html for injection here as
              // var url = chrome.extension.getURL('location.html')
              // chrome.tabs.create({url: url, active: true});
            }

Interms of flow, я не уверен, как эффективно и эффективно передать результат вызова API скрипту, который вставит HTML в файл location.html.

Я попытался выполнить следующий поток

Получить API Json -> store json в localStorage -> open location.html url -> иметь скрипт содержимого, который запускает injection.js файл, появляется один https://*location.html* -> вводить обязательные элементы

, но json был слишком большим для локального хранилища, и, честно говоря, я не уверен, что этот поток был даже правильным. Есть ли у вас какие-либо предложения о том, как решить эту проблему? Я чувствую, что это стандартная функциональность веб-расширений, но по какой-то причине я не могу собрать эту часть головоломки вместе.

Спасибо!

Answer 1

используйте передачу массажа.

в вашем скрипте контента

chrome.runtime.onMessage.addListener(req =>{
if(req.action === "showJSONFromPopup"){
 showJSONResult(req.data)
}
})

в вашем скрипте всплывающих окон

$.ajax({
        type: 'GET',
        url:body,
        headers: headers,
        success:function(data) {
              console.log(data);
              chrome.tabs.query({currentWindow:true, active:true}, tabs=>{
              chrome.tabs.sendMessage(tabs[0].id, {action: "showJSONFromPopup", data})

})
            }