Chrome 插件之计算器插件小工具

最新推荐文章于 2022-03-01 01:04:22 发布

zxc_user

最新推荐文章于 2022-03-01 01:04:22 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zxc_user/article/details/77373280

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

如果不明白文件代表的意思，可以先看看我的另一篇博客

计算器效果图

总的架构图

http://blog.csdn.net/zxc_user/article/details/77369047

manifest.json

{
"manifest_version":2,

"name":"zxc-chrome",
"description":"my first chrome extension-browser action",
"version":"1.0",
"permissions":[
    "https://*/*",
    "http://*/*"
    ],
"browser_action":{
    "default_icon":"icon.png",
    "default_popup":"popup.html"
    }
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
  </head>
  <body>
       <center>
             <div style="" class="constant">
                <font color="blue">计算器</font>
                <hr/>
             </div><br/>
             <ul>
               <li><button value="1" />1</li>
               <li><button value="2" />2</li>
               <li><button value="3" />3</li>
               <li><button value="4" />4</li>
               <li><button value="5" />5</li>
               <li><button value="6" />6</li>
               <li><button value="7" />7</li>
               <li><button value="8" />8</li>
               <li><button value="9" />9</li>
               <li><button value="0" />0</li>
               <li><button value="." />.</li>
             </ul><br/><br/>
              <div>
                <input type="button" id="change" value="第一个输入框" />  
                <input type="text" id="left" class="select" size="8" >  
                <select id="operator">
                      <option value="+">+</option>
                      <option value="-">-</option>
                      <option value="*">*</option>
                      <option value="/">/</option>
                </select>  
                <input type="text" id="right" size="8"><br/>
                <input type="button" id="clear" value="清空填入数据"/>  
                <input type="submit" id="submit" value="获取结果">
                <font size="5"><span id="result"></span></font>
       </div>
       </center>
  </body>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/popup.js"></script>
</html>

popup.js

document.write(" <script language=\"javascript\" src=\"js\/\jquery.js\" > <\/script>"); 
function operator(i, operator, j) {
     i = Number(i);
     j = Number(j);
     if("+" == operator) return i + j;
     if("-" == operator) return i - j;
     if("*" == operator) return i * j;
     if("/" == operator) return i / j;
     return "no operator";
}

$("#submit").click(function(event) {
    var result = operator($("#left").val(), $("#operator").val(), $("#right").val());
    alert("结果为:" + result);
    $("span#result").html("  result: " + result);
});

$("ul>li>button").click(function(){
    $("input.select").val($("input.select").val() + $(this).val());
})

$("#change").click(function(){
    if($("#left").hasClass("select")) {
        $("#left").removeClass("select");
        $("#right").addClass("select");
        $(this).val("第二个输入框");
    } else {
        $("#right").removeClass("select");
        $("#left").addClass("select");
        $(this).val("第一个输入框");
    }
})

$("#clear").click(function(){
    $("#left").val("");
    $("#right").val("");
});

base.css

body {
min-width: 100px;
overflow-x: hidden;
width: 550px;
height: 180px;
}

img {
   margin: 5px;
   border: 2px solid black;
   vertical-align: middle;
   width: 75px;
   height: 75px;
}

select {
   height: 22px;
}

#change {
   height: 22px;
}
ul li {
   float: left;
   list-style: none;
   margin-left: 6px;
}

ul li button {
   height: 20px;
   width: 35px;
}

jQuery 和 icon.png 就不贴了

好了，到这里就是我的第一个最简单的Chrome插件

zxc_user

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Chrome 插件之计算器插件小工具

如果不明白文件代表的意思，可以先看看我的另一篇博客总的架构http://blog.csdn.net/zxc_user/article/details/77369047manifest.json{"manifest_version":2,"name":"zxc-chrome","description":"my first chro
复制链接

扫一扫