bitdance-team/chrome-extension
1
0
Fork 0
mirror of https://gitee.com/bitdance-team/chrome-extension synced 2025-01-10 21:58:14 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

鼠标样式开关

Browse Source
This commit is contained in:
xiao_io 2022-02-05 13:43:37 +08:00
parent 38ba246ae0
commit bb72d2423d
6 changed files with 223 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/shell-chrome/assets/css/main.css
View File

@ -94,3 +94,66 @@ a {
#popup .article ul li #click-per .button .layer {
transition: 0.3s ease all;
}
#popup .article ul li #mouse-style .button {
position: relative;
float: right;
top: 6px;
right: 6px;
width: 66px;
height: 32px;
border-radius: 100px;
}
#popup .article ul li #mouse-style .button .checkbox {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
#popup .article ul li #mouse-style .button .knobs,
#popup .article ul li #mouse-style .button .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup .article ul li #mouse-style .button .knobs {
z-index: 2;
}
#popup .article ul li #mouse-style .button .layer {
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
#popup .article ul li #mouse-style .button .knobs::before {
content: "YES";
position: absolute;
top: 2px;
left: 34px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #03a9f4;
border-radius: 50%;
}
#popup .article ul li #mouse-style .button .checkbox:checked + .knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
#popup .article ul li #mouse-style .button .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
#popup .article ul li #mouse-style .button .knobs,
#popup .article ul li #mouse-style .button .knobs:before,
#popup .article ul li #mouse-style .button .layer {
transition: 0.3s ease all;
}

65
packages/shell-chrome/assets/css/main.less
View File

@ -99,6 +99,71 @@ a {
}
}
}
#mouse-style{
.button {
position: relative;
float: right;
top: 6px;
right: 6px;
width: 66px;
height: 32px;
border-radius: 100px;
.checkbox {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.knobs,
.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.knobs {
z-index: 2;
}
.layer{
border-radius: 100px;
width: 100%;
background-color: #ebf7fc;
z-index: 1;
}
.knobs::before {
content: "YES";
position: absolute;
top: 2px;
left: 34px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #03a9f4;
border-radius: 50%;
}
.checkbox:checked+.knobs:before {
content: "NO";
left: 3px;
background-color: #f44336;
}
.checkbox:checked~.layer {
background-color: #fcebeb;
}
.knobs,
.knobs:before,
.layer{
transition: 0.3s ease all;
}
}
}
}
}
}

5
packages/shell-chrome/assets/js/mouse-effects/click.js
View File

@ -7,14 +7,15 @@ $(function() {
// 每次改变开关状态时刷新页面使功能及时生效
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log('click');
location.reload();
sendResponse('Reload page');
})
// 控制功能是否开启
chrome.storage.sync.get('clickState', function(budget) {
chrome.storage.sync.get('clickState3', function(budget) {
// 得到按钮开关状态
if (budget.clickState == false || budget.clickState == undefined) {
if (budget.clickState3 == false || budget.clickState3 == undefined) {
// console.log('click功能启动');
var hearts = [];

30
packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
View File

@ -4,16 +4,24 @@
$(function() {
console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
walk();
// 每次改变开关状态时刷新页面使功能及时生效
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log('mouse');
location.reload();
sendResponse('Reload page');
})
// 走起
function walk() {
changeMouse();
}
function changeMouse() {
$('*').hover(function() {
$(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c%0A6QAABPxJREFUWEe9lltIalkYx9feak1hDBonIvVM0ZyKLmAM3YyIqB6KCgrK%0Abj710G1gKooJJrCYiB4q6qHefIgoKoaChpiieojQJIWiy0GygzaO0RVhSDTb%0Ae+1hOSlb3d56aL+Iur/1/db3/77/Whj4/6kGAOgAAPq37x/2gQEAyrRa7V9s%0ANhuTSqXk5eXlGUVRTR8FgwC+HB0dfc3JyWG7tq3RaAiZTAY/AgYBgNTU1Bed%0AThfBVHcE09DQQFxfX1+EUJkoAMAnAMDfoWroBMAwTAsh/ClYUACYIQzDfkeg%0ACQkJ5Pz8PG6xWB4oihIEW9MJwCRDsECVSoUqQ97c3BgrKioSNzc3I+kxZrMZ%0AikQinKIoVw7GJd1/BpLBH8zr6ysVHx9Pra2tUS0tLS9CoRBfW1vjJCQksFDM%0Azs4OUV1dPffy8vKLvzXcAKHKQF9ILpeTVVVVFL2B9/f3SQSTlJSEraysRAiF%0AQlagKtDL4zMNwWSoqakhNzY2nLtlehBMSUkJAtgDAKDRfvB+z0OfcGUYHx9/%0ALS4uxgoKCtwj7J0Ax3EAIQR7e3tEc3MzcX9/r6TDeAC8RwYulwufn59xpgos%0ALi46Li4u8LGxMQ9ABINM7+npSeTdoWHLMDIyQqhUKmp7e5tDhzg9PSXFYjEG%0AIWSEQw0cExMz5TMiiYmJNoPB8F0w/en/Ly0tvba2tnIKCgpIkUhEra6u4vn5%0A+VClUjFKgyojk8msFEXxfQDeIwMdBu2Mw+Ewzr5WqyXz8vIICOGPAIB/nCbI%0AsNMvSqXyq0Qi8dtYTNVBLri6usoYY7FYkCkRVqu1CtkDPZ6RVCAQ2A0GQ8To%0A6Cg8Pj4GEokEDg4OemjsDVFbW0vy+XxSoVC4zxRUjeTkZIfJZPoVADDDBM4I%0AgGGYjsfjfdna2oLIZA4PD4ny8nJ8YGAAyuXyoCOHEvX19dlnZ2f/dDgcDYH6%0AiQlgqLKycmh4eJhFdzi0SFlZmaO9vZ2qr6/38H2RSARvb28JkiQj5ubmHB0d%0AHc4qZGdn205OTlJceodUAQzDKGQcaWlpdp1O5zMNLmPp6uoiULPNzMyw0G96%0AvZ64uroCubm5OI/Hc49eMAjvCkRJpdJ/l5eX2fn5+Xa1Wu0DUFhYSCqVSqf9%0ASiQSQq1Ws6Ojo6FCoYBSqZRRnjeIH4JaMQDgc29v7+XU1FSk0WgkHx4ePA4a%0AlLSxsZFYWFhg0UetqamJnJiYwAQCAaPp0OTwgfDpAdTJT09PzoWYZMBxHPpz%0At2DmlZWVZTs/P/eAYDIis8lkike7KSoqsh0cHKBrlvNB9trW1gY0Go37BOzp%0A6bFNT0+73wkXwt8YIm8nMjIyMLPZ7JThzT7Z9N2jOedyuX+kp6dXHR8fvwvC%0A73UpMjJyxuFw/AwAcMoxODhIeJ9qSUlJdqPRiBILxWLxZTgQKSkpdr1eHxXw%0AvvZWzl2Kokq9S4vslc/n99EcLiyIycnJ1/7+/u9DAfi8u7v7rbS01GPEuFyu%0Aw2q1ehgSupKLxeLrYJVYX1931NXVyQEA46EAgLi4ONvd3Z3bE9CplpOTU+F9%0AsLxVKSAEPbm/05CpkT1kYLFYLxDCQHeGT5mZmddnZ2cejemdPBwAtwxoGlpb%0AW5MD+burEnQIpuThAIDY2Fj74+NjJI7jFnSTCTbvdIjOzk68u7t7GGnuHRdS%0AD7gWw3H8NwhhT4jJ6a8hKWxMcf8BWQiA/lSw+WUAAAAASUVORK5CYII=), crosshair");
});
}
// 控制功能是否开启
chrome.storage.sync.get('clickState2', function(budget) {
// 得到按钮开关状态
if (budget.clickState2 == false || budget.clickState2 == undefined) {
$('*').hover(function() {
$(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c%0A6QAABPxJREFUWEe9lltIalkYx9feak1hDBonIvVM0ZyKLmAM3YyIqB6KCgrK%0Abj710G1gKooJJrCYiB4q6qHefIgoKoaChpiieojQJIWiy0GygzaO0RVhSDTb%0Ae+1hOSlb3d56aL+Iur/1/db3/77/Whj4/6kGAOgAAPq37x/2gQEAyrRa7V9s%0ANhuTSqXk5eXlGUVRTR8FgwC+HB0dfc3JyWG7tq3RaAiZTAY/AgYBgNTU1Bed%0AThfBVHcE09DQQFxfX1+EUJkoAMAnAMDfoWroBMAwTAsh/ClYUACYIQzDfkeg%0ACQkJ5Pz8PG6xWB4oihIEW9MJwCRDsECVSoUqQ97c3BgrKioSNzc3I+kxZrMZ%0AikQinKIoVw7GJd1/BpLBH8zr6ysVHx9Pra2tUS0tLS9CoRBfW1vjJCQksFDM%0Azs4OUV1dPffy8vKLvzXcAKHKQF9ILpeTVVVVFL2B9/f3SQSTlJSEraysRAiF%0AQlagKtDL4zMNwWSoqakhNzY2nLtlehBMSUkJAtgDAKDRfvB+z0OfcGUYHx9/%0ALS4uxgoKCtwj7J0Ax3EAIQR7e3tEc3MzcX9/r6TDeAC8RwYulwufn59xpgos%0ALi46Li4u8LGxMQ9ABINM7+npSeTdoWHLMDIyQqhUKmp7e5tDhzg9PSXFYjEG%0AIWSEQw0cExMz5TMiiYmJNoPB8F0w/en/Ly0tvba2tnIKCgpIkUhEra6u4vn5%0A+VClUjFKgyojk8msFEXxfQDeIwMdBu2Mw+Ewzr5WqyXz8vIICOGPAIB/nCbI%0AsNMvSqXyq0Qi8dtYTNVBLri6usoYY7FYkCkRVqu1CtkDPZ6RVCAQ2A0GQ8To%0A6Cg8Pj4GEokEDg4OemjsDVFbW0vy+XxSoVC4zxRUjeTkZIfJZPoVADDDBM4I%0AgGGYjsfjfdna2oLIZA4PD4ny8nJ8YGAAyuXyoCOHEvX19dlnZ2f/dDgcDYH6%0AiQlgqLKycmh4eJhFdzi0SFlZmaO9vZ2qr6/38H2RSARvb28JkiQj5ubmHB0d%0AHc4qZGdn205OTlJceodUAQzDKGQcaWlpdp1O5zMNLmPp6uoiULPNzMyw0G96%0AvZ64uroCubm5OI/Hc49eMAjvCkRJpdJ/l5eX2fn5+Xa1Wu0DUFhYSCqVSqf9%0ASiQSQq1Ws6Ojo6FCoYBSqZRRnjeIH4JaMQDgc29v7+XU1FSk0WgkHx4ePA4a%0AlLSxsZFYWFhg0UetqamJnJiYwAQCAaPp0OTwgfDpAdTJT09PzoWYZMBxHPpz%0At2DmlZWVZTs/P/eAYDIis8lkike7KSoqsh0cHKBrlvNB9trW1gY0Go37BOzp%0A6bFNT0+73wkXwt8YIm8nMjIyMLPZ7JThzT7Z9N2jOedyuX+kp6dXHR8fvwvC%0A73UpMjJyxuFw/AwAcMoxODhIeJ9qSUlJdqPRiBILxWLxZTgQKSkpdr1eHxXw%0AvvZWzl2Kokq9S4vslc/n99EcLiyIycnJ1/7+/u9DAfi8u7v7rbS01GPEuFyu%0Aw2q1ehgSupKLxeLrYJVYX1931NXVyQEA46EAgLi4ONvd3Z3bE9CplpOTU+F9%0AsLxVKSAEPbm/05CpkT1kYLFYLxDCQHeGT5mZmddnZ2cejemdPBwAtwxoGlpb%0AW5MD+burEnQIpuThAIDY2Fj74+NjJI7jFnSTCTbvdIjOzk68u7t7GGnuHRdS%0AD7gWw3H8NwhhT4jJ6a8hKWxMcf8BWQiA/lSw+WUAAAAASUVORK5CYII=), crosshair");
});
} else {
('*').hover(function() {
$(this).css("cursor", "auto");
});
}
})
})

64
packages/shell-chrome/assets/js/popup.js
View File

@ -0,0 +1,64 @@
$(function() {
// 获取开关状态
chrome.storage.sync.get('clickState2', function(budget) {
// console.log(budget.clickState);
// 获取页面节点
let input = document.querySelector("#button-2");
// 改变开关状态（保持与上次设置时一致）
input.checked = budget.clickState2;
});
// 获取开关状态
chrome.storage.sync.get('clickState3', function(budget) {
// console.log(budget.clickState);
// 获取页面节点
let input = document.querySelector("#button-3");
// 改变开关状态（保持与上次设置时一致）
input.checked = budget.clickState3;
});
// 点击开关时改变按钮状态
$("#button-2").click(function() {
// 获取开关
let checked = $("#button-2");
// 持久化存储开关状态
chrome.storage.sync.set({ 'clickState2': checked[0].checked });
console.log('mouse success');
// 自动刷新页面
chrome.tabs.query({
active: true,
currentWindow: true
}, (tabs) => {
console.log(tabs);
let message = {
info: 'reload'
}
chrome.tabs.sendMessage(tabs[0].id, message, res => {
console.log(res);
})
})
});
// 点击开关时改变按钮状态
$("#button-3").click(function() {
// 获取开关
let checked = $("#button-3");
// 持久化存储开关状态
chrome.storage.sync.set({ 'clickState3': checked[0].checked });
console.log('click success');
// 自动刷新页面
chrome.tabs.query({
active: true,
currentWindow: true
}, (tabs) => {
console.log(tabs);
let message = {
info: 'reload'
}
chrome.tabs.sendMessage(tabs[0].id, message, res => {
console.log(res);
})
})
})
})

12
packages/shell-chrome/popup.html
View File

@ -20,6 +20,12 @@
</li>
<li>
<div id="mouse-style">
<span>鼠标样式</span>
<div class="button">
<input type="checkbox" id="button-2" class="checkbox" />
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
</li>
<li>
@ -35,8 +41,8 @@
</ul>
</div>
</div>
<!-- <script src="assets/js/lib/jquery.min.js"></script> -->
<!-- <script src="assets/js/popup.js"></script> -->
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/popup.js"></script>
</body>
</html>
</html>