扩展MV3；Double S 快捷搜索功能完善；README完成
This commit is contained in:
1
html/assets/css/global.css
Normal file
1
html/assets/css/global.css
Normal file
@@ -0,0 +1 @@
|
||||
*{margin:0;padding:0}li{list-style:none}a{text-decoration:none}body{background:#a6c1ee}
|
||||
17
html/assets/css/global.less
Normal file
17
html/assets/css/global.less
Normal file
@@ -0,0 +1,17 @@
|
||||
// 全局样式
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #a6c1ee;
|
||||
}
|
||||
1
html/assets/css/popup.css
Normal file
1
html/assets/css/popup.css
Normal file
@@ -0,0 +1 @@
|
||||
#popup{min-height:420px;width:300px;margin:12px 5px;user-select:none}#popup .control-panel .btn{width:81px;height:32px;color:#fff;cursor:pointer;background-color:#5ca3ef;border:none;border-radius:4px}#popup .control-panel .btn:hover{background-color:#6fc6ff}#popup .control-panel .btn:active{transform:translate(0, 1px);box-shadow:0px 1px 0px 0px}#popup .setting{width:100%;margin-top:12px}#popup .setting ul li{margin:7px 0;height:44px;border-radius:25px;background:#ffffffc9;padding:0}#popup .setting ul li .setting-item{padding-left:18px;padding-right:2px}#popup .setting ul li .setting-item span{font-size:14px;line-height:44px}#popup .setting ul li .setting-item .button{position:relative;float:right;top:6px;right:6px;width:66px;height:32px;border-radius:100px}#popup .setting ul li .setting-item .button .checkbox{position:relative;width:100%;height:100%;opacity:0;cursor:pointer;z-index:3}#popup .setting ul li .setting-item .button .knobs,#popup .setting ul li .setting-item .button .layer{position:absolute;top:0;right:0;bottom:0;left:0}#popup .setting ul li .setting-item .button .knobs{z-index:2}#popup .setting ul li .setting-item .button .layer{border-radius:100px;width:100%;background-color:#ebf7fc;z-index:1}#popup .setting ul li .setting-item .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 .setting ul li .setting-item .button .checkbox:checked+.knobs:before{content:"NO";left:3px;background-color:#f44336}#popup .setting ul li .setting-item .button .checkbox:checked~.layer{background-color:#fcebeb}#popup .setting ul li .setting-item .button .knobs,#popup .setting ul li .setting-item .button .knobs:before,#popup .setting ul li .setting-item .button .layer{transition:.3s ease all}
|
||||
111
html/assets/css/popup.less
Normal file
111
html/assets/css/popup.less
Normal file
@@ -0,0 +1,111 @@
|
||||
#popup {
|
||||
min-height: 420px;
|
||||
width: 300px;
|
||||
margin: 12px 5px;
|
||||
user-select: none;
|
||||
|
||||
.control-panel {
|
||||
.btn {
|
||||
width: 81px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background-color: #5ca3ef;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: #6fc6ff;
|
||||
}
|
||||
&:active {
|
||||
transform: translate(0px, 1px);
|
||||
box-shadow: 0px 1px 0px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
ul {
|
||||
li {
|
||||
margin: 7px 0;
|
||||
height: 44px;
|
||||
border-radius: 25px;
|
||||
background: #ffffffc9;
|
||||
padding: 0;
|
||||
|
||||
.setting-item {
|
||||
padding-left: 18px;
|
||||
padding-right: 2px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
108
html/assets/js/popup.js
Normal file
108
html/assets/js/popup.js
Normal file
@@ -0,0 +1,108 @@
|
||||
$(function() {
|
||||
/**
|
||||
* Direct Url
|
||||
*/
|
||||
const btnDirectUrl = document.querySelector("#btnDirectUrl");
|
||||
// 页面加载时，更新界面开关状态
|
||||
chrome.storage.sync.get("State_DirectUrl", ({ State_DirectUrl }) => {
|
||||
btnDirectUrl.checked = !State_DirectUrl;
|
||||
});
|
||||
|
||||
// 点击开关时存储按钮状态并刷新页面
|
||||
btnDirectUrl.addEventListener("change", () => {
|
||||
chrome.storage.sync.set({ State_DirectUrl: !btnDirectUrl.checked });
|
||||
refreshPage('Direct Url');
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Expand Fulltext
|
||||
*/
|
||||
const btnExpandFulltext = document.querySelector("#btnExpandFulltext");
|
||||
// 页面加载时，更新界面开关状态
|
||||
chrome.storage.sync.get("State_ExpandFulltext", ({ State_ExpandFulltext }) => {
|
||||
btnExpandFulltext.checked = !State_ExpandFulltext;
|
||||
});
|
||||
|
||||
// 点击开关时存储按钮状态并刷新页面
|
||||
btnExpandFulltext.addEventListener("change", () => {
|
||||
chrome.storage.sync.set({ State_ExpandFulltext: !btnExpandFulltext.checked });
|
||||
refreshPage('Expand Fulltext');
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Google 广告拦截
|
||||
*/
|
||||
const btnGoogleAds = document.querySelector("#btnAdsBlock");
|
||||
// 页面加载时，更新界面开关状态
|
||||
chrome.storage.sync.get('State_AdsBlock', function(budget) {
|
||||
btnGoogleAds.checked = !budget.State_AdsBlock;
|
||||
});
|
||||
|
||||
// 点击开关时存储按钮状态并刷新页面
|
||||
$("#btnAdsBlock").click(function() {
|
||||
chrome.storage.sync.set({ 'State_AdsBlock': !btnGoogleAds.checked });
|
||||
chrome.extension.getBackgroundPage().updateAdsBlockStatus(!btnGoogleAds.checked);
|
||||
refreshPage('Ads Block');
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* Double S 快捷搜索
|
||||
*/
|
||||
const btnSSSearch = document.querySelector("#btnSSSearch");
|
||||
// 页面加载时，更新界面开关状态
|
||||
chrome.storage.sync.get('State_SSSearch', function(budget) {
|
||||
btnSSSearch.checked = !budget.State_SSSearch;
|
||||
});
|
||||
|
||||
// 点击开关时存储按钮状态并刷新页面
|
||||
$("#btnSSSearch").click(function() {
|
||||
chrome.storage.sync.set({ 'State_SSSearch': !btnSSSearch.checked });
|
||||
// refreshPage('SS Search');
|
||||
})
|
||||
|
||||
|
||||
// ****************************************************************************************************************
|
||||
|
||||
/**
|
||||
* 判断是否是浏览器设置页面
|
||||
* 即是否是 chrome:// 或 edge:// 开头的链接
|
||||
* @param {} url
|
||||
* @returns
|
||||
*/
|
||||
function isBrowserSettingPage({url, action, showSorryInfo = true }) {
|
||||
var protocol, isSettingPage = true;
|
||||
if(/^chrome:\/\/.*$/.test(url)) {
|
||||
protocol = "chrome://"
|
||||
} else if(/^edge:\/\/.*$/.test(url)) {
|
||||
protocol = "edge://"
|
||||
} else {
|
||||
isSettingPage = false;
|
||||
}
|
||||
if(showSorryInfo && isSettingPage) {
|
||||
alert(`十分抱歉，由于浏览器限制，“${protocol}”开头的网站不支持${action}`);
|
||||
}
|
||||
return isSettingPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* 改变开关自动刷新页面
|
||||
*/
|
||||
function refreshPage(messageInfo) {
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, (tabs) => {
|
||||
console.log(tabs);
|
||||
let message = {
|
||||
info: messageInfo,
|
||||
action: "refreshPage"
|
||||
}
|
||||
chrome.tabs.sendMessage(tabs[0].id, message, res => {
|
||||
console.log(res);
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
5
html/assets/lib/jquery.min.js
vendored
Normal file
5
html/assets/lib/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
14
html/options.html
Normal file
14
html/options.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>配置 | 小墨助手</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="text-align: center;">
|
||||
小墨助手 配置页
|
||||
</h1>
|
||||
</body>
|
||||
</html>
|
||||
66
html/popup.html
Normal file
66
html/popup.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>小墨助手</title>
|
||||
<link rel="stylesheet" href="assets/css/global.css">
|
||||
<link rel="stylesheet" href="assets/css/popup.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="popup">
|
||||
<div class="control-panel">
|
||||
<button class="btn" id="transform">翻译</button>
|
||||
<button class="btn" id="btnScreenshot">截图</button>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="setting-item">
|
||||
<span>Double S 快捷搜索</span>
|
||||
<div class="button">
|
||||
<input type="checkbox" id="btnSSSearch" class="checkbox" />
|
||||
<div class="knobs"></div>
|
||||
<div class="layer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<li>
|
||||
<div class="setting-item">
|
||||
<span>Google广告屏蔽</span>
|
||||
<div class="button">
|
||||
<input type="checkbox" id="btnAdsBlock" class="checkbox" />
|
||||
<div class="knobs"></div>
|
||||
<div class="layer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="setting-item">
|
||||
<span>阅读原文自动展开</span>
|
||||
<div class="button">
|
||||
<input type="checkbox" id="btnExpandFulltext" class="checkbox" />
|
||||
<div class="knobs"></div>
|
||||
<div class="layer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/lib/jquery.min.js"></script>
|
||||
<script src="assets/js/popup.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user