单击扩展按钮时自动执行Javascript

Executes Javascript automatically on extension button click

本文关键字：执行 Javascript 扩展 按钮 单击      更新时间：2023-09-26

我正在开发一个Chrome扩展，该扩展获取一个包含视频游戏中地图旋转数据的在线JSON。映射每4小时旋转一次，因此当映射更改时，主机端的JSON也会更新。

问题是，（比如说下午3点更新maps/JSON）当我在下午3点后点击扩展的按钮时，扩展加载上一轮的JSON，而不是新的JSON。我希望每次用户单击按钮扩展时，该扩展都能更新JSON和DOM。这是我的代码：

manifest.json

{
    "manifest_version": 2,
    "name": "Splat Rotations",
    "description": "Fetch the current and upcoming Splatoon rotations without SplatNet log in",
    "version": "1.0",
    "icons": {
            "16": "images/icon16.png",
            "19": "images/icon19.png",
            "32": "images/icon32.png",
            "38": "images/icon38.png",
            "48": "images/icon48.png",
            "128": "images/icon128.png"
    },
    "browser_action": {
        "default_title": "Splat Rotations",
        "default_icon": {
            "16": "images/icon16.png",
            "19": "images/icon19.png",
            "32": "images/icon32.png",
            "38": "images/icon38.png",
            "48": "images/icon48.png",
            "128": "images/icon128.png"
        },
        "default_popup": "popup.html"
    },
    "permissions": [
        "https://splatoon.ink/"
    ]
}

popup.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Splat Rotations</title>
        <link rel="stylesheet" href="popup.css">
    </head>
    <body>
        <div id="rotations"></div>
        <footer></footer>
        <script src="popup.js"></script>
    </body>
</html>

popup.js

// Get Splatoon map rotations using the Splatoon.ink API
function retrieveRotations() {
    // Retrieve JSON file
    var AJAX_req = new XMLHttpRequest();
    AJAX_req.open("GET", 'https://splatoon.ink/schedule.json', true);
    AJAX_req.setRequestHeader("Content-type", "application/json");
    AJAX_req.onreadystatechange = function() {
        // Check if splatoon.ink is up and running
        if(AJAX_req.readyState == 4 && AJAX_req.status == 200) {
            // Parse JSON
            var json = JSON.parse(AJAX_req.responseText)
            parseRotations(json);
        }
    }
    AJAX_req.send(null);
}
// Parse acquired data
function parseRotations(data) {

            ////
            //// This is just parsing the JSON and adding divs with the data to the DOM.
            ////
}
window.addEventListener('load', function() {
    retrieveRotations();
}, false);

我可以添加一个按钮和一个点击事件监听器，但这需要用户执行两个操作（单击扩展按钮，然后单击另一个刷新按钮），但我真的不想这样做。

可能是缓存问题，所以我用URL参数将当前时间戳附加到JSON中，这样JSON就不一样了。

var noCacheJSON = new Date().getTime();
AJAX_req.open("GET", 'https://url.json?c='+noCacheJSON, true);

它终于正常工作了！

让您的popup.js文件包括：

document.addEventListener('DOMContentLoaded', function() {
    retrieveRotations();
    //Other Actions
}

"我希望每次用户点击按钮扩展时，扩展都能更新JSON和DOM。"您需要使用background.js文件中的chrome.browserAction API来检测对扩展图标的点击。根据chrome.browserAction文档，此代码看起来像：

chrome.browserAction.onClicked.addListener(function(tab) {
   //Execute your content script here...
   chrome.tabs.executeScript({ file: "popup.js" }); 
});

如需进一步参考，请查看谷歌的chrome扩展示例。标题为"单击时更改图标的浏览器操作"的示例还将显示如何处理单击扩展图标的操作。

相关文章：