chrome 天气插件开发

最新推荐文章于 2022-07-17 08:20:01 发布

白熊花田

最新推荐文章于 2022-07-17 08:20:01 发布

阅读量1.8k

点赞数

文章标签： chrome插件 extension 扩展天气开发

本文链接：https://blog.csdn.net/whiterbear/article/details/27656189

版权

Chrome插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初次学习Chrome插件开发，这里插件指的是Chrome扩展程序，属于chrome://extensions/这里面的。

其实Chrome插件开发方法其实很简单。开发文档：http://chrome.liuyixi.com/overview.html，入门学习可以参考：http://blog.csdn.net/xiaoxian8023/article/details/24457767。

我这里给出开发一个简单天气预报的插件。

具体效果如下图：

源代码结构图：

步骤：

第一步我们创建一个manifest.json文件，注manifest.json文件格式需为utf-8，否则会出现乱码啥的。

manifest.json文件记录一些插件的基本信息，供Chrome获取。

{
    "name": "My First Extension",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "The first extension that I made",
    "icons": {
        "48": "img/logo_avatar.png"
    },
    "browser_action": {
        "default_icon": "img/icon.png",
        "default_popup": "popup.html"
    }
}

第二步我们编写一个popup.html界面，这个界面就是点击插件按钮弹出的界面。因为我想的是做一个天气预报的功能，本来是想获得天气的json数据经行处理的，后来发现我的js文件不起作用，只好采用这个http://taiyuan.tianqi.com/网站的提供的代码，直接一个iframe套用，其他的什么都不用管，只是用不到自己的处理了。

popup.html:

<!DOCTYPE html>

<html>
<head>
     <meta charset="GB2312">
     <title>weather</title>
     <link rel="stylesheet" type="text/css" href="style/popup.css"/>
</head>
<body>
     <div id="cityname">我的天气预报</div>
     <iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=5"></iframe>
</body>
</html>

第三步我们编写style中的css文件，给popup.html文件提供样式。

popup.css:

html {
     height: 100px;
     width: 450px;
}

#cityname {
     text-align: center;
     font-size: 20px;
     font-weight: bold;
     margin: 5px;
}

最后给出两个icon。

第一个是我从百度图片中截图的，第二个是从csdn一个博客中得到的icon图片。第一个是icon.png，第二个是logo_avatar.png.

到此，代码这块我们已经完成了。接下来的任务就是把这个插件添加到Chrome中去。

如下图：我们在Chrome中选中开发者模式，选择加载正在开发的扩展程序，选择我们刚刚写完的那个文件夹，会出现如下的结果。并且浏览器右上角会出现天气的图标。点击图标则会出现最先开始给出的效果图。

怎么样，是不是感觉很简单，大家都来试一下吧，看起来很小的东西其实还蛮有用的。

最后，我们可以将这个插件打包一下，点击Chrome的打包扩展程序，选择天气插件，确定后生成一个.crx文件，这个是插件，可以直接拖到Chrome下经行安装，另一个是.pem文件，可能是用来加密用的。

白熊花田

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome 天气插件开发

初次学习Chrome插件开发，这里插件指的是Chrome扩展程序，属于chrome://extensions/这里面的。其实Chrome插件开发方法其实很简单。开发文档：http://chrome.liuyixi.com/overview.html，入门学习可以参考：http://blog.csdn.net/xiaoxian8023/article/details/24457767。我这里
复制链接

扫一扫