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

【问题标题】：Executes Javascript automatically on extension button click单击扩展按钮时自动执行 Javascript
【发布时间】：2015-11-07 05:02:21
【问题描述】：

我正在开发一个 Chrome 扩展程序，用于获取在线 JSON，其中包含有关视频游戏中地图旋转的数据。地图每 4 小时轮换一次，因此当地图更改时，主机端的 JSON 也会更新。

问题是，（假设地图/JSON 在下午 3 点更新）当我在下午 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);

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

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

这可能是缓存问题，所以我将当前时间戳附加到带有 URL 参数的 JSON 中，因此 JSON 永远不会相同。

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

它终于可以正常工作了！

【讨论】：

【解决方案2】：

让您的popup.js 文件包含：

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

【讨论】：

这与已经存在的window.addEventListener('load') 有何不同？
因为您不需要实际出现弹出窗口来单击另一个框，您可以让它触发操作而无需实际弹出窗口。
您的另一个选择是：developer.chrome.com/extensions/browserAction#event-onClicked
我不明白你的意思。据我了解，唯一可能的区别是：DOMContentLoaded -> popup.css 已加载 -> 已加载窗口。但这似乎不会影响 ajax 调用的行为。同样，我看不出使用browserAction.onClicked 将如何改变任何东西。这似乎是一个缓存问题，但这不是我的专长。
我已经尝试过 DOMContentLoaded 而不是 load，结果是一样的。

【解决方案3】：

“我希望每次用户点击按钮扩展时扩展更新 JSON 和 DOM。”您需要在 background.js 文件中使用 chrome.browserAction API 来检测对扩展图标的点击。根据 chrome.browserAction docs，此代码如下所示：

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

如需进一步参考，请查看 Google 的 chrome 扩展程序 examples。标题为“单击时更改其图标的浏览器操作”的示例还将显示如何处理单击扩展图标。

【讨论】：

不幸的是，如果扩展有弹出窗口，我不能使用 chrome.browserAction.onClicked。