javascript - Chrome 扩展 window.history 失败...但为什么呢？

Question

这完全让我陷入困境。这里的想法是，我需要禁用上下文菜单在某些工作机器上工作的功能。 问题是，当我单击上下文菜单中的前进和后退处理程序时，页面保持不变，除非尝试前进时，URL 会附加“#”..

我进行了以下测试:

在具有一些后退导航历史记录的选项卡上打开 Chrome 开发工具，然后切换到开发工具控制台选项卡。

我输入:

window.history.back() -- 页面很好地返回到上一页。 window.history.forward() -- 页面很好地前进到了最后一页。

然后我将控制台框架顶部的上下文从 <top frame> 切换到到我的扩展的扩展条目“chrome-extension://abcd...”。

我输入:

window.history.back() -- 页面很好地返回到上一页。 window.history.forward() -- 页面很好地前进到了最后一页。

但是，我的扩展程序中带有随附代码的按钮不起作用。我很想得到一些关于为什么会发生这种情况的反馈。

现在另一个有趣的好消息可能会帮助某人了解可能发生的事情:

我关闭并重新打开 Chrome，并在控制台中运行 window.history 方法测试(从上面)。这些方法按预期正常工作。然后我再次尝试测试我编写的新上下文菜单处理程序，但仍然失败。然而;在这些测试之后，如果我尝试运行 history.back再次在控制台中调用方法，它们现在失败了。

禁用所有其他扩展程序并重新启动浏览器后，使用相同的步骤进行测试，得到相同的结果。

ma​​nifest.json

{
    "name": "Disable Context Menu",
    "version": "0.1",
    "manifest_version": 2,
    "description": "Disabled context menu items for thin clients",
    "permissions": ["contextMenus","tabs"],
    "icons" : {"16": "/icons/printer.png",
               "16": "/icons/reload.png",
               "16": "/icons/back.png",
               "16": "/icons/forward.png"},
    "web_accessible_resources": ["/icons/printer.png","/icons/reload.png",
                                 "/icons/back.png","/icons/forward.png"],
    "content_scripts": [{ 
                           "matches" : ["<all_urls>"],
                           "js" : ["/js/jquery.js","/js/jquery.contextmenu.js","/js/content.js"],
                           "css" : ["/css/jquery.contextmenu.css","/css/menu.css"]
                       }]
}

content.js

function showPrintDialog()
{
    window.print();
}

$().ready(
    function()
    {
        $('body')
            .contextPopup(
            {
                title: 'Generic Context Menu',
                items: 
                [
                    {label: "forward", 
                     icon: chrome.extension.getURL('/icons/forward.png'),
                     action: function(){history.forward()},
                    },
                    {label: "back", 
                     icon: chrome.extension.getURL('/icons/back.png'),
                     action: function(){function(){history.back()},
                    },
                    {label: "reload", 
                     icon: chrome.extension.getURL('/icons/reload.png'),
                     action: function(){window.location.reload(true)}},
                     null,
                    {label: "print", 
                     icon: chrome.extension.getURL('/icons/printer.png'), 
                     action: function(){showPrintDialog()}},
                ],
            });
    });

Answer 1

这是 jQuery 上的一个错误 simple-context-menu plugin您正在使用。替换行:

row.find('a').click(function () { item.action(e); });

作者:

row.find('a').click(function (e) { e.preventDefault(); item.action(e); });

如果不添加 preventDefault()，单击菜单会导致浏览器导航到带有附加 # 的当前网址，这会干扰您的预期 历史操作。