还在谷歌商店找页面取色器? 自己写一个就好了, 只需一行代码!前端写页面经常要取色,之前也下载过一些取色扩展,最近那个扩

实际html代码只需一行代码

什么? 不相信?

前端写页面经常要取色,之前也下载过一些取色扩展,最近那个扩展坏掉了,看着简单,就研究下怎么做

先放效果图

谷歌扩展必须文件

manifest.json代码

{
	"name": "扩展名称",
	"version": "1.2.3",
	"description": "扩展描述",
	"manifest_version": 3,
	"author": "xzw",
	"icons": {
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	"action": {
		"default_icon": "img/icon.png",
		"default_title": "title",
		"default_popup": "index.html"
	}
}

img就是扩展的图标,自己找一张喜欢的就行

最重要的代码在于index.html,用到原生input的color属性,自带吸取颜色的吸管,其他浏览器可能无此功能,也无所谓了,只在谷歌使用

index.html代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我的世界</title>
</head>
<body>
	<input type="color">
</body>
</html>

页面代码只用到 input type="color" 即可

如果需要其他样式,可以用css再美化下

关于安装本地扩展, 直接点击加载已解压的扩展程序, 选中本地文件夹

简单, 完结