chrome系列-扩展程序开发学习-可配置选项

chrome系列-扩展程序开发学习-可配置选项

月光魔力鸭

2018-09-10 09:16 阅读 222 喜欢 0 chrome系列 可选配置

接下来,我们综合上面的配置,再加一个选项页面配置,做一个天气预报的小栗子。

栗子:天气预报:

主要是使用options_page参数,增加配置页面。

manifest.json
{
    "manifest_version":2,
    "name":"天气预报",
    "version":"1.0",
    "description":"获取天气预报,同时可以配置不同地区的获取",
    "icons":{
        "16":"img/icon16.png"
    },
    "browser_action":{
        "default_icon":{
            "16":"img/icon16.png"
        },
        "default_title":"天气预报",
        "default_popup":"popup.html"
    },
    "options_page":"options.html",
    "permissions":[
        "https://free-api.heweather.com/s6/weather/now?*"
    ]
}

栗子里面使用的API是和风天气,注册下就可以免费使用。

根据上面我们的json配置,需要有两个页面: options.html popup.html.

options.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设定城市</title>
</head>
<body>
    <input type="text" name="city" id="city" placeholder="请输入您所在的城市,默认泰安">
    <input type="button" id="save" value="保存">
</body>
</html>
<script type="text/javascript" src="options.js"></script>

options.js

var city = document.getElementById('city');

var save = document.getElementById('save');

var value = localStorage.city || '泰安';

city.value = value;

save.onclick = function(){
    localStorage.city = city.value;
    alert('保存成功');
}

我们默认使用一个地址,然后将用户提交的地址,保存在localStorage中。

popup.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <style>
        #tianqi{
            min-width:200px;
            min-height:50px;
        }
    </style>
</head>
<body>
    <div id="tianqi">

    </div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>

popup.js

var request = function(url,cb){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url);
    xhr.onreadystatechange = function(){
        if(xhr.readyState ==4 && xhr.status == 200){
            cb(xhr.responseText);
        }
    }
    xhr.send();
}

var url = 'https://free-api.heweather.com/s6/weather/now';
var city = localStorage.city || '泰安';
var key = '注册后的KEY';
url = url + '?location='+city+'&key='+key;
request(url,function( res ){
    var tianqi = document.getElementById('tianqi');
    var obj = JSON.parse(res);
    console.log(obj);
    obj = obj.HeWeather6[0];
    var html = '当前地区:'+obj.basic.location+',天气:'+obj.now.cond_txt+',风向:'+obj.now.wind_dir;
    tianqi.innerHTML = html;
});
看效果

效果图

转载请注明出处: https://chrunlee.cn/article/chrome-learn-5.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近一直琢磨着做一个第三方统一登录的这么一个小东西,虽然网上其实也挺多的.. 不过造轮子的感觉还是很爽的。 QQ /Github 比较简单,申请下就OK 了.. 微信真不是个东西,得花钱。
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
本篇文章以一个实际的小项目为主题进行从头到尾的讲解实现,该项目总计开发时长约6小时,主要是有很多页面或功能都是现成的,直接复制过来的,剩下的就调整下样式、字段内容等。
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
最开始其实只是网站的一个小改版,导致的需要发送邮件的功能,本身功能不复杂,不做工具的话,几行代码应该就可以搞定的.. 不过后来想想,这个功能应该还是有一定的小需求的,就做成了工具。
之前看知乎相中了一个想法,给宝宝做一个站,上传生活的日常照片啊、视频之类的,存储肯定是在自己家里,然后做个穿透这样..开始做的时候又想着是时候接触下这些东西了,虽然公司都一点不用,但是自己没事接触下拓展下也是好的。
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。
最近有个小功能需要一些基础数据,找了一下在小程序上有发现,暂时还没找到他的网站,想着把这些数据爬一些下来做为基础数据使用的。本来还想着直接反编译小程序的,没想到微信变更了加密方式,以前反编译的路子走不通了。