chrome 扩展中按钮的文本未显示 onclick

Question

这是我想要做的 -

1. 向此 API https://api.covid19india.org/data.json发送 GET 请求，该请求返回 Z70ECD11C1FFBBB270ECD11C1FD232A

2. 在我的 chrome 扩展 UI 上，我有一个按钮和一个 div

3. 单击按钮显示在 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"]
        }
    ]
}

popup.html

<!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>

内容.js

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

我可以 console.log 从 JSON 收到的数据，但是当我点击按钮时什么都没有显示，我哪里出错了，请帮忙！

Answer 1

1. 删除 DOMContentLoaded 行及其结束}); - 您不需要它，因为您的脚本位于页面末尾，因此在加载 DOM 时它已经运行
2. 从 manifest.json 中删除整个content_scripts部分
3. 将 content.js 重命名为 popup.js 因为它不是内容脚本，而是弹出页面中使用的普通脚本
4. 将使用result的代码移动到fetch的回调中 - 回调是异步的，因此应该在回调中使用结果
5. 在fetch中使用json() function
6. 检查正确的 devtools 控制台 - 弹出窗口是一个单独的 window，因此它有自己单独的 devtools - 在弹出窗口内右键单击，然后单击“检查”以打开其 devtools

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 () {
    // ...............
  });
});