bitdance-team/chrome-extension
1
0
Fork 0
mirror of https://gitee.com/bitdance-team/chrome-extension synced 2025-10-07 16:35:15 +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
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 { #popup .article ul li #click-per .button .layer {
transition: 0.3s ease all; 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) => { chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log('click');
location.reload(); location.reload();
sendResponse('Reload page'); 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功能启动'); // console.log('click功能启动');
var hearts = []; var hearts = [];

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

@@ -4,16 +4,24 @@
$(function() { $(function() {
console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功"); console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
walk(); // 每次改变开关状态时刷新页面使功能及时生效
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log('mouse');
location.reload();
sendResponse('Reload page');
})
// 走起 // 控制功能是否开启
function walk() { chrome.storage.sync.get('clickState2', function(budget) {
changeMouse(); // 得到按钮开关状态
} if (budget.clickState2 == false || budget.clickState2 == undefined) {
$('*').hover(function() {
function changeMouse() { $(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");
$('*').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);
})
})
})
})

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

@@ -20,6 +20,12 @@
</li> </li>
<li> <li>
<div id="mouse-style"> <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> </div>
</li> </li>
<li> <li>
@@ -35,8 +41,8 @@
</ul> </ul>
</div> </div>
</div> </div>
<!-- <script src="assets/js/lib/jquery.min.js"></script> --> <script src="assets/js/lib/jquery.min.js"></script>
<!-- <script src="assets/js/popup.js"></script> --> <script src="assets/js/popup.js"></script>
</body> </body>
</html> </html>