Question

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

使用browser_action弹出html页面的一个基本的Chrome扩展我想知道为什么第一个按钮突然显示或在我打开时处于活动状态。我猜测浏览器操作但不确定，想知道是否有人可以解释并告诉我如何阻止这个。这是我正在使用的。

{
  "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>

感谢所有先进的人！

Answer 1

假设您的意思是顶部按钮周围的蓝色轮廓，那么这是因为默认情况下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);

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

1 个答案: