Chrome插件开发——本地天气

Bertha 。 2022-07-11 20:55 277阅读 0赞

经常在`Chrome应用商店`下载扩展程序也就是插件，有时候在想可不可以自己也开发一个插件用用呢？本文就是在这样的背景下产生的，以一个生活必需的简单获取天气的插件作为开发演示，下面就开始我们的`Chrome插件开发之旅`吧！

源码地址：[https://github.com/leoyaojy/c...][https_github.com_leoyaojy_c...]

目录结构：

├── css
    │   └── main.css
    ├── imgs
    │   ├── icon-128.png
    │   ├── icon-16.png
    │   ├── icon-19.png
    │   └── icon-38.png
    ├── js
    │   ├── jquery.js
    │   └── main.js
    ├── manifest.json
    └── popup.html

效果图:

![1460000008043145_w_301_h_511][]

### manifest.json ###

入口文件，每个`Chrome`插件都必须包含一个`manifest.json`文件，其中必须包含`name`、`version`和`manifest_version`属性

{
        "manifest_version": 2,
        "version": "1.0",
        "name": "weather",
        "description": "a chrome extension for local weather",
        "icons": { "128": "imgs/icon-128.png", "16": "imgs/icon-16.png" },
        "browser_action": { "default_icon": { "19": "imgs/icon-19.png", "38": "imgs/icon-38.png" }, "default_title": "weather", "default_popup": "popup.html" },
        "permissions":[ "http://*/*", "https://*/*" ] }

属性说明：

*  `manifest_version`：此键指定此扩展使用的`manifest.json`的版本，目前必须是2
 *  `version`：插件版本号
 *  `name`：插件名称
 *  `description`：插件描述
 *  `icons`：插件图标，`Chrome`扩展程序页显示
 *  `browser_action`：指定插件在`Chrome`工具栏中的显示信息
    
    1.  `default_icon`：图标
    2.  `default_title`：标题
    3.  `default_popup`：弹出页
 *  `permissions`：权限

注意：如果我们需要向服务器请求数据，就需要在`permissions`中添加请求数据的接口，否则会报跨域请求的限制。但是如果需要向多个接口请求数据，建议直接按我的方式书写匹配规则，这样不管多少接口都适用

### popup.html ###

`popup`页面是当用户点击插件图标时，展示在图标下方的页面

<!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <title>Weather</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="container">
            <div id="today">
                <h1 id="city">北京</h1>
                <h3 id="updateTime">09:00发布</h3>
                <div id="pic">
                    <img src="./imgs/0.svg" alt="" />
                    <p>8℃</p>
                    <p>晴</p>
                </div>
                <ul id="info"></ul>
            </div>
            <div id="future">
                <ul id="list"></ul>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/main.js"></script>
    </body>
    </html>

这里我们使用了`jQuery`，方便对`dom`元素进行操作，注意我们不能直接在`html`里写`js`代码，只能通过外部引用的方式引入`js`文件。

### main.js ###

`ajax`请求接口数据并渲染到`popup`页面中去，这里使用的是[心知天气][Link 1]的`api`接口，但是发现使用它提供的免费数据`api`只能获取最多三天的天气预报数据，而且默认提供的图标不是我想要的风格，需调用多个接口才能实现基本功能。后来发现它也有提供[插件][Link 2]的服务，只需要简单的几行`js`代码就可以实现酷炫天气效果，在控制台`Network`分析面板提取了它的`api`接口，可获取近五天的天气情况，一个接口就可以很方便地实现所需要的功能，我这里代码使用了`ES6`模板字符串，减少了对字符串拼接的操作

最后，祝大家新年快乐，2017和你一起~~~

[https_github.com_leoyaojy_c...]: https://github.com/leoyaojy/chrome-plugin-weather.git
[1460000008043145_w_301_h_511]: /images/20220711/38dfc608a50747daab450fe1bc57c705.png
[Link 1]: http://www.thinkpage.cn/
[Link 2]: http://www.thinkpage.cn/widget/intro