个人的第一个Chrome插件ColorConversion

一、为什么开发ColorConversion

工具的用途就是解决需求，个人开发习惯性使用PGB的颜色格式，而个人使用的取色软件为Snipaste，取色的格式是RGB的颜色，并且格式中逗号后有一个空格，所以开发了一个转换工具。

二、ColorConversion主要功能

1、PGB颜色格式转化成RGB颜色格式

2、RGB颜色格式转化成PGB颜色格式

三、ColorConversion插件源码

1、playground.html文件

<!DOCTYPE html>
<html><head><title>ColorConversion</title><meta charset="utf-8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="./background.css">
</head><body class="body"><table><tbody><tr><td><div class="title">RGB颜色值转换成十六进制颜色码</div><table><tbody><tr><td class="color1"><input class="color1_input" value="24, 0, 255" /><button class="color1_conversion">转换</button></td><td id="color1" class="show_color1" bgcolor="#1800FF"></td><td id="res1" class="res_color1">#1800FF</td></tr></tbody></table></td></tr><tr><td><div class="title">十六进制颜色码转换成RGB颜色值</div><table><tbody><tr><td class="color2"><input class="color2_input" value="#CC00FF" /><button class="color2_conversion">转换</button></td><td id="color2" class="show_color2" bgcolor="#CC00FF"></td><td id="res2" class="res_color2">204, 0, 255</td></tr></tbody></table></td></tr></tbody></table><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/background.js"></script>
</body></html>

2、background.css文件

.body {width: 550px;
}.title {font-size: 18px;
}.color1,
.color2,
.color1_conversion,
.color2_conversion {height: 34px;
}.color1_input,
.color2_input,
.color1_conversion,
.color2_conversion,
.res_color1,
.res_color2 {font-size: 24px;
}.color1,
.color2 {width: 300px;
}.color1_input,
.color2_input {width: 200px;float: left;
}.color1_conversion,
.color2_conversion {float: left;margin-left: 15px;
}.show_color1,
.show_color2 {width: 100px;
}.res_color1,
.res_color2 {padding-left: 15px;
}

3、manifest.json文件

{"manifest_version": 2,"name": "ColorConversion","version": "1.0.0","description": "颜色转换工具","author": "SmallTeddy","icons": {"48": "icon.png","128": "icon.png"},"background":{"page": "background.html"},"browser_action": {"default_icon": "icon.png","default_title": "ColorConversion","default_popup": "background.html"},"content_scripts":[{"matches": ["<all_urls>"],"js": ["js/background.js", "js/background.js"],"css": ["background.css"]}],"permissions": ["tabs","http://localhost/","http://*/*","https://*/*"]
}

4、js目录下background.js文件

$('.color1_conversion').click(function () {var hexcode = "#";var color = document.getElementsByClassName("color1_input")[0].value.split(', ');for (x = 0; x < 3; x++) {var n = Number(color[x]);if (n == "") n = "0"if (parseInt(n) != n) return alert("请输入数字！");if (n > 255) return alert("数字在0-255之间！");var c = "0123456789ABCDEF", b = "", a = n % 16;b = c.substr(a, 1);a = (n - a) / 16;hexcode += c.substr(a, 1) + b}document.getElementById("color1").bgColor = res1.innerHTML = hexcode
})$('.color2_conversion').click(function () {var a = document.getElementsByClassName("color2_input")[0].value;if (a.substr(0, 1) == "#") a = a.substring(1);var len = a.length;if (len != 6 && len != 3) return alert("十六进制颜色码为六位或三位！");else if (/[^0-9a-f]/i.test(a)) return;document.getElementById("color2").bgColor = "#" + a;a = a.toLowerCase();b = new Array();for (x = 0; x < 3; x++) {b[0] = len == 6 ? a.substr(x * 2, 2) : a.substr(x * 1, 1) + a.substr(x * 1, 1);b[3] = "0123456789abcdef";b[1] = b[0].substr(0, 1);b[2] = b[0].substr(1, 1);b[20 + x] = b[3].indexOf(b[1]) * 16 + b[3].indexOf(b[2])}res2.innerHTML = b[20] + ", " + b[21] + ", " + b[22];
})

5、其他

插件其他文件包括：
js目录下jquery.js（可自行cdn下载引入）
icon.png（可在iconfont上自行下载喜欢的）
readme.md（简单写写就好）

另外该项目github地址：https://github.com/SmallTeddy/ColorConversion

四、写在最后

工具的开发永远都是解决需求而不是创造需求，切勿内卷，个人开发的第一个插件，如果喜欢，欢迎各位给项目点个star！！！

个人的第一个Chrome插件ColorConversion相关推荐

制作一个chrome插件
制作一个chrome插件要做两方面的准备文件准备在文件夹中,必需的两个文件 manifest.json 用于配置文件 index.html 插件的界面效果 manifest.json的内容 { ...
怎么编写一个chrome插件
怎么编写一个chrome插件总觉得chrome插件这种东西很高端,很遥不可及.当然复杂的chrome插件开发起来确实比较困难,但是我们可以从一个简单的chrome插件demo慢慢入手,了解一下chr ...
设计和实现一个 Chrome 插件提升登录效率
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步.已进行4个月了,很多小伙伴表示收获颇丰. 前言在我们的 ...
如何从零开始开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
java 线程插件_我的第一个Chrome插件：天气预报应用
1.Chrome插件开发基础开发Chrome插件很简单,只要会基本的前台技术HTML.CSS.JS就可以开发了. Chrome插件一般包括两个HTML页面background和popup. back ...
快速制作一个chrome插件
说在前面在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更 ...
前端拓展：如何开发一个 Chrome 插件？
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
从零做一个Chrome插件实现起点中文网自动签到
这是我参与更文挑战的第1天,活动详情查看: 更文挑战最近一直在起点中文网上看小说,忽然发现官方竟然卖自动签到卡,五块钱一个月!身为一个程序猿,怎么能花这些冤枉钱! 于是开始了写一个脚本的念头. 第一 ...
我的第一个Chrome插件：天气预报应用
1.Chrome插件开发基础开发Chrome插件很简单,只要会基本的前台技术HTML.CSS.JS就可以开发了. Chrome插件一般包括两个HTML页面background和popup. back ...