Текст не отображается при нажатии кнопки в расширении chrome - PullRequest
Новая
       56

Текст не отображается при нажатии кнопки в расширении chrome

0 голосов
/ 08 мая 2020

Вот что я пытаюсь сделать -

  1. Отправить запрос GET в этот API https://api.covid19india.org/data.json, который возвращает JSON данные

  2. В моем пользовательском интерфейсе расширения chrome у меня есть кнопка и div

  3. Отображение JSON данных, полученных в div при нажатии кнопки

Код -

манифест. 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"]
        }
    ]
}

всплывающее окно. 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, но при нажатии кнопки ничего не отображается, где я ошибаюсь, пожалуйста, помогите!

1 Ответ

1 голос
/ 08 мая 2020
  1. Удалите строку DOMContentLoaded и ее закрытие }); - она ​​вам не нужна, потому что ваш скрипт находится в конце страницы, поэтому он уже запускается при загрузке DOM
  2. Удалить все content_scripts раздел из манифеста. json
  3. Переименовать содержимое. js во всплывающее окно. js, потому что это не сценарий содержимого, а обычный сценарий, используемый на всплывающей странице
  4. Перемещение код, который использует result в обратном вызове fetch - обратный вызов является асинхронным, поэтому результат должен использоваться внутри обратного вызова
  5. Использовать функцию json() в fetch
  6. Проверить правильная консоль инструментов разработчика - всплывающее окно представляет собой отдельное окно, поэтому у него есть свои собственные отдельные инструменты разработчика - щелкните правой кнопкой мыши внутри всплывающего окна, затем нажмите «Проверить», чтобы открыть его инструменты разработчика 
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 () {
    // ...............
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...