javascript - 注入(inject) html 作为 API 调用 Chrome 扩展的结果

Question

问题

如何从 API 调用中获取 json 结果并将结果注入(inject) html 页面？

背景

作为我正在开发的 Web 扩展的一部分，我调用 API 来获取结果 json。

我的popup.html有一个调用call.js文件的按钮单击。

call.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});
            }

就流程而言，我不确定如何以有效的方式将 api 调用的结果传递给将 HTML 注入(inject)到 location.html 文件中的脚本。

我尝试了以下流程

Get API Json -> store json in localStorage -> open location.html url -> have a content script that runs an injection.js file one https://*location.html* appears -> inject required elements

但是 json 对于本地存储来说太大了，老实说，我不确定该流程是否正确。您对如何解决这个问题有什么建议吗？我觉得这是网络扩展的标准功能，但由于某种原因，我无法将这 block 拼图拼凑在一起。

谢谢!

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})

})
            }