Обновление PHP файла до jQuery в chrome расширении - PullRequest
0 голосов
/ 10 февраля 2020

Я пытаюсь создать расширение chrome, которое берет данные из моего PHP файла и отображает его, оно показывает данные правильно, но всякий раз, когда я изменяю свой файл PHP, оно не показывает его в расширении i. приходится каждый раз открывать localhost и перезагружать файл PHP, чтобы увидеть изменения в расширении. Как я могу автоматизировать его так, чтобы каждый раз, когда пользователь нажимал на расширение, фоновый скрипт перезагружался, получал данные из файла PHP и отображал его?

Вот как выглядит мой код manifest.json

{
"name": "Amazon extension test",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "browser_action": {
    "default_title":"Amazon Product Research Tool",
    "default_popup": "popup.html",
    "default_icon": {"16": "images/get_started16.png"}
    },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

popup.html

<body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="popup.js"></script>
    <h1>Amazon product research tool</h1>
    <table id="jsontable">
        <thead>
            <tr>
                <th width="10%">IMAGE</th>
                <th width="40%">TITLE</th>
                <th width="20%">SALES RANK</th>
                <th width="20%">PRICE</th>
                <th width="10%">ASIN</th>
            </tr>
        </thead>
        <tbody id="tablebody"></tbody>
    </table>
</body>

popup.js

var link = chrome.runtime.getURL('amazon.php');
   var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log("success");
      calljson();
    }
  };
  xhttp.open("GET", link, true);
  xhttp.send();

   function calljson(){
$.getJSON("results.json", function(data){
    console.log(data);
    $.each(data.SearchResult.Items, function(key,value){
        var products = '';
        products +='<tr>';
        products +='<td><img src="'+value.Images.Primary.Small.URL+'"></td>';
        products +='<td><a href="'+value.DetailPageURL+'" target="_blank">'+value.ItemInfo.Title.DisplayValue+'</a></td>';
        products +='<td>'+value.BrowseNodeInfo.BrowseNodes[0].SalesRank+'</td>';
        products +='<td>'+value.Offers.Listings[0].Price.DisplayAmount+'</td>';
        products +='<td>'+value.ASIN+'</td>';
        products +='</tr>';
        $("#tablebody").append(products);
    });
});
}

1 Ответ

0 голосов
/ 10 февраля 2020

Используйте setInterval для периодического вызова функции (в этом примере каждые 5 секунд, но вы можете установить больший период):

$(document).ready(function () {
        setInterval(function() { 
          init(); 
          console.log('initiated'); //remove this, only for debugging
         }, 5000);

    });

    function init() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                console.log("success");
                calljson();
            }
        };
        xhttp.open("GET", "amazon.php", true);
        xhttp.send();
    }


    function callJson() {
        $.getJSON("results.json", function (data) {
            console.log(data);
            $.each(data.SearchResult.Items, function (key, value) {
                var products = '';
                products += '<tr>';
                products += '<td><img src="' + value.Images.Primary.Small.URL + '"></td>';
                products += '<td><a href="' + value.DetailPageURL + '" target="_blank">' + value.ItemInfo.Title.DisplayValue + '</a></td>';
                products += '<td>' + value.BrowseNodeInfo.BrowseNodes[0].SalesRank + '</td>';
                products += '<td>' + value.Offers.Listings[0].Price.DisplayAmount + '</td>';
                products += '<td>' + value.ASIN + '</td>';
                products += '</tr>';
                $("#tablebody").append(products);
            });
        });
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...