Передача ответного ответа через обещание между фоновым и контентом контента?

Question

Я пытаюсь ввести html-шаблон в DOM веб-страницы через скрипт контента. Я предпочитаю хранить html-файлы в их собственной папке в расширении, так что они просты в обслуживании. Это означает, что для того, чтобы вставить шаблон, скрипту содержимого нужно будет указать фон, где фон затем отправит запрос на получение в соответствующую папку и вернет полученный шаблон через обратный вызов. Однако сценарий содержимого не получает ответ со справочной страницы.

contentscript.js

chrome.runtime.sendMessage({action: "template request"}, function(response) { 
    //this should be html 
    console.log(response) //hi, <div>template!</div> 
}); 

background.js

chrome.runtime.onMessage.addListener(function(request, sender, response) { 

    //ignore all non-template requests 
    if (request.action !== "template request") return; 

    //start the ajax promise 
    getTemplate('templates/foobar.html') 
     .then(function(data) { 
      //we're still in the scope of the onMessage callback 
      response(data) //but this does nothing, content script logs no errors 
      console.log(data) //<div>foobar</div> 
     }) 
     .catch(function(err) { 
      //... 
     }); 

    //however... 
    response('hi') //the content script successfully receives this response callback 
    response('<div>template!</div>') //the content script can also successfully receive this and inject it with jquery. 
}); 

function getTemplate(url) { 
    return new Promise(function(resolve, reject) { 
     $.ajax({ 
      type: "GET", 
      url: url, 
      success: resolve 
     }) 
    }); 
} 

Даже если я пройти обратный вызов от runtime.sendMessage через АЯКС обещания, ничего не происходит

getTemplate('templates/foobar.html', responseCallback) 
    .then(function(obj) { 
     obj.callback(obj.data) //does nothing 
    }); 

function getTemplate(url, callback) { 
    return new Promise(function(resolve, reject) { 
     $.ajax({ 
      type: "GET", 
      url: url, 
      success: function(data) { 
       resolve({data: data, callback: callback}) 
      } 
     }) 
    } 
} 

Я включил папку шаблона в web_accessible_resources, поэтому я не думаю, что это явная проблема. Какие-либо предложения?

Answer 1

Nevermind ... вам даже не нужно вызывать фоновый скрипт, так как chrome.extension.getURL доступен для скрипта содержимого. Таким образом, вы можете просто сделать это:

contentsript.js

getTemplate('templates/template.html') 
    .then(function(html) { 
     var el = $(html); 
     $('body').append(el); 
    }); 

function getTemplate(url) { 
    return new Promise(function(resolve, reject) { 
     $.ajax({ 
      type: "GET", 
      url: chrome.extension.getURL(url), 
      success: resolve 
     }); 
    } 
}