mirror of
https://gitee.com/bitdance-team/chrome-extension
synced 2025-01-10 21:58:14 +08:00
Merge branch 'zxs' into develop
This commit is contained in:
commit
2cf513d676
@ -9,8 +9,7 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
background: url(../image/weather/yun.webp);
|
background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
|
||||||
/* background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%); */
|
|
||||||
}
|
}
|
||||||
#popup {
|
#popup {
|
||||||
min-height: 450px;
|
min-height: 450px;
|
||||||
@ -18,39 +17,116 @@ body {
|
|||||||
}
|
}
|
||||||
#popup header {
|
#popup header {
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
|
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
|
||||||
}
|
}
|
||||||
#popup header img {
|
#popup header #logo {
|
||||||
height: inherit;
|
height: inherit;
|
||||||
}
|
}
|
||||||
|
#popup header #weather {
|
||||||
/* 天气的css */
|
float: right;
|
||||||
#weather{
|
height: 100%;
|
||||||
display: inline-block;
|
line-height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
#weatherSite{
|
#popup header #weather #weatherSite {
|
||||||
display: inline-block;
|
font-size: 13px;
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
#weatherText{
|
#popup header #weather #svg_w {
|
||||||
display: inline-block
|
height: 15px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
#weatherTemp{
|
#popup header #weather #weatherText {
|
||||||
display: inline-block
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
/* 天气的css end */
|
#popup header #weather #weatherTemp {
|
||||||
|
font-size: 13px;
|
||||||
#popup .article ul li {
|
}
|
||||||
margin: 5px 0;
|
#popup #back {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 54px;
|
||||||
|
left: 10px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background-color: transparent;
|
||||||
|
border-top: 2px solid #fff;
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#popup #article #buttons {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #btnScreenshot,
|
||||||
|
#popup #article #buttons #transform {
|
||||||
|
float: left;
|
||||||
|
top: 1px;
|
||||||
|
right: 5px;
|
||||||
|
width: 90px;
|
||||||
|
height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #71b0f3;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #btnScreenshot:hover {
|
||||||
|
background-color: #6FC6FF;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #btnScreenshot:active {
|
||||||
|
transform: translate(0px, 1px);
|
||||||
|
box-shadow: 0px 1px 0px 0px;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #transform {
|
||||||
|
margin-left: 10px;
|
||||||
|
background-color: #71b0f3;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #transform:hover {
|
||||||
|
background-color: #6FC6FF;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #transform:active {
|
||||||
|
transform: translate(0px, 1px);
|
||||||
|
box-shadow: 0px 1px 0px 0px;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #clock {
|
||||||
|
float: left;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-right: 30px;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
background-color: #F7BAEF;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
#popup #article #buttons #clock:active {
|
||||||
|
transform: translate(0px, 1px);
|
||||||
|
box-shadow: 0px 1px 0px 0px;
|
||||||
|
}
|
||||||
|
#popup #article .setting {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
#popup #article .setting ul li {
|
||||||
|
margin: 7px 5px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
|
border-radius: 25px;
|
||||||
|
background: #ffffffc9;
|
||||||
|
padding: 0 1px 0 12px;
|
||||||
}
|
}
|
||||||
#popup .article ul li span {
|
#popup #article .setting ul li span {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button {
|
#popup #article .setting ul li .setting-item .button {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
@ -59,7 +135,7 @@ body {
|
|||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .checkbox {
|
#popup #article .setting ul li .setting-item .button .checkbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -67,24 +143,24 @@ body {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .knobs,
|
#popup #article .setting ul li .setting-item .button .knobs,
|
||||||
#popup .article ul li #click-per .button .layer {
|
#popup #article .setting ul li .setting-item .button .layer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .knobs {
|
#popup #article .setting ul li .setting-item .button .knobs {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .layer {
|
#popup #article .setting ul li .setting-item .button .layer {
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #ebf7fc;
|
background-color: #ebf7fc;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .knobs::before {
|
#popup #article .setting ul li .setting-item .button .knobs::before {
|
||||||
content: "YES";
|
content: "YES";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
@ -100,79 +176,16 @@ body {
|
|||||||
background-color: #03a9f4;
|
background-color: #03a9f4;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
|
#popup #article .setting ul li .setting-item .button .checkbox:checked + .knobs:before {
|
||||||
content: "NO";
|
content: "NO";
|
||||||
left: 3px;
|
left: 3px;
|
||||||
background-color: #f44336;
|
background-color: #f44336;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
|
#popup #article .setting ul li .setting-item .button .checkbox:checked ~ .layer {
|
||||||
background-color: #fcebeb;
|
background-color: #fcebeb;
|
||||||
}
|
}
|
||||||
#popup .article ul li #click-per .button .knobs,
|
#popup #article .setting ul li .setting-item .button .knobs,
|
||||||
#popup .article ul li #click-per .button .knobs:before,
|
#popup #article .setting ul li .setting-item .button .knobs:before,
|
||||||
#popup .article ul li #click-per .button .layer {
|
#popup #article .setting ul li .setting-item .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;
|
transition: 0.3s ease all;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,150 +19,179 @@ body {
|
|||||||
width: 300px;
|
width: 300px;
|
||||||
header{
|
header{
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
|
background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
|
||||||
img {
|
#logo {
|
||||||
height: inherit;
|
height: inherit;
|
||||||
}
|
}
|
||||||
|
#weather{
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
#weatherSite{
|
||||||
|
font-size: 13px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
#svg_w{
|
||||||
|
height: 15px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
#weatherText{
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
#weatherTemp{
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.article{
|
#back {
|
||||||
ul{
|
display: none;
|
||||||
li{
|
position: absolute;
|
||||||
margin: 5px 0;
|
top: 54px;
|
||||||
height: 45px;
|
left: 10px;
|
||||||
background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
|
width: 15px;
|
||||||
span{
|
height: 15px;
|
||||||
font-size: 16px;
|
background-color: transparent;
|
||||||
line-height: 45px;
|
border-top: 2px solid #fff;
|
||||||
margin-left: 5px;
|
border-left: 2px solid #fff;
|
||||||
}
|
transform: rotate(-45deg);
|
||||||
#click-per{
|
cursor: pointer;
|
||||||
.button {
|
}
|
||||||
position: relative;
|
#article{
|
||||||
float: right;
|
#buttons{
|
||||||
top: 6px;
|
position: relative;
|
||||||
right: 6px;
|
margin-top: 12px;
|
||||||
width: 66px;
|
#btnScreenshot,
|
||||||
height: 32px;
|
#transform{
|
||||||
border-radius: 100px;
|
float: left;
|
||||||
.checkbox {
|
top: 1px;
|
||||||
position: relative;
|
right: 5px;
|
||||||
width: 100%;
|
width: 90px;
|
||||||
height: 100%;
|
height: 40px;
|
||||||
opacity: 0;
|
color: #fff;
|
||||||
cursor: pointer;
|
font-weight: 500;
|
||||||
z-index: 3;
|
cursor: pointer;
|
||||||
}
|
background-color: #71b0f3;
|
||||||
.knobs,
|
border: none;
|
||||||
.layer {
|
border-radius: 4px;
|
||||||
position: absolute;
|
}
|
||||||
top: 0;
|
#btnScreenshot:hover{
|
||||||
right: 0;
|
background-color: #6FC6FF;
|
||||||
bottom: 0;
|
}
|
||||||
left: 0;
|
#btnScreenshot:active{
|
||||||
}
|
transform: translate(0px, 1px);
|
||||||
.knobs {
|
box-shadow: 0px 1px 0px 0px;
|
||||||
z-index: 2;
|
}
|
||||||
}
|
#transform{
|
||||||
.layer{
|
margin-left: 10px;
|
||||||
border-radius: 100px;
|
background-color: #71b0f3;
|
||||||
width: 100%;
|
}
|
||||||
background-color: #ebf7fc;
|
#transform:hover{
|
||||||
z-index: 1;
|
background-color: #6FC6FF;
|
||||||
}
|
}
|
||||||
.knobs::before {
|
#transform:active{
|
||||||
content: "YES";
|
transform: translate(0px, 1px);
|
||||||
position: absolute;
|
box-shadow: 0px 1px 0px 0px;
|
||||||
top: 2px;
|
}
|
||||||
left: 34px;
|
#clock{
|
||||||
width: 20px;
|
float: left;
|
||||||
height: 10px;
|
margin-left: 30px;
|
||||||
color: #fff;
|
margin-right: 30px;
|
||||||
font-size: 10px;
|
width: 42px;
|
||||||
font-weight: bold;
|
height: 42px;
|
||||||
text-align: center;
|
background-color: #F7BAEF;
|
||||||
line-height: 1;
|
border-radius: 50%;
|
||||||
padding: 9px 4px;
|
text-align: center;
|
||||||
background-color: #03a9f4;
|
line-height: 40px;
|
||||||
border-radius: 50%;
|
cursor: pointer;
|
||||||
}
|
font-size: 12px;
|
||||||
.checkbox:checked+.knobs:before {
|
}
|
||||||
content: "NO";
|
#clock:active{
|
||||||
left: 3px;
|
transform: translate(0px, 1px);
|
||||||
background-color: #f44336;
|
box-shadow: 0px 1px 0px 0px;
|
||||||
}
|
}
|
||||||
.checkbox:checked~.layer {
|
}
|
||||||
background-color: #fcebeb;
|
.setting{
|
||||||
}
|
float: left;
|
||||||
.knobs,
|
width: 100%;
|
||||||
.knobs:before,
|
margin-top: 12px;
|
||||||
.layer{
|
// opacity: 0.5;
|
||||||
transition: 0.3s ease all;
|
ul{
|
||||||
}
|
li{
|
||||||
|
margin: 7px 5px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 25px;
|
||||||
|
background: #ffffffc9;
|
||||||
|
padding: 0 1px 0 12px;
|
||||||
|
span{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 45px;
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
.setting-item {
|
||||||
#mouse-style{
|
.button {
|
||||||
.button {
|
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
top: 6px;
|
|
||||||
right: 6px;
|
|
||||||
width: 66px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 100px;
|
|
||||||
.checkbox {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
float: right;
|
||||||
height: 100%;
|
top: 6px;
|
||||||
opacity: 0;
|
right: 6px;
|
||||||
cursor: pointer;
|
width: 66px;
|
||||||
z-index: 3;
|
height: 32px;
|
||||||
}
|
|
||||||
.knobs,
|
|
||||||
.layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.knobs {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.layer{
|
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
width: 100%;
|
.checkbox {
|
||||||
background-color: #ebf7fc;
|
position: relative;
|
||||||
z-index: 1;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
.knobs::before {
|
opacity: 0;
|
||||||
content: "YES";
|
cursor: pointer;
|
||||||
position: absolute;
|
z-index: 3;
|
||||||
top: 2px;
|
}
|
||||||
left: 34px;
|
.knobs,
|
||||||
width: 20px;
|
.layer {
|
||||||
height: 10px;
|
position: absolute;
|
||||||
color: #fff;
|
top: 0;
|
||||||
font-size: 10px;
|
right: 0;
|
||||||
font-weight: bold;
|
bottom: 0;
|
||||||
text-align: center;
|
left: 0;
|
||||||
line-height: 1;
|
}
|
||||||
padding: 9px 4px;
|
.knobs {
|
||||||
background-color: #03a9f4;
|
z-index: 2;
|
||||||
border-radius: 50%;
|
}
|
||||||
}
|
.layer{
|
||||||
.checkbox:checked+.knobs:before {
|
border-radius: 100px;
|
||||||
content: "NO";
|
width: 100%;
|
||||||
left: 3px;
|
background-color: #ebf7fc;
|
||||||
background-color: #f44336;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.checkbox:checked~.layer {
|
.knobs::before {
|
||||||
background-color: #fcebeb;
|
content: "YES";
|
||||||
}
|
position: absolute;
|
||||||
.knobs,
|
top: 2px;
|
||||||
.knobs:before,
|
left: 34px;
|
||||||
.layer{
|
width: 20px;
|
||||||
transition: 0.3s ease all;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/* background-color: rgb(51, 11, 116); */
|
/* background-color: rgb(51, 11, 116); */
|
||||||
background: url(../../images/pomo_green.jpeg) no-repeat;
|
background: url(../../images/pomo_green.jpeg) no-repeat;
|
||||||
background-image: "../../";
|
background-size: cover;
|
||||||
|
/* background-image: "../../"; */
|
||||||
/* color: white; */
|
/* color: white; */
|
||||||
font-family: 'Source Sans Pro','Fira Sans', sans-serif;
|
font-family: 'Source Sans Pro', 'Fira Sans', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* width: 280px; */
|
/* width: 280px; */
|
||||||
@ -19,6 +19,63 @@ body {
|
|||||||
padding: 10px 0 20px;
|
padding: 10px 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#left {
|
||||||
|
position: absolute;
|
||||||
|
width: 25px;
|
||||||
|
height: 45px;
|
||||||
|
top: 180px;
|
||||||
|
left: 0;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left:hover {
|
||||||
|
background-color: #b4b2b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 12px;
|
||||||
|
left: 5px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-top: 2px solid #bbb9b7;
|
||||||
|
border-left: 2px solid #bbb9b7;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#right {
|
||||||
|
position: absolute;
|
||||||
|
width: 25px;
|
||||||
|
height: 45px;
|
||||||
|
top: 180px;
|
||||||
|
right: 0;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
opacity: 0.8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right:hover {
|
||||||
|
background-color: #b4b2b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right::after {
|
||||||
|
z-index: 9999;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 12px;
|
||||||
|
right: 5px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-top: 2px solid #585551;
|
||||||
|
border-right: 2px solid #585551;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -26,7 +83,7 @@ body {
|
|||||||
color: rgb(169, 172, 172);
|
color: rgb(169, 172, 172);
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons .slider{
|
.buttons .slider {
|
||||||
color: rgb(247, 226, 230);
|
color: rgb(247, 226, 230);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -37,7 +94,9 @@ body {
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*计数部分*/
|
/*计数部分*/
|
||||||
|
|
||||||
#countdown {
|
#countdown {
|
||||||
clear: both;
|
clear: both;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@ -48,12 +107,13 @@ body {
|
|||||||
color: aliceblue;
|
color: aliceblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
#countdown span{
|
#countdown span {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#start-btn,
|
||||||
#start-btn,#end-btn,#reset-btn {
|
#end-btn,
|
||||||
|
#reset-btn {
|
||||||
/* 文字颜色 */
|
/* 文字颜色 */
|
||||||
color: #f5e4b9;
|
color: #f5e4b9;
|
||||||
/* 清除背景色 */
|
/* 清除背景色 */
|
||||||
@ -71,24 +131,26 @@ body {
|
|||||||
/* width: 40px; */
|
/* width: 40px; */
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 4px 2px;
|
margin: 4px 2px;
|
||||||
-webkit-transition-duration: 0.4s; /* Safari */
|
-webkit-transition-duration: 0.4s;
|
||||||
|
/* Safari */
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
text-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
|
||||||
text-shadow: 1px 1px 1px rgba(255,255,255, .1);
|
border-radius: 25px;
|
||||||
border-radius: 25px;
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#start-btn {
|
#start-btn {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
color: black;
|
color: black;
|
||||||
border: 1px solid #f5e4b9;
|
border: 1px solid #f5e4b9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 悬停样式 */
|
/* 悬停样式 */
|
||||||
|
|
||||||
#start-btn:hover {
|
#start-btn:hover {
|
||||||
background-color: #f5e4b9;
|
background-color: #f5e4b9;
|
||||||
color: white;
|
color: white;
|
||||||
@ -100,12 +162,16 @@ body {
|
|||||||
border: 1px solid #ECB390;
|
border: 1px solid #ECB390;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 悬停样式 */
|
/* 悬停样式 */
|
||||||
|
|
||||||
#end-btn:hover {
|
#end-btn:hover {
|
||||||
background-color: #ECB390;
|
background-color: #ECB390;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* #end-btn{
|
/* #end-btn{
|
||||||
width: 40px;
|
width: 40px;
|
||||||
margin: 10px auto 0;
|
margin: 10px auto 0;
|
||||||
@ -115,6 +181,7 @@ body {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
|
|
||||||
/* #reset-btn {
|
/* #reset-btn {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
margin: 10px auto 0;
|
margin: 10px auto 0;
|
||||||
@ -129,7 +196,10 @@ body {
|
|||||||
color: black;
|
color: black;
|
||||||
border: 1px solid #DD4A48;
|
border: 1px solid #DD4A48;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 悬停样式 */
|
/* 悬停样式 */
|
||||||
|
|
||||||
#reset-btn:hover {
|
#reset-btn:hover {
|
||||||
background-color: #DD4A48;
|
background-color: #DD4A48;
|
||||||
color: white;
|
color: white;
|
||||||
@ -141,13 +211,13 @@ body {
|
|||||||
display: none;
|
display: none;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
|
|
||||||
/*选中的按钮*/
|
/*选中的按钮*/
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
background-color: rgb(244, 242, 248);
|
background-color: rgb(244, 242, 248);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
@ -164,12 +234,11 @@ li {
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer .settings{
|
footer .settings {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
|
|||||||
@ -17,121 +17,117 @@ let pomodoro = "pomodoro";
|
|||||||
|
|
||||||
//番茄钟按钮-绑定事件
|
//番茄钟按钮-绑定事件
|
||||||
document.addEventListener("click", (e) => {
|
document.addEventListener("click", (e) => {
|
||||||
if (!e.target.matches(".button")) return;
|
if (!e.target.matches(".button")) return;
|
||||||
|
|
||||||
// reset when pomodoro button selected
|
// reset when pomodoro button selected
|
||||||
pause = true;
|
pause = true;
|
||||||
seconds = 60;
|
seconds = 60;
|
||||||
startBtn.innerHTML = "开始";
|
startBtn.innerHTML = "开始";
|
||||||
|
|
||||||
chrome.storage.sync.set({ pause: pause, seconds: seconds }, function () {
|
chrome.storage.sync.set({ pause: pause, seconds: seconds }, function() {
|
||||||
if (!chrome.runtime.error) {
|
|
||||||
alert("初始化pause、seconds");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 定时器初始化
|
|
||||||
if (e.target.matches("#pomodoro-btn")) {
|
|
||||||
countdownTimer.innerHTML = "25:00";
|
|
||||||
pomodoro = "pomodoro";
|
|
||||||
minutes = 25;
|
|
||||||
chrome.storage.sync.set(
|
|
||||||
{ minutes: minutes, countdownTimer: "25:00" },
|
|
||||||
function () {
|
|
||||||
if (!chrome.runtime.error) {
|
if (!chrome.runtime.error) {
|
||||||
alert("added target pomodoro!");
|
alert("初始化pause、seconds");
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
);
|
|
||||||
}
|
// 定时器初始化
|
||||||
|
if (e.target.matches("#pomodoro-btn")) {
|
||||||
|
countdownTimer.innerHTML = "25:00";
|
||||||
|
pomodoro = "pomodoro";
|
||||||
|
minutes = 25;
|
||||||
|
chrome.storage.sync.set({ minutes: minutes, countdownTimer: "25:00" },
|
||||||
|
function() {
|
||||||
|
if (!chrome.runtime.error) {
|
||||||
|
alert("added target pomodoro!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 开始按钮-绑定事件
|
// 开始按钮-绑定事件
|
||||||
startBtn.addEventListener("click", () => {
|
startBtn.addEventListener("click", () => {
|
||||||
// countdown(); 在后台运行，需要取出状态
|
// countdown(); 在后台运行，需要取出状态
|
||||||
debounce(start(), 100);
|
debounce(start(), 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
function start() {
|
function start() {
|
||||||
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
||||||
const { minutes, seconds, status } = pomoData;
|
const { minutes, seconds, status } = pomoData;
|
||||||
|
|
||||||
chrome.runtime.sendMessage(
|
chrome.runtime.sendMessage({
|
||||||
{
|
status: "start",
|
||||||
status: "start",
|
senderId: "pomo",
|
||||||
senderId: "pomo",
|
content: {
|
||||||
content: {
|
minutes,
|
||||||
minutes,
|
seconds,
|
||||||
seconds,
|
},
|
||||||
},
|
},
|
||||||
},
|
(response) => {
|
||||||
(response) => {
|
console.log(response);
|
||||||
console.log(response);
|
|
||||||
|
|
||||||
startBtn.style.display = "none";
|
startBtn.style.display = "none";
|
||||||
endBtn.style.display = "block";
|
endBtn.style.display = "block";
|
||||||
getTimer();
|
getTimer();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
endBtn.addEventListener("click", () => {
|
endBtn.addEventListener("click", () => {
|
||||||
setTimeout(end, 200);
|
setTimeout(end, 200);
|
||||||
});
|
});
|
||||||
|
|
||||||
function end() {
|
function end() {
|
||||||
chrome.runtime.sendMessage(
|
chrome.runtime.sendMessage({
|
||||||
{
|
status: "paused",
|
||||||
status: "paused",
|
|
||||||
senderId: "pomo",
|
|
||||||
},
|
|
||||||
(response) => {
|
|
||||||
console.log(response);
|
|
||||||
|
|
||||||
startBtn.style.display = "block";
|
|
||||||
endBtn.style.display = "none";
|
|
||||||
clearTimer();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTimer() {
|
|
||||||
clearTimer();
|
|
||||||
timer = setInterval(() => {
|
|
||||||
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
|
||||||
// console.log("pomodata****",pomoData)
|
|
||||||
// const{minutes,seconds,countdownTimer} = pomoData;
|
|
||||||
countdownTimer.innerHTML = pomoData.countdownTimer;
|
|
||||||
|
|
||||||
//更新后倒计时判断，如果结束则重新初始化界面
|
|
||||||
if(pomoData.countdownTimer == "00:00"){
|
|
||||||
|
|
||||||
audio.play();
|
|
||||||
//不能放在页面上，要在后台进行
|
|
||||||
chrome.runtime.sendMessage(
|
|
||||||
{
|
|
||||||
status: "playend",
|
|
||||||
senderId: "pomo",
|
senderId: "pomo",
|
||||||
},
|
},
|
||||||
(response) => {
|
(response) => {
|
||||||
console.log(response,"**************下面");
|
console.log(response);
|
||||||
countdownTimer.innerHTML = "25:00";
|
|
||||||
|
|
||||||
startBtn.style.display = "block";
|
startBtn.style.display = "block";
|
||||||
endBtn.style.display = "none";
|
endBtn.style.display = "none";
|
||||||
clearTimer();
|
clearTimer();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
function getTimer() {
|
||||||
});
|
clearTimer();
|
||||||
}, 200);
|
timer = setInterval(() => {
|
||||||
|
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
||||||
|
// console.log("pomodata****",pomoData)
|
||||||
|
// const{minutes,seconds,countdownTimer} = pomoData;
|
||||||
|
countdownTimer.innerHTML = pomoData.countdownTimer;
|
||||||
|
|
||||||
|
//更新后倒计时判断，如果结束则重新初始化界面
|
||||||
|
if (pomoData.countdownTimer == "00:00") {
|
||||||
|
|
||||||
|
audio.play();
|
||||||
|
//不能放在页面上，要在后台进行
|
||||||
|
chrome.runtime.sendMessage({
|
||||||
|
status: "playend",
|
||||||
|
senderId: "pomo",
|
||||||
|
},
|
||||||
|
(response) => {
|
||||||
|
console.log(response, "**************下面");
|
||||||
|
countdownTimer.innerHTML = "25:00";
|
||||||
|
|
||||||
|
startBtn.style.display = "block";
|
||||||
|
endBtn.style.display = "none";
|
||||||
|
clearTimer();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 200);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearTimer() {
|
function clearTimer() {
|
||||||
clearInterval(timer);
|
clearInterval(timer);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -139,59 +135,104 @@ function clearTimer() {
|
|||||||
* delay [number] 毫秒，防抖期限值
|
* delay [number] 毫秒，防抖期限值
|
||||||
*/
|
*/
|
||||||
function debounce(fn, delay) {
|
function debounce(fn, delay) {
|
||||||
let timer = null; //借助闭包
|
let timer = null; //借助闭包
|
||||||
return function () {
|
return function() {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
|
clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
|
||||||
timer = setTimeout(fn, delay);
|
timer = setTimeout(fn, delay);
|
||||||
} else {
|
} else {
|
||||||
timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
|
timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置按钮-绑定事件
|
// 重置按钮-绑定事件
|
||||||
resetBtn.addEventListener("click", () => {
|
resetBtn.addEventListener("click", () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
chrome.runtime.sendMessage(
|
chrome.runtime.sendMessage({
|
||||||
{
|
status: "reset",
|
||||||
status: "reset",
|
senderId: "pomo",
|
||||||
senderId: "pomo",
|
},
|
||||||
},
|
(response) => {
|
||||||
(response) => {
|
// console.log(response);
|
||||||
// console.log(response);
|
countdownTimer.innerHTML = "25:00";
|
||||||
countdownTimer.innerHTML = "25:00";
|
|
||||||
|
|
||||||
startBtn.style.display = "block";
|
startBtn.style.display = "block";
|
||||||
endBtn.style.display = "none";
|
endBtn.style.display = "none";
|
||||||
clearTimer();
|
clearTimer();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
//页面反复打开时页面初始化
|
//页面反复打开时页面初始化
|
||||||
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
||||||
console.log(pomoData);
|
console.log(pomoData);
|
||||||
const { status } = pomoData;
|
const { status } = pomoData;
|
||||||
|
|
||||||
if (status === "start") {
|
if (status === "start") {
|
||||||
startBtn.style.display = "none";
|
startBtn.style.display = "none";
|
||||||
endBtn.style.display = "block";
|
endBtn.style.display = "block";
|
||||||
getTimer();
|
getTimer();
|
||||||
} else if (status === "paused") {
|
} else if (status === "paused") {
|
||||||
startBtn.style.display = "block";
|
startBtn.style.display = "block";
|
||||||
endBtn.style.display = "none";
|
endBtn.style.display = "none";
|
||||||
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
||||||
countdownTimer.innerHTML = pomoData.countdownTimer;
|
countdownTimer.innerHTML = pomoData.countdownTimer;
|
||||||
});
|
});
|
||||||
} else if (status === "init") {
|
} else if (status === "init") {
|
||||||
chrome.runtime.sendMessage({
|
chrome.runtime.sendMessage({
|
||||||
status: "init",
|
status: "init",
|
||||||
senderId: "pomo",
|
senderId: "pomo",
|
||||||
});
|
});
|
||||||
countdownTimer.innerHTML = "25:00";
|
countdownTimer.innerHTML = "25:00";
|
||||||
}else if(status === 'playend'){
|
} else if (status === 'playend') {
|
||||||
countdownTimer.innerHTML = "25:00";
|
countdownTimer.innerHTML = "25:00";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 轮播图
|
||||||
|
let photos = ["../../image/background/pomo_green.jpeg",
|
||||||
|
"../../image/background/pomo1.png",
|
||||||
|
"../../image/background/pomo_waterfall.jpg",
|
||||||
|
"../../image/background/pomo_ocean.jpg",
|
||||||
|
"../../image/background/pomo_light.jpeg",
|
||||||
|
"../../image/background/pomo_leaf.jpeg",
|
||||||
|
"../../image/background/pomo_foresr.jpeg",
|
||||||
|
"../../image/background/pomo_fire.jpeg",
|
||||||
|
"../../image/background/pomo_crystal.jpg"
|
||||||
|
]
|
||||||
|
|
||||||
|
let len = photos.length;
|
||||||
|
// console.log(len);
|
||||||
|
let index = 0;
|
||||||
|
document.getElementById('right').addEventListener("click", function() {
|
||||||
|
change_r();
|
||||||
|
});
|
||||||
|
document.getElementById('left').addEventListener("click", function() {
|
||||||
|
change_l();
|
||||||
|
});
|
||||||
|
|
||||||
|
function change_l() {
|
||||||
|
index--;
|
||||||
|
if (index < 0) {
|
||||||
|
index = len - 1;
|
||||||
|
}
|
||||||
|
change(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
function change_r() {
|
||||||
|
index++;
|
||||||
|
if (index == len) {
|
||||||
|
index = 0;
|
||||||
|
}
|
||||||
|
change(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
function change(n) {
|
||||||
|
document.body.style = "background: url(" + photos[n] + ") no-repeat; background-size: cover;";
|
||||||
|
}
|
||||||
|
|
||||||
|
let t = setInterval(function() {
|
||||||
|
change_r();
|
||||||
|
}, 40000);
|
||||||
@ -1,15 +1,15 @@
|
|||||||
// 用户首次安装插件时执行一次，后面不会再重新执行(除非用户重新安装插件)
|
// 用户首次安装插件时执行一次，后面不会再重新执行(除非用户重新安装插件)
|
||||||
chrome.runtime.onInstalled.addListener(() => {
|
chrome.runtime.onInstalled.addListener(() => {
|
||||||
// 插件功能安装默认启用
|
// 插件功能安装默认启用
|
||||||
chrome.storage.sync.set({
|
chrome.storage.sync.set({
|
||||||
//初始化数据
|
//初始化数据
|
||||||
pomoData: {
|
pomoData: {
|
||||||
minutes: 24,
|
minutes: 24,
|
||||||
seconds: 60,
|
seconds: 60,
|
||||||
countdownTimer: "25:00",
|
countdownTimer: "25:00",
|
||||||
status: "init",
|
status: "init",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
let minutes, seconds;
|
let minutes, seconds;
|
||||||
@ -22,9 +22,67 @@ let array = ["minutes", "seconds", "pause", "countdownTimer", "pbutton"];
|
|||||||
let timer = null;
|
let timer = null;
|
||||||
|
|
||||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||||
console.log(`进入 assets\html\pomodoro\background.js 中的onMessage Listener`)
|
console.log(`进入 assets\html\pomodoro\background.js 中的onMessage Listener`)
|
||||||
if (message.senderId !== "pomo") {
|
if (message.senderId !== "pomo") {
|
||||||
// 抛给下一个Listener
|
// 抛给下一个Listener
|
||||||
|
sendResponse();
|
||||||
|
}
|
||||||
|
|
||||||
|
const { status, content } = message;
|
||||||
|
|
||||||
|
if (status === "start") {
|
||||||
|
// sendResponse({
|
||||||
|
// status:message.status
|
||||||
|
// })
|
||||||
|
countdown({...content, status });
|
||||||
|
} else if (status === "paused") {
|
||||||
|
clearTimeout(timer);
|
||||||
|
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
||||||
|
console.log(pomoData);
|
||||||
|
chrome.storage.sync.set({ pomoData: {...pomoData, status: "paused" } });
|
||||||
|
});
|
||||||
|
} else if (status === "reset") {
|
||||||
|
clearTimeout(timer);
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
pomoData: {
|
||||||
|
minutes: 24,
|
||||||
|
seconds: 60,
|
||||||
|
countdownTimer: "25:00",
|
||||||
|
status: "init",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
chrome.browserAction.setBadgeText({ text: "" });
|
||||||
|
} else if (status === "init") {
|
||||||
|
//init初始化
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
pomoData: {
|
||||||
|
minutes: 24,
|
||||||
|
seconds: 60,
|
||||||
|
countdownTimer: "25:00",
|
||||||
|
status: "init",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
//playend 初始化
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
pomoData: {
|
||||||
|
minutes: 24,
|
||||||
|
seconds: 60,
|
||||||
|
countdownTimer: "25:00",
|
||||||
|
status: "playend",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//创建结束通知：待完成
|
||||||
|
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
status,
|
||||||
|
});
|
||||||
|
//后台播放完成提示音乐
|
||||||
|
if (message.action === "play") {
|
||||||
|
// audio.play();
|
||||||
|
}
|
||||||
sendResponse();
|
sendResponse();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,17 +144,17 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
|||||||
|
|
||||||
// 番茄钟倒计时功能
|
// 番茄钟倒计时功能
|
||||||
function countdown({ minutes, seconds, status }) {
|
function countdown({ minutes, seconds, status }) {
|
||||||
// 设置分钟和秒数
|
// 设置分钟和秒数
|
||||||
// let currentMins = minutes - 1;
|
// let currentMins = minutes - 1;
|
||||||
seconds--;
|
seconds--;
|
||||||
let currentTimer =
|
let currentTimer =
|
||||||
(minutes < 10 ? "0" : "") +
|
(minutes < 10 ? "0" : "") +
|
||||||
minutes +
|
minutes +
|
||||||
":" +
|
":" +
|
||||||
(seconds < 10 ? "0" : "") +
|
(seconds < 10 ? "0" : "") +
|
||||||
seconds;
|
seconds;
|
||||||
// countdownTimer.innerHTML = currentTimer; 拿到
|
// countdownTimer.innerHTML = currentTimer; 拿到
|
||||||
console.log("分秒=============", minutes, seconds);
|
console.log("分秒=============", minutes, seconds);
|
||||||
|
|
||||||
//番茄钟结束桌面提醒
|
//番茄钟结束桌面提醒
|
||||||
if(currentTimer === "00:00"){
|
if(currentTimer === "00:00"){
|
||||||
@ -149,15 +207,44 @@ function countdown({ minutes, seconds, status }) {
|
|||||||
countdownTimer: currentTimer,
|
countdownTimer: currentTimer,
|
||||||
status,
|
status,
|
||||||
},
|
},
|
||||||
},
|
function() {
|
||||||
function () {
|
if (!chrome.runtime.error) {
|
||||||
if (!chrome.runtime.error) {
|
console.log("started");
|
||||||
console.log("started");
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
);
|
);
|
||||||
countdown({ minutes, seconds, status });
|
|
||||||
}
|
//设置badge文本用来显示剩余分钟数
|
||||||
|
chrome.storage.sync.get("pomoData", ({ pomoData }) => {
|
||||||
|
chrome.browserAction.setBadgeText({ text: pomoData.minutes.toString() + ":" + pomoData.seconds.toString() });
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(currentTimer);
|
||||||
|
// count down every second, when a minute is up, countdown one minute
|
||||||
|
// when time reaches 0:00, reset
|
||||||
|
if (seconds > 0) {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
countdown({ minutes, seconds, status });
|
||||||
|
}, 1000);
|
||||||
|
} else if (minutes > 0) {
|
||||||
|
seconds = 60;
|
||||||
|
minutes--;
|
||||||
|
chrome.storage.sync.set({
|
||||||
|
pomoData: {
|
||||||
|
seconds: seconds,
|
||||||
|
minutes: minutes,
|
||||||
|
countdownTimer: currentTimer,
|
||||||
|
status,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
function() {
|
||||||
|
if (!chrome.runtime.error) {
|
||||||
|
console.log("started");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
countdown({ minutes, seconds, status });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置badge文本背景颜色
|
//设置badge文本背景颜色
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
@ -10,6 +11,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<audio id="audio">
|
<audio id="audio">
|
||||||
<source src="./src/alarm.mp3" type="audio/mp3">
|
<source src="./src/alarm.mp3" type="audio/mp3">
|
||||||
@ -18,24 +20,24 @@
|
|||||||
<!-- 计时部分 -->
|
<!-- 计时部分 -->
|
||||||
<div id="timer">
|
<div id="timer">
|
||||||
|
|
||||||
<!-- 切换背景图片 -->
|
<!-- 切换背景图片 -->
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
<span class="left"><</span>
|
<div id="left"></div>
|
||||||
<span class="right">></span>
|
<div id="right"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- <div class="button" id="pomodoro-btn"></div> -->
|
<!-- <div class="button" id="pomodoro-btn"></div> -->
|
||||||
|
|
||||||
<div id="countdown">
|
<div id="countdown">
|
||||||
<span>00:00</span>
|
<span>00:00</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<!-- 计时开始、重置 -->
|
<!-- 计时开始、重置 -->
|
||||||
<button id="start-btn">开始</button>
|
<button id="start-btn">开始</button>
|
||||||
<button id="end-btn">暂停</button>
|
<button id="end-btn">暂停</button>
|
||||||
<button id="reset-btn">重置</button>
|
<button id="reset-btn">重置</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 后续——添加任务清单
|
<!-- 后续——添加任务清单
|
||||||
@ -61,11 +63,12 @@
|
|||||||
|
|
||||||
<!-- 页脚--设置 -->
|
<!-- 页脚--设置 -->
|
||||||
<footer>
|
<footer>
|
||||||
<div class="settings">
|
<div class="settings">
|
||||||
<!-- <a href="./assets/html/options.html">settings</a> -->
|
<!-- <a href="./assets/html/options.html">settings</a> -->
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="./assets/js/popup.js"></script>
|
<script src="./assets/js/popup.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
Before Width: | Height: | Size: 239 KiB After Width: | Height: | Size: 239 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 211 KiB |
BIN
packages/shell-chrome/assets/image/background/pomo_green.jpeg
Normal file
BIN
packages/shell-chrome/assets/image/background/pomo_green.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
BIN
packages/shell-chrome/assets/image/mouse-effects/point.png
Normal file
BIN
packages/shell-chrome/assets/image/mouse-effects/point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 964 B |
@ -7,14 +7,14 @@ $(function() {
|
|||||||
|
|
||||||
// 每次改变开关状态时刷新页面使功能及时生效
|
// 每次改变开关状态时刷新页面使功能及时生效
|
||||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||||
console.log(`进入 assets\js\mouse-effects\click.js 中的onMessage Listener`)
|
// console.log(`进入 assets\js\mouse-effects\click.js 中的onMessage Listener`)
|
||||||
|
|
||||||
if (request.info === 'click') {
|
if (request.info === 'click') {
|
||||||
location.reload();
|
location.reload();
|
||||||
sendResponse('Reload page');
|
sendResponse('Reload page because of click');
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`离开 assets\js\mouse-effects\click.js 中的onMessage Listener`)
|
// console.log(`离开 assets\js\mouse-effects\click.js 中的onMessage Listener`)
|
||||||
return true;
|
return true;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -6,14 +6,14 @@ $(function() {
|
|||||||
console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
|
console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
|
||||||
// 每次改变开关状态时刷新页面使功能及时生效
|
// 每次改变开关状态时刷新页面使功能及时生效
|
||||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||||
console.log(`进入 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
|
// console.log(`进入 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
|
||||||
|
|
||||||
if (request.info === 'mouse') {
|
if (request.info === 'mouse') {
|
||||||
location.reload();
|
location.reload();
|
||||||
sendResponse('Reload page');
|
sendResponse('Reload page because of mouse-style');
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`离开 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
|
// console.log(`离开 assets\js\mouse-effects\mouse-style.js 中的onMessage Listener`)
|
||||||
return true;
|
return true;
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -22,7 +22,10 @@ $(function() {
|
|||||||
// 得到按钮开关状态
|
// 得到按钮开关状态
|
||||||
if (budget.clickState2 == false || budget.clickState2 == undefined) {
|
if (budget.clickState2 == false || budget.clickState2 == undefined) {
|
||||||
$('*').hover(function() {
|
$('*').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");
|
$(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=), auto");
|
||||||
|
});
|
||||||
|
$('a').hover(function() {
|
||||||
|
$(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c%0A6QAAA35JREFUSEvtVk1IG1EQnv1PNhEhVEloRa22gXqw3jyU5qAUQWk9iKjQ%0Ag7SIpIfmnJMHxaNQsYJUkLQSqAcP1VPFS6EeqwepFqOCaQ8x/kRo3N3se1tm%0AYdM02dhtrvVBEt6+b+abmffNbBhwvqpZlv0MADddLtf7bDY74ty0FMk4MRYE%0A4X4ikfhSV1dnwgkh4PF4FFVV3U7s7TCOiDs6Ouja2tofWEopyLL8UlXVV5WQ%0AOyI2DMModo6P3G63pqqqdE3spALXpbat0rW4sCz/Xzth1ufn5yWa0DQNtra2%0AoLu7W6GUjhBC3lY8Mu3E5aRX8Tpqa2shnU7jTFcKbSruYyfEFmZhYYEODw/f%0ABYCE9SxPLEnSo5qamtVwOMzPzc0ZyWTyga7r+BpEIZXM6n8hRmw0GjUmJyd5%0AAKC4N4klSbqTTqe/eb3evL9kMgn19fUvKKWv7Yjx1chxXFl+u3Oe53OEEDFP%0AzPM8yeVybLGXk5MTCAQCzzVNe4Mk6MxauD8+Pgafz1dCvrOzAy0tLaDrOjAM%0AA5lMxsSdnZ1BdXW1maz5FYlEjKmpKdvoLy8v8fVnZpfL5YBlWTMAURRNVVdV%0AVZXY7e3tQTAYzBNns1kTh/aiKL4jhDw1iVmW1QghQrm6WUQWMf4JEAQhH0ix%0AHbYUBmvhC/eCIPyklHotcXEbGxt6e3u7LbdFbJVuenraiEQijLW3M8IKra+v%0AQygUgqOjI2hoaDArxXGcTikVCtvJv7S09KOvr8+2xdBRZ2cnzM/Po+hgcXHR%0A6O/vZ5qbm439/X0GhY/3KUkSKIoCY2NjMD4+DqiTUChkHBwcMBcXF0iMg8Vd%0ATHJ7dnY2MTo6WpKEJRA86OrqgtXVVXNe8zwPeIeyLFsZmb941traSre3t03R%0AYjCIdblc3zVNu2WX3Y1oNJqamJiwzRzvFwVmrUAgAKlUCjY3N6GtrY3GYjF2%0AaGgof454rAR+MBiWZT0AkC07uQYGBmg8Hnc02VZWVoyenh4mHo/D4OBg2d5u%0AbGyEw8PD3+1UBlkVDoczMzMzjsj/Nsmwh30+3z0A+Jrv4yuM5N7e3szy8jKO%0AuooXlliW5U+Kojy0nDjJhgsGgzpOo0qWqqrg9Xo/6Lr+uNDeCbGJb2pqMnZ3%0Ad6+cz5ZjVPXp6Sn4/X5CKbWtlmNidCoIwjNK6ZOrMhdFMaNp2kdCSOwq3C/H%0Acfgu+27rfgAAAABJRU5ErkJggg==), crosshair");
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
('*').hover(function() {
|
('*').hover(function() {
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
$(function() {
|
$(function() {
|
||||||
// 获取开关状态
|
// 获取开关状态
|
||||||
chrome.storage.sync.get('clickState2', function(budget) {
|
chrome.storage.sync.get('clickState2', function(budget) {
|
||||||
// console.log(budget.clickState);
|
|
||||||
// 获取页面节点
|
// 获取页面节点
|
||||||
let input = document.querySelector("#button-2");
|
let input = document.querySelector("#button-2");
|
||||||
// 改变开关状态（保持与上次设置时一致）
|
// 改变开关状态（保持与上次设置时一致）
|
||||||
@ -9,12 +8,23 @@ $(function() {
|
|||||||
});
|
});
|
||||||
// 获取开关状态
|
// 获取开关状态
|
||||||
chrome.storage.sync.get('clickState3', function(budget) {
|
chrome.storage.sync.get('clickState3', function(budget) {
|
||||||
// console.log(budget.clickState);
|
|
||||||
// 获取页面节点
|
// 获取页面节点
|
||||||
let input = document.querySelector("#button-3");
|
let input = document.querySelector("#button-3");
|
||||||
// 改变开关状态（保持与上次设置时一致）
|
// 改变开关状态（保持与上次设置时一致）
|
||||||
input.checked = budget.clickState3;
|
input.checked = budget.clickState3;
|
||||||
});
|
});
|
||||||
|
// 获取番茄钟页面状态
|
||||||
|
chrome.storage.sync.get('clockState', function(budget) {
|
||||||
|
console.log(budget.clockState);
|
||||||
|
if (budget.clockState === "block") {
|
||||||
|
$('#back').css("display", "block");
|
||||||
|
$('#article').css("display", "none");
|
||||||
|
$('#pomodoro').css("display", "block");
|
||||||
|
} else if (budget.clockState === "none") {
|
||||||
|
$('#article').css("display", "block");
|
||||||
|
$('#pomodoro').css("display", "none");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 点击开关时改变按钮状态
|
// 点击开关时改变按钮状态
|
||||||
$("#button-2").click(function() {
|
$("#button-2").click(function() {
|
||||||
@ -22,7 +32,6 @@ $(function() {
|
|||||||
let checked = $("#button-2");
|
let checked = $("#button-2");
|
||||||
// 持久化存储开关状态
|
// 持久化存储开关状态
|
||||||
chrome.storage.sync.set({ 'clickState2': checked[0].checked });
|
chrome.storage.sync.set({ 'clickState2': checked[0].checked });
|
||||||
console.log('mouse success');
|
|
||||||
|
|
||||||
// 自动刷新页面
|
// 自动刷新页面
|
||||||
chrome.tabs.query({
|
chrome.tabs.query({
|
||||||
@ -31,7 +40,7 @@ $(function() {
|
|||||||
}, (tabs) => {
|
}, (tabs) => {
|
||||||
console.log(tabs);
|
console.log(tabs);
|
||||||
let message = {
|
let message = {
|
||||||
info: 'reload'
|
info: 'mouse'
|
||||||
}
|
}
|
||||||
chrome.tabs.sendMessage(tabs[0].id, message, res => {
|
chrome.tabs.sendMessage(tabs[0].id, message, res => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
@ -45,7 +54,6 @@ $(function() {
|
|||||||
let checked = $("#button-3");
|
let checked = $("#button-3");
|
||||||
// 持久化存储开关状态
|
// 持久化存储开关状态
|
||||||
chrome.storage.sync.set({ 'clickState3': checked[0].checked });
|
chrome.storage.sync.set({ 'clickState3': checked[0].checked });
|
||||||
console.log('click success');
|
|
||||||
|
|
||||||
// 自动刷新页面
|
// 自动刷新页面
|
||||||
chrome.tabs.query({
|
chrome.tabs.query({
|
||||||
@ -54,7 +62,7 @@ $(function() {
|
|||||||
}, (tabs) => {
|
}, (tabs) => {
|
||||||
console.log(tabs);
|
console.log(tabs);
|
||||||
let message = {
|
let message = {
|
||||||
info: 'reload'
|
info: 'click'
|
||||||
}
|
}
|
||||||
chrome.tabs.sendMessage(tabs[0].id, message, res => {
|
chrome.tabs.sendMessage(tabs[0].id, message, res => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
@ -65,7 +73,7 @@ $(function() {
|
|||||||
// Direct Url
|
// Direct Url
|
||||||
const btnDirectUrl = document.querySelector("#btnDirectUrl");
|
const btnDirectUrl = document.querySelector("#btnDirectUrl");
|
||||||
chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
|
chrome.storage.sync.get("linkOpen", ({ linkOpen }) => {
|
||||||
btnDirectUrl.checked = !linkOpen;
|
btnDirectUrl.checked = !linkOpen;
|
||||||
});
|
});
|
||||||
|
|
||||||
btnDirectUrl.addEventListener("change", () => {
|
btnDirectUrl.addEventListener("change", () => {
|
||||||
@ -78,4 +86,18 @@ $(function() {
|
|||||||
chrome.extension.getBackgroundPage().takeScreenshot(tabs[0]);
|
chrome.extension.getBackgroundPage().takeScreenshot(tabs[0]);
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#clock').click(function() {
|
||||||
|
$('#pomodoro').fadeIn(500);
|
||||||
|
$('#article').fadeOut(0);
|
||||||
|
$('#back').css("display", "block");
|
||||||
|
chrome.storage.sync.set({ "clockState": "block" });
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#back').click(function() {
|
||||||
|
$('#pomodoro').fadeOut(0);
|
||||||
|
$('#article').fadeIn(200);
|
||||||
|
$('#back').css("display", "none");
|
||||||
|
chrome.storage.sync.set({ "clockState": "none" });
|
||||||
|
})
|
||||||
})
|
})
|
||||||
@ -3,95 +3,97 @@ let key_w = "314285a761da4025bd4c09339dca5f0f"
|
|||||||
var longitude = 116.40
|
var longitude = 116.40
|
||||||
var latitude = 39.90
|
var latitude = 39.90
|
||||||
|
|
||||||
var searchWeatherfn = async function () {
|
var searchWeatherfn = async function() {
|
||||||
// 用经纬度获取
|
// 用经纬度获取
|
||||||
let url_jw = longitude + ',' + latitude
|
let url_jw = longitude + ',' + latitude;
|
||||||
console.log("url_jw: " + url_jw)
|
console.log("url_jw: " + url_jw);
|
||||||
let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${url_jw}&key=${key_w}`
|
let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${url_jw}&key=${key_w}`;
|
||||||
//获取城市的ID
|
//获取城市的ID
|
||||||
// let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=黔江区&adm=重庆&key=${key}`
|
// let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=黔江区&adm=重庆&key=${key}`
|
||||||
let res1 = await fetch(httpUrl) // 不能res，会冲突
|
let res1 = await fetch(httpUrl); // 不能res，会冲突
|
||||||
let result = await res1.json()
|
let result = await res1.json();
|
||||||
console.log("下面是result")
|
console.log("下面是result");
|
||||||
console.log(result)
|
console.log(result);
|
||||||
document.getElementById("weatherSite").innerHTML = result.location[0].adm1
|
document.getElementById("weatherSite").innerHTML = result.location[0].adm1;
|
||||||
let id = result.location[0].id
|
let id = result.location[0].id;
|
||||||
console.log(id)
|
console.log(id);
|
||||||
//根据城市id获取具体的天气
|
//根据城市id获取具体的天气
|
||||||
let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key_w}`
|
let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key_w}`
|
||||||
let res2 = await fetch(httpUrl1)
|
let res2 = await fetch(httpUrl1);
|
||||||
let result1 = await res2.json()
|
let result1 = await res2.json();
|
||||||
|
|
||||||
console.log(result1)
|
console.log(result1)
|
||||||
console.log(result1.now)
|
console.log(result1.now);
|
||||||
//显示天气情况
|
//显示天气情况
|
||||||
let now = result1.now.text
|
let now = result1.now.text;
|
||||||
document.getElementById("weatherText").innerHTML = now
|
document.getElementById("weatherText").innerHTML = now;
|
||||||
//显示温度
|
//显示温度
|
||||||
let nowTemp = result1.now.temp
|
let nowTemp = result1.now.temp
|
||||||
document.getElementById("weatherTemp").innerHTML = nowTemp + '°'
|
document.getElementById("weatherTemp").innerHTML = nowTemp + '°';
|
||||||
//显示图标
|
//显示图标
|
||||||
let svg_icon = result1.now.icon
|
let svg_icon = result1.now.icon;
|
||||||
document.getElementById("svg_w").src = "./assets/image/weather/icons/" + svg_icon + ".svg"
|
document.getElementById("svg_w").src = "./assets/image/weather/icons/" + svg_icon + ".svg";
|
||||||
//切换背景色
|
//切换背景色
|
||||||
var bobyEI = document.body
|
var bobyEI = document.body;
|
||||||
svg_icon = parseInt(svg_icon)
|
// var bobyEI = document.getElementById("weather")
|
||||||
if (100 <= svg_icon && svg_icon < 101) {
|
svg_icon = parseInt(svg_icon);
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/sun.webp)"
|
if (100 <= svg_icon && svg_icon < 101) {
|
||||||
} else if (101 <= svg_icon && svg_icon < 104) {
|
bobyEI.style = "background: url(./assets/image/weather/sun.webp) no-repeat; background-size: cover;"
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/yun.webp)"
|
} else if (101 <= svg_icon && svg_icon < 104) {
|
||||||
} else if (104 <= svg_icon && svg_icon < 150) {
|
bobyEI.style = "background: url(./assets/image/weather/yun.webp) no-repeat; background-size: cover;"
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/yin.webp)"
|
} else if (104 <= svg_icon && svg_icon < 150) {
|
||||||
} else if (150 <= svg_icon && svg_icon < 300) {
|
bobyEI.style = "background: url(./assets/image/weather/yin.webp) no-repeat; background-size: cover;"
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/night.webp)"
|
} else if (150 <= svg_icon && svg_icon < 300) {
|
||||||
} else if (300 <= svg_icon && svg_icon < 400) {
|
bobyEI.style = "background: url(./assets/image/weather/night.webp) no-repeat; background-size: cover;"
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/yu.webp)"
|
} else if (300 <= svg_icon && svg_icon < 400) {
|
||||||
} else if (400 <= svg_icon && svg_icon < 500) {
|
bobyEI.style = "background: url(./assets/image/weather/yu.webp) no-repeat; background-size: cover;"
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/xue.webp)"
|
} else if (400 <= svg_icon && svg_icon < 500) {
|
||||||
} else {
|
bobyEI.style = "background: url(./assets/image/weather/xue.webp) no-repeat; background-size: cover;"
|
||||||
bobyEI.style.backgroundImage = "url(./assets/image/weather/yun.webp)"
|
} else {
|
||||||
}
|
bobyEI.style = "background: url(./assets/image/weather/yun.webp) no-repeat; background-size: cover;"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function find_site() { //获取浏览器的经纬度
|
function find_site() { //获取浏览器的经纬度
|
||||||
console.log("开始定位浏览器位置")
|
console.log("开始定位浏览器位置")
|
||||||
localStorage.removeItem('BitD_longitude')
|
localStorage.removeItem('BitD_longitude')
|
||||||
localStorage.removeItem('BitD_latitude')
|
localStorage.removeItem('BitD_latitude')
|
||||||
navigator.geolocation.getCurrentPosition(onSuccess); // 获取经纬度
|
navigator.geolocation.getCurrentPosition(onSuccess); // 获取经纬度
|
||||||
function onSuccess(position) {
|
function onSuccess(position) {
|
||||||
//经度
|
//经度
|
||||||
longitude = position.coords.longitude;
|
longitude = position.coords.longitude;
|
||||||
localStorage.setItem('BitD_longitude', longitude)
|
localStorage.setItem('BitD_longitude', longitude)
|
||||||
console.log("longitude:" + longitude)
|
console.log("longitude:" + longitude)
|
||||||
|
|
||||||
//纬度
|
//纬度
|
||||||
latitude = position.coords.latitude;
|
latitude = position.coords.latitude;
|
||||||
localStorage.setItem('BitD_latitude', latitude)
|
localStorage.setItem('BitD_latitude', latitude)
|
||||||
console.log("latitude:" + latitude)
|
console.log("latitude:" + latitude)
|
||||||
console.log("获得浏览器经纬度而且写入localstorage end")
|
console.log("获得浏览器经纬度而且写入localstorage end")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (localStorage.getItem('BitD_longitude')) { //没有缓存
|
if (localStorage.getItem('BitD_longitude')) { //没有缓存
|
||||||
longitude = localStorage.getItem('BitD_longitude')
|
longitude = localStorage.getItem('BitD_longitude')
|
||||||
latitude = localStorage.getItem('BitD_latitude')
|
latitude = localStorage.getItem('BitD_latitude')
|
||||||
searchWeatherfn()
|
searchWeatherfn()
|
||||||
} else { // 没有缓存的时候 或者 需要更新的时候
|
} else { // 没有缓存的时候 或者 需要更新的时候
|
||||||
console.log("没有找到")
|
console.log("没有找到")
|
||||||
find_site()
|
find_site()
|
||||||
searchWeatherfn()
|
searchWeatherfn()
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("weatherSite").onclick = function () {
|
document.getElementById("weatherSite").onclick = function() {
|
||||||
find_site()
|
find_site()
|
||||||
searchWeatherfn()
|
searchWeatherfn()
|
||||||
}
|
}
|
||||||
|
|
||||||
// //天气end
|
// //天气end
|
||||||
//翻译
|
//翻译
|
||||||
document.getElementById("ToTans").onclick = function () {
|
//默认参数
|
||||||
console.log(chrome.extension.getBackgroundPage())
|
// document.getElementById("TOtans").onclick = function () {
|
||||||
chrome.extension.getBackgroundPage().tranBit()
|
// console.log(chrome.extension.getBackgroundPage())
|
||||||
}
|
// chrome.extension.getBackgroundPage().tranBit()
|
||||||
|
// }
|
||||||
|
|
||||||
//翻译end
|
//翻译end
|
||||||
@ -10,56 +10,68 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="popup">
|
<div id="popup">
|
||||||
<header>
|
<header>
|
||||||
<img src="assets/image/logo.png" alt="Logo">
|
<img src="assets/image/logo.png" alt="Logo" id="logo">
|
||||||
<!-- 天气模块 -->
|
<div id="weather">
|
||||||
<div id='weather'>
|
<span id="weatherSite">北京</span>
|
||||||
<p id="weatherSite">北京</p>
|
<img id="svg_w" src="./assets/image/weather/icons/100.svg">
|
||||||
<img id = "svg_w" src="./assets/image/weather/icons/100.svg">
|
<span id='weatherText'></span>
|
||||||
<p id='weatherText'></p>
|
<span id="weatherTemp"></span>
|
||||||
<p id="weatherTemp"></p>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="article">
|
<div id="back"></div>
|
||||||
<ul>
|
<div id="article">
|
||||||
<li>
|
<div id="buttons">
|
||||||
<div id="expand">
|
<button id="transform">翻译</button>
|
||||||
</div>
|
<div id="clock">番茄钟</div>
|
||||||
</li>
|
<button id="btnScreenshot">截图</button>
|
||||||
<li>
|
</div>
|
||||||
<div id="mouse-style">
|
<div class="setting">
|
||||||
<span>鼠标样式</span>
|
<ul>
|
||||||
<div class="button">
|
<li>
|
||||||
<input type="checkbox" id="button-2" class="checkbox" />
|
<div class="setting-item">
|
||||||
<div class="knobs"></div>
|
<span>广告屏蔽</span>
|
||||||
<div class="layer"></div>
|
<div class="button">
|
||||||
|
<input type="checkbox" id="button-1" class="checkbox" />
|
||||||
|
<div class="knobs"></div>
|
||||||
|
<div class="layer"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<div class="setting-item">
|
||||||
<div id="click-per">
|
<span>鼠标样式</span>
|
||||||
<span>点击特效</span>
|
<div class="button">
|
||||||
<div class="button">
|
<input type="checkbox" id="button-2" class="checkbox" />
|
||||||
<input type="checkbox" id="button-3" class="checkbox" />
|
<div class="knobs"></div>
|
||||||
<div class="knobs"></div>
|
<div class="layer"></div>
|
||||||
<div class="layer"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<div class="setting-item">
|
||||||
<div id="click-per">
|
<span>点击特效</span>
|
||||||
<span>确认访问页自动跳转</span>
|
<div class="button">
|
||||||
<div class="button">
|
<input type="checkbox" id="button-3" class="checkbox" />
|
||||||
<input type="checkbox" id="btnDirectUrl" class="checkbox" />
|
<div class="knobs"></div>
|
||||||
<div class="knobs"></div>
|
<div class="layer"></div>
|
||||||
<div class="layer"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
</ul>
|
<div class="setting-item">
|
||||||
|
<span>访问页自动跳转</span>
|
||||||
|
<div class="button">
|
||||||
|
<input type="checkbox" id="btnDirectUrl" class="checkbox" />
|
||||||
|
<div class="knobs"></div>
|
||||||
|
<div class="layer"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button id="btnScreenshot">截图</button>
|
<iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 450px; display: none;"></iframe>
|
||||||
<button id="ToTans">翻译</button>
|
|
||||||
<iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 400px;"></iframe>
|
|
||||||
</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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user