时间戳

首页 > 解决方案 > 将左侧边栏隐藏在 Gmail 中的 Chrome 扩展

javascript - 将左侧边栏隐藏在 Gmail 中的 Chrome 扩展

问题描述

在 Gmail 页面上，左侧边栏有两种显示方式。一，总是扩大。二，折叠视图，鼠标悬停时展开。我知道我的文件夹/标签图标/颜色，所以侧边栏自动扩展对我来说是一种干扰，我希望它保持折叠状态。

我能够使用 Chrome 的 DevTools 检查 Gmail 页面并确定元素及其类名。我能够使用 Chrome 的 DevTools 从相应的元素中删除“mouseenter”事件侦听器以实现我的目标。但是在页面刷新时，“mouseenter”监听器又回来了，所以为了让我的生活更轻松，我正在创建一个 chrome 扩展，以保持 Gmail 中的左侧边栏隐藏并且不响应“mouseenter”。

我是 javascript 和编写 chrome 扩展的新手，但已经注册了一个在 Gmail 页面加载时运行的内容脚本。

当我这样做时，侧边栏被隐藏了，所以我知道我有正确的元素

var sidebar = document.getElementsByClassName("nH oy8Mbf nn aeN bhZ");
sidebar[0].style.display = "none";

但是，当我尝试删除事件侦听器时，它不起作用（侧边栏继续响应“mouseenter”）。

var sidebar = document.getElementsByClassName("nH oy8Mbf nn aeN bhZ");
sidebar[0].removeEventListener("mouseenter", null);

注意：由于我无法确定 mouseenter 侦听器的函数，因此我将“null”作为第二个（函数）参数传递

我还尝试使用这段代码覆盖侦听器（在stackoverflow上看到它）：

var sidebar = document.getElementsByClassName("nH oy8Mbf nn aeN bhZ");

sidebar[0].addEventListener("mouseenter", function (event) {
  event.stopPropagation();
}, true);

到目前为止我还没有成功。如果有任何替代方法或我的方法有任何问题，请告诉我。谢谢你的帮助！

标签： javascriptgoogle-chrome-extension

解决方案

使用 CSS 和一点点 Javascript 解决了这个问题。此方法不会删除事件侦听器。Chrome 扩展程序的源代码可在此处获得：

https://github.com/workingsunil/chrome-extension-hidden-sidebar

特征：

  1. 鼠标悬停时，左侧边栏不再自动展开/折叠
  2. 标签上显示的未读邮件计数
  3. 单击“更多”按钮时，将显示全尺寸侧边栏

gmail-chrome-extension-boilerplate提示页面加载等待。

推荐阅读