Добавление истории Chrome к всплывающему HTML и оно продолжает мерцать - PullRequest
Новая
       1

Добавление истории Chrome к всплывающему HTML и оно продолжает мерцать

0 голосов
/ 15 апреля 2019

Я пытаюсь добавить URL истории Chrome, lastVisitTime и Sno, все работает нормально, когда URL печатается как статический текст.

Проблема возникает, когда я печатаю URL в таблице, он продолжает добавлять URL, я нене понимаю этого поведения.

Вот popup.js 

var count = 0;
var table = url = "";
var tbody = document.getElementById('tbody');
chrome.history.search({text: '', maxResults: 2}, function(data) {
    data.forEach(function(page) {
        count++;  
        url = page.url;     
        table += '<tr class="table-warning"><td scope="row">'+count+'</td><td>'+ url +'</td><td>'+page.lastVisitTime+'</td></tr>'; 
        console.log('url', url);                    
    });

    tbody.innerHTML += table;
});

popup.html 

<!DOCTYPE html>
<html>
<head>
    <title>History tracker</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
 <div class="container">        
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <thead>
                  <tr>
                    <th scope="col">Sno</th>
                    <th scope="col">Website</th>
                    <th scope="col">Time</th>                    
                  </tr>
                </thead>
                <tbody id="tbody">                 
                </tbody>
              </table>
        </div>
    </div>
 </div> 
 <script src="popup.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 17 апреля 2019

Проверив и потратив на это много времени, я обнаружил, что это проблема CSS, Класс контейнера создавал проблему, поэтому я удалил класс контейнера. Это была проблема ширины, ширина всплывающего окна была недостаточной для отображения URL, поэтому я удалил столбец времени и предоставил фиксированную ширину столбцу URL. 

<!DOCTYPE html>
<html>
<head>
    <title>History tracker</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
      table{
        overflow-x: scroll;
      }
      td#history_url {
        max-width: 500px;
        word-break: break-word;
        min-width: 500px;
      }
    </style>
</head>
<body>
 <div class="">     
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover responsive">
                <thead>
                  <tr>
                    <th scope="col">Sno</th>
                    <th scope="col">Website</th>                    
                    <th scope="col">Delete</th>                 
                  </tr>
                </thead>
                <tbody id="tbody">                 
                </tbody>
              </table>
        </div>
    </div>
 </div> 
 <script src="popup.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...