在 chrome 擴展中通過 jQuery 刷新 PHP 文件

Question

我正在嘗試制作一個 chrome 擴展，它從我的 PHP 文件中獲取數據並顯示它，它正確顯示數據，但是每當我在我的 PHP 文件中進行更改時，它都不會在擴展中顯示它，我必須每次打開 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);
    });
});
}

Answer 1

使用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>

在 chrome 擴展中通過 jQuery 刷新 PHP 文件

問題描述

1 個解決方案

解決方案1
0 2020-02-10 07:59:38

在 chrome 擴展中通過 jQuery 刷新 PHP 文件

問題描述

1 個解決方案

解決方案1 0 2020-02-10 07:59:38

解決方案1
0 2020-02-10 07:59:38