Javascript 在chrome扩展中单击按钮时未显示文本_Javascript_Html_Json_Google Chrome_Google Chrome Extension

Javascript 在chrome扩展中单击按钮时未显示文本

javascript html json google-chrome google-chrome-extension

Javascript 在chrome扩展中单击按钮时未显示文本,javascript,html,json,google-chrome,google-chrome-extension,Javascript,Html,Json,Google Chrome,Google Chrome Extension,这就是我要做的- 向返回JSON数据的this API发送GET请求在我的chrome扩展界面上，我有一个按钮和一个div 单击按钮显示在div中接收的JSON数据代码- manifest.json { "manifest_version": 2, "name": "Custom Google Homepage", "description": "This extensio

这就是我要做的-

向返回JSON数据的this API发送GET请求

在我的chrome扩展界面上，我有一个按钮和一个div

单击按钮显示在div中接收的JSON数据

代码-

manifest.json

{
    "manifest_version": 2,

   "name": "Custom Google Homepage",
    "description": "This extension shows a Google Image search result for the current page",
    "version": "1.0",
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Click here!"
        },
    "permissions":[
        "tabs",
        "https://ajax.googleapis.com/",
        "https://api.covid19india.org/*"
    ],
    "content_scripts":[
        {
            "matches":[
                "<all_urls>"
            ],
            "js":["content.js"]
        }
    ]
}

我可以从JSON接收console.log数据，但当我单击按钮时，什么也不显示，我哪里出错了，请帮助

删除DOMContentLoaded行及其结束符（代码>）-您不需要它，因为您的脚本位于页面的末尾，所以它在加载DOM时已经运行

从manifest.json中删除整个

content\u脚本

部分

将content.js重命名为popup.js，因为它不是内容脚本，而是弹出页面中使用的普通脚本

将使用

result

的代码移动到

fetch

的回调中-回调是异步的，因此应该在回调中使用结果

在

fetch

检查正确的devtools控制台-弹出窗口是一个单独的窗口，因此它有自己的单独devtools-右键单击弹出窗口内部，然后单击“检查”打开其devtools

document.addEventListener是在fetch（）内部还是外部？在fetch外部，因为我想在页面加载后立即将请求发送到api，然后每当用户单击按钮时，文本都会显示出来@哈迪帕瓦尔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
    
    <style>
        #link
        {
            width: 70px;
            height: 25px;
        }
        #textt
        {
            width: 450px;
            height: 200px;
        }
    </style>
</head>
<body>
    <button id="link">Extract !</button>
    <div id="textt" style="color: red; font-family: 'Courier New', Courier, monospace;"></div>
</body>
<script src="content.js"></script>
</html>

fetch('https://api.covid19india.org/data.json').then(r => r.text()).then(result => {
    // Result now contains the response text, do what you want...
    result = JSON.parse(result)
    console.log(result["statewise"])
    //alert(JSON.stringify(result["statewise"][0]))
    })

    document.addEventListener('DOMContentLoaded', function () {
        var div = document.getElementById('textt');
        var btn = document.getElementById('link');
        

        btn.addEventListener('click', function() {
            chrome.tabs.getSelected(null, function(tab){
                alert(JSON.stringify(result['statewise'][0]));
            });
            
            div.innerHTML += JSON.stringify(result['statewise'][0]);
        });
      });

fetch('https://api.covid19india.org/data.json').then(r => r.json()).then(result => {
  const div = document.getElementById('textt');
  const btn = document.getElementById('link');
  btn.addEventListener('click', function () {
    // ...............
  });
});