1.谷歌版本95以上支持 EyeDropper
创建manifest.json文件
{
"manifest_version": 2,
"name": "colorPlugin",
"description": "这是一个浏览器颜色获取插件",
"version": "1.0",
// 插件外层图标
"icons": {
"16": "111.png",
"48": "111.png",
"128": "111.png"
},
"browser_action": {
// 默认图标
"default_icon": "111.png",
// 默认加载index.html
"default_popup": "popup.html"
},
"background": {
"scripts": [
"backgounrd.js"
]
},
"content_scripts": [
{
// 插件使用过略
"matches": [
"*://*/*"
],
// 加载js 数组 ，分割，按顺序加载
"js": [
"backgounrd.js"
],
// 什么时候录入，下面这个是 dom开发 也可以dom结束 document_end等
"run_at": "document_start"
}
]
}
2.创建backgounrd.js 不用内容空着就可以
console.log('暂不使用')
3.创建popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colorPlugin</title>
<style>
.content {
position: relative;
height: 80px;
width: 80px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.color_textarea
{
padding-top: 20px;
width: 100%;
border: 0px;
position: absolute;
width: 1px;
height: 1px;;
left: -3px;
}
.clickImg{
height: 40px;
width: 40px;
box-shadow: 0px 0px 5px #0f9;
animation: fadeIn 1.2s infinite linear;
}
.dengDiv{
position: absolute;
content: "";
display: block;
width: 20px;
height: 20px;
background-color: transparent;
bottom: 0px;
border-radius: 10px;
}
@keyframes fadeIn {
0% {
height: 20px;
width: 20px;
opacity: 0;
}
50% {
height: 30px;
width: 30px;
opacity: 1;
}
100% {
height: 40px;
width: 40px;
opacity: 0;
}
}
</style>
<script src="./popup.js"></script>
</head>
<body>
<div id="content" class="content">
<!-- <button id="colorPluginBtnId" class="btn">plugin</button> -->
<img id="colorPluginBtnId" class="clickImg" src="./icon.svg" alt="">
<input id="color_textarea" class="color_textarea">
<div id="dengDiv" class="dengDiv"></div>
</div>
</body>
</html>
4.创建popup.js
window.addEventListener("load", winLoad, false);
//dom加载
function winLoad() {
document.getElementById('colorPluginBtnId').addEventListener("click", btnClick);
}
const btnClick = () => {
if (window.EyeDropper) {
const eyeDropper = new EyeDropper()
eyeDropper.open().then((res) => {
console.log(res.sRGBHex);
navigator.clipboard.writeText(res.sRGBHex).then(() => {
copyClipboard(res.sRGBHex)
})}).catch(() => {
console.log('用户点击Esc取消了')
})
} else {
console.log('谷歌95正式版支持EyeDropper')
}
}
const copyClipboard = ( text ) => {
document.getElementById('dengDiv').style.background = text
const dom = document.getElementById('color_textarea')
dom.value = text
dom.select()
document.execCommand('copy')
}
5.缺少icon图片看目录结构，需要啥自己按目录添加，
1231239.png
6.实现效果
555555.png
7.添加插件
99999.png
