在 Trello 的 Chrome 扩展中检查浏览器

Question

我正在开发一个 Chrome 扩展程序，它在我的卡片列表中处理 Trello 中的卡片。

尽管 Trello 是一个动态 JS 应用程序，但我的扩展程序能够在用户单击 link 时检测到 URL 更改。

但是如何检测用户何时单击浏览器中的 Back/Forward 按钮？

我尝试了很多（简单的）方法来检测我在互联网上找到的后退按钮，但没有成功。这是我当前的检测函数。

function detectHistoryChange(handler) {
    document.head.appendChild(document.createElement('script')).text = '(' +
        function () {
            // injected DOM script is not a content script anymore,
            // it can modify objects and functions of the page
            var _pushState = history.pushState;
            history.pushState = function (state, title, url) {
                _pushState.call(this, state, title, url);
                window.dispatchEvent(new CustomEvent('state-changed', { detail: state }));
            };
            // repeat the above for replaceState too
        } + ')(); $(this).remove();'; // remove the DOM script element

    // And here content script listens to our DOM script custom events
    window.addEventListener('state-changed', function (e) {
        console.log('History state changed', e.detail, location.hash);
        handler();
    });
}

谢谢！

Answer 1

似乎 Trello 在导航时触发了一个事件 single-spa:routing-event。所以我在这个事件上添加了一个监听器，它非常有效！

在 Trello 的 Chrome 扩展中检查浏览器

Check browser back in Chrome extension in Trello

javascript

google-chrome-extension

dom-events

trello