javascript - 如何使用 Chrome DevTools 颜色选择器工具而不是 Vanilla Chrome 颜色选择器工具？

Question

Google Chrome 提供了自己的颜色选择器工具，开发人员可以在我们不想在我们的网站上安装/编写自己的颜色选择器时使用。这很有用。好漂亮啊。这很容易。只需插入一小段可爱的 HTML5 代码即可

<input type="color" />

并且有效。这几乎很棒。它几乎完美。 几乎 是蜜蜂的膝盖。 几乎。

它有 rgb。它有十六进制。它甚至有 hsl。但是该死的东西不允许用户改变不透明度。这有点愚蠢。我想让用户改变不透明度，该死!

现在，我网站的用户可以更改不透明度。我很懒，所以这不是疯了或什么的。只是在顶部的代码中添加了一点点，它就可以工作了。这不是我想要的。

<input id="color" type="color"/><input id="opacity" type="number" min="0" max="1" />

显然，Google 可以编写一个可以使用 rgba 和 hsla 的颜色选择器工具。他们做到了，而且它(仍然)在当前版本的谷歌浏览器 (91.0.4472.77) 中。它在 Google Chrome 的 DevTools 中可用。这很棒。太棒了。

我想要那个颜色选择器。

有没有办法在我的网站上使用很棒的颜色选择器？

PS:我知道我可以编写这样的颜色选择器或安装我在 Github 上找到的颜色选择器。但我不想做这两件事中的任何一件，因为 1) 我很懒惰和 2) 我测试过的大多数看起来都很丑陋和/或编码方式让我突然非常想吃意大利面。

Answer 1

要查看的位置在 Chrome Dev Tools API 中.据我所知，他们只提供 Inspector作为一个整体单元，可能包括颜色选择器。但是没有独立于我看到的 Inspector 的 Hook 。

也许如果你添加了 package在本地，您可以四处寻找并可能了解如何使用它。您可以将整个包添加为 npm 依赖项:npm install chrome-devtools-frontend 或 yarn add chrome-devtools-frontend。