chrome扩展按钮使用browser_action基本q突出显示

chrome extension button highlighted using browser_action basic q

本文关键字：基本 显示 action 按钮 扩展 browser chrome      更新时间：2024-05-26

我是chrome扩展的新手，想知道为什么会看到这种行为。

一个使用browser_action弹出html页面的基本chrome扩展我想知道为什么当我打开时第一个按钮会突出显示或处于活动状态。我猜测browser_ation有什么问题，但不确定，不知道是否有人能解释并告诉我如何停止。以下是我正在处理的内容。

{
  "manifest_version": 2,
  "name": "test",
  "description": "test",
  "version": "1.0",
  "browser_action": {
     "default_icon": "test.png",
     "default_popup": "index.html"
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
  </head>
<body>
  <div>
    <button>test
    </button>
    <button>test
    </button>
    <button>test
    </button>
    <button>test
    </button>
  </div>
</body>
</html>

感谢所有的先进！

假设你指的是顶部按钮周围的蓝色轮廓，那么这是因为默认情况下Chrome会为焦点按钮添加轮廓样式。默认情况下，它会将第一个按钮集中在弹出窗口上。

有几种方法可以解决这个问题。

选项1：更改所有按钮的选项卡索引

最简单的方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
  </head>
<body>
  <div>
    <button tabindex="-1">test
    </button>
    <button tabindex="-1">test
    </button>
    <button tabindex="-1">test
    </button>
    <button tabindex="-1">test
    </button>
  </div>
</body>
</html>

选项2：覆盖默认Chrome样式

这种方法会覆盖默认的Chrome按钮：焦点样式。但如果你想在未来添加自己的按钮：焦点风格，那么这个问题就会再次出现。

默认Chrome风格：

:focus { /* user agent stylesheet */
    outline: -webkit-focus-ring-color auto 5px;
}

您可以通过覆盖默认的Chrome样式来防止这种情况的发生：

button:focus {
    outline:0;
}

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      button:focus {outline:0;}
    </style>
    <title>test</title>
  </head>
<body>
  <div>
    <button>test
    </button>
    <button>test
    </button>
    <button>test
    </button>
    <button>test
    </button>
  </div>
</body>
</html>

选项3：JavaScript方式

使用JavaScript和blur()函数，可以删除第一个按钮的焦点。这种方法需要做更多的工作。

popup.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="popup.js" type="text/javascript"></script>
    <title>test</title>
  </head>
<body>
  <div>
    <button>test
    </button>
    <button>test
    </button>
    <button>test
    </button>
    <button>test
    </button>
  </div>
</body>
</html>

popup.js:

function removeInitialFocus() {
    if (event.target.tagName == "BUTTON") {
        event.target.blur();
    }
    document.removeEventListener("focusin", removeInitialFocus);
};
document.addEventListener("focusin", removeInitialFocus);
相关文章：