谷歌瀏覽器外掛-計算器
阿新 • • 發佈：2018-12-14
記錄一下自己做的一個谷歌外掛-計算器，功能很簡單。
開始
檔案結構
---- google-xjxcc-util-calculator（外掛資料夾名稱）
---- ---- css
---- ---- ---- calculator.css (計算器樣式CSS)
---- ---- img
---- ---- ---- icon.png (外掛圖示，隨便放一個就可以了)
---- ---- js
---- ---- ---- calculator.js (計算器邏輯JS)
---- ---- ---- jquery-1.8.3.js (我沒的文化、曉不得勒個是啥子)
---- ---- ---- popup.js (點選瀏覽器右上角外掛圖示彈出的頁面對應的JS)
---- ---- manifest.json (外掛主配置)
---- ---- popup.html (點選瀏覽器右上角外掛圖示彈出的頁面、包含計算器展示)
1、首先上主配置檔案---manifest.json
{ // 清單檔案的版本，這個必須寫，而且必須是2 "manifest_version": 2, // 外掛的名稱 "name": "洗腳溪串串常用工具-計算器", // 外掛的版本 "version": "1.0.0", // 外掛描述 "description": "裡面包含了計算器功能", // 圖示，一般偷懶全部用一個尺寸的也沒問題 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, // 瀏覽器右上角圖示設定，browser_action、page_action、app必須三選一 "browser_action": { "default_icon": "img/icon.png", // 圖示懸停時的標題，可選 "default_title": "計算器", "default_popup": "popup.html" }, // 外掛主頁，這個很重要，不要浪費了這個免費廣告位 "homepage_url": "https://blog.csdn.net/liguoqingxjxcc", // 預設語言 "default_locale": "zh_CN" }
2、點選外掛展示的頁面---popup.html
<!DOCTYPE html>
<html>
<head>
<title>洗腳溪串串常用工具</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/calculator.css" />
<style>
body {
font-family: 'Microsoft Yahei';
width: 222px;
min-height: 100px;
}
a {margin-right: 10px;}
</style>
<!--
注意:
1、不支援內聯JavaScript的執行
不能再標籤中用onclick屬性等，如果想用onclick功能，自己在js檔案裡面用$("").click();
2、
-->
</head>
<body>
<div align="center">
<h3>
<a href="javascript:void(0)" class="openUrl" src="https://blog.csdn.net/liguoqingxjxcc">洗腳溪串串</a>
</h3>
</div>
<div id="calcuator">
<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
<div id="btn-list">
<div operator="clear" class="operator btn-30 btn-radius color-red clear-marginleft">C</div>
<div operator="opposite" class="operator btn-30 btn-radius color-blue">+/-</div>
<div operator="percent" class="operator btn-30 btn-radius color-blue">%</div>
<div operator="backspace" class="operator btn-70 btn-radius color-red font-14">←</div>
<div typetoinput="7" class="typetoinput btn-30 btn-radius clear-marginleft">7</div>
<div typetoinput="8" class="typetoinput btn-30 btn-radius">8</div>
<div typetoinput="9" class="typetoinput btn-30 btn-radius">9</div>
<div operator="plus" class="operator btn-30 btn-radius color-blue font-14">+</div>
<div operator="minus" class="operator btn-30 btn-radius color-blue font-14">-</div>
<div typetoinput="4" class="typetoinput btn-30 btn-radius clear-marginleft">4</div>
<div typetoinput="5" class="typetoinput btn-30 btn-radius">5</div>
<div typetoinput="6" class="typetoinput btn-30 btn-radius">6</div>
<div operator="multiply" class="operator btn-30 btn-radius color-blue font-14">×</div>
<div operator="divide" class="operator btn-30 btn-radius color-blue font-12">÷</div>
<div typetoinput="1" class="typetoinput btn-30 btn-radius clear-marginleft">1</div>
<div typetoinput="2" class="typetoinput btn-30 btn-radius">2</div>
<div typetoinput="3" class="typetoinput btn-30 btn-radius">3</div>
<div operator="pow" class="operator btn-30 btn-radius color-blue font-14">ײ</div>
<div operator="sqrt" class="operator btn-30 btn-radius color-blue font-12">√</div>
<div typetoinput="0" class="typetoinput btn-70 btn-radius clear-marginleft">0</div>
<div typetoinput="." class="typetoinput btn-30 btn-radius">.</div>
<div operator="result" class="operator btn-70 btn-radius color-red font-14">=</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/calculator.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body>
</html>
3、點選外掛展示的頁面對應的JS---popup.js
$(function() {
});
//點選常用地址(這段程式碼不要放在$(function() {}裡面，不然執行不了)
$(".openUrl").click(function (){
var url = $(this).attr("src");
var isNewWindow = "";
//在新視窗中開啟網頁
if(isNewWindow == "checked"){
chrome.windows.create({url: url});
//在新標籤中開啟網頁
}else{
chrome.tabs.create({url: url});
}
});4、計算器的js檔案---calculator.js
var _string=new Array();
var _type;
$(".operator").click(function (){
var type = $(this).attr("operator");
switch (type)
{
case "clear":
input.value="0";
_string.length=0;
/*document.getElementById("ccc").innerHTML="";
for(i=0;i<_string.length;i++)
{
document.getElementById("ccc").innerHTML+=_string[i]+" "
}*/
break;
case "backspace":
if(checknum(input.value)!=0)
{
input.value=input.value.replace(/.$/,'');
if(input.value=="")
{
input.value="0";
}
}
break;
case "opposite":
if(checknum(input.value)!=0)
{
input.value=-input.value;
}
break;
case "percent":
if(checknum(input.value)!=0)
{
input.value=input.value/100;
}
break;
case "pow":
if(checknum(input.value)!=0)
{
input.value=Math.pow(input.value,2);
}
break;
case "sqrt":
if(checknum(input.value)!=0)
{
input.value=Math.sqrt(input.value);
}
break;
case "plus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="plus"
input.value="+";
input.name="type";
}
break;
case "minus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="minus"
input.value="-";
input.name="type";
}
break;
case "multiply":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="multiply"
input.value="×";
input.name="type";
}
break;
case "divide":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="divide"
input.value="÷";
input.name="type";
}
break;
case "result":
if(checknum(input.value)!=0)
{
_string.push(input.value);
if(parseInt(_string.length)%2!=0)
{
_string.push(_string[_string.length-2])
}
if(_type=="plus")
{
input.value=parseFloat(result(_string)[0])+parseFloat(result(_string)[1]);
input.name="type"
}
else if(_type=="minus")
{
input.value=parseFloat(result(_string)[0])-parseFloat(result(_string)[1]);
input.name="type"
}
else if(_type=="multiply")
{
input.value=parseFloat(result(_string)[0])*parseFloat(result(_string)[1]);
input.name="type"
}
else if(_type=="divide")
{
input.value=parseFloat(result(_string)[0])/parseFloat(result(_string)[1]);
input.name="type"
}
break;
}
}
});
$(".typetoinput").click(function (){
var num = $(this).attr("typetoinput");
input=document.getElementById("input-box");
if(input.name=="type")
{
input.value=" ";
input.name=" ";
}
if(num!="."&&input.value[0]==0&&input.value[1]!=".")
{
input.value=num; //Reset input num
}
else if(num=="."&&input.value.indexOf(".")>-1)
{
input.value=input.value; //Only one point allow input
}
else if(input.value=="Infinity"||input.value=="NaN")
{
input.value="";
input.value+=num; //Splicing string
}
else
{
input.value+=num;
}
});
function result(value)
{
var result=new Array;
if(value.length%2==0)
{
result.push((value[value.length-2]));
result.push((value[value.length-1]));
return (result);
}
else
{
result.push((value[value.length-1]))
result.push((value[value.length-2]))
return (result);
}
}
function checknum(inputvalue)
{
if(inputvalue=="+"||inputvalue=="-"||inputvalue=="×"||inputvalue=="÷"||input.value=="0")
{
return 0;
}
}
window.document.onkeydown = disableRefresh;
function disableRefresh(evt){
evt = (evt) ? evt : window.event
if (evt.keyCode)
{
if(evt.keyCode == 13){operator('result')}
else if(evt.keyCode == 8){input.focus();window.event.returnValue = false;operator('backspace')}
else if(evt.keyCode == 27){operator('clear')}
else if(evt.keyCode == 48){typetoinput('0')}
else if(evt.keyCode == 49){typetoinput('1')}
else if(evt.keyCode == 50){typetoinput('2')}
else if(evt.keyCode == 51){typetoinput('3')}
else if(evt.keyCode == 52){typetoinput('4')}
else if(evt.keyCode == 53){typetoinput('5')}
else if(evt.keyCode == 54){typetoinput('6')}
else if(evt.keyCode == 55){typetoinput('7')}
else if(evt.keyCode == 56){typetoinput('8')}
else if(evt.keyCode == 57){typetoinput('9')}
else if(evt.keyCode == 96){typetoinput('0')}
else if(evt.keyCode == 97){typetoinput('1')}
else if(evt.keyCode == 98){typetoinput('2')}
else if(evt.keyCode == 99){typetoinput('3')}
else if(evt.keyCode == 100){typetoinput('4')}
else if(evt.keyCode == 101){typetoinput('5')}
else if(evt.keyCode == 102){typetoinput('6')}
else if(evt.keyCode == 103){typetoinput('7')}
else if(evt.keyCode == 104){typetoinput('8')}
else if(evt.keyCode == 105){typetoinput('9')}
else if(evt.keyCode == 110){typetoinput('.')}
else if(evt.keyCode == 106){operator('multiply')}
else if(evt.keyCode == 107){operator('plus')}
else if(evt.keyCode == 111){operator('divide')}
else if(evt.keyCode == 109){operator('minus')}
}
}5、計算器的樣式css檔案---calculator.css
@charset "utf-8";
#calcuator div {text-align:left}
#calcuator a img {border:0}
#calcuator { color: #333; text-align: center; font: 12px "微軟雅黑"; }
#calcuator ul, ol, li {list-style-type:none;vertical-align:0}
#calcuator a {outline-style:none;color:#535353;text-decoration:none}
#calcuator a:hover { color: #D40000; text-decoration: none}
#calcuator{ width:200px; height:245px; padding:10px; border:1px solid #e5e5e5; background:#f8f8f8; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; box-shadow:0px 0px 10px #f2f2f2; -moz-box-shadow:0px 0px 10px #f2f2f2; -webkit-box-shadow:0px 0px 10px #f2f2f2; margin: 0px auto; }
#calcuator #input-box{ margin:0; width:187px; padding:9px 5px; height:14px;border:1px solid #e5e5e5; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#FFF; text-align:right; line-height:14px; font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#666; outline:none; text-transform:uppercase;}
#calcuator #btn-list{ width:200px; overflow:hidden;}
#calcuator #btn-list .btn-radius{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; border:1px solid #e5e5e5; background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb)); background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1); line-height:29px; text-align:center; text-shadow:0px 1px 1px #FFF; font-weight:bold; font-family:Verdana, Geneva, sans-serif; color:#666; float:left; margin-left:11px; margin-top:11px; font-size:12px; cursor:pointer;}
#calcuator #btn-list .btn-radius:active{ background:#ffffff;}
#calcuator #btn-list .clear-marginleft{ margin-left:0;}
#calcuator #btn-list .font-14{ font-size:14px;}
#calcuator #btn-list .color-red{ color:#ff5050}
#calcuator #btn-list .color-blue{ color:#00b4ff}
#calcuator #btn-list .btn-30{ width:29px; height:29px;}
#calcuator #btn-list .btn-70{ width:71px; height:29px;}除了上面五個檔案，還有一個圖片和Jquery的檔案。這兩個檔案隨便找一個就行了。
使用外掛:在谷歌瀏覽器-更多工具-擴充套件程式-開啟開發者模式-載入已解壓的擴充套件程式，選擇你的資料夾（google-xjxcc-util-calculator）
結束
結尾:僅供自己學習,記錄問題和參考,若有帶來誤解和不便請見諒,共勉！