《中午吃什么？》制作一个简单的chrome扩展

有人找你解决一个小问题,你可能花几分钟编程,完美解决,但对方的计算机却没有程序运行的环境,有些老旧windows系统,甚至不能安装环境...
最好的解决方式,就是用js编写程序,直接放到对方的浏览器里运行,毕竟也没有那个浏览器不支持js,如果对方安装了chrome内核的浏览器,你可以直接把程序改成chrome扩展,打包发给对方,问题也就很轻松的完美解决了.

当然如果你的扩展足够好,你可以把扩展上传到google商店,让全世界的用户,都能使用你的程序.

想做到这些,你得先知道chrome的扩展的开发流程是什么!

chrome商店

我们要做这样一个小玩意儿:

动图_效果演示

什么是扩展:

可以简单把扩展理解为浏览器的插件.

扩展的结构

从结构来看,扩展像是一个配置文件(manifest.json),加一个完整的网页(包括html, css , js, images)

目录结构

先设计图标

要设计5种尺寸的图标(作者不是专业的UI设计师,这里只是做个示范),建议导出为png格式.

图标设计

完成配置文件

相当于填表,可以把下面的代码复制,然后替换为自己的信息,就可以用了!

//配置文件
{    "manifest_version": 2,
    //定义扩展的名称    "name": "吃什么?",
    // 定义扩展的版本    "version": "1.0",
    // 定义扩展的描述    "description": "解决吃什么的难题,从此不再纠结'吃什么'...",
    // 定义 不同尺寸 图标的位置    "icons": {        "16": "images/icon16.png",        "48": "images/icon48.png",        "128": "images/icon128.png"
    },
    // 定义放在工具栏的图标的位置    "browser_action": {        "default_icon": {            "19": "images/icon19.png",            "38": "images/icon38.png"
        },
        // 定义默认的标题        "default_title": "吃什么?",
        // 定义运行扩展后默认打开的文件        "default_popup": "index.html"
    }
}

写主程序(一个完整的网页):

其实就是写一个带有后台逻辑的网页,我已经把代码相关注释标注完整,附在了文末...
完整的资源文件也放在了文末网盘链接里,需要的可以自取...

装载主程序:

1. 打开chrome浏览器,在地址栏键入chrome://extentions,回车

跳转扩展页面

2.打开开发者模式:

勾选开发者模式

3.点击"加载已解压的扩展程序"

加载扩展

选择最外层的文件夹

完整选取

加载成功

加载成功

运行效果:

动图_运行效果

主要逻辑代码:

index.js

window.onload = function () {    function choose_menu(){        var menus  = ["馄饨","拉面", "烩面", "热干面", "刀削面", "油泼面", "炸酱面", "炒面", "重庆小面", "米线", "酸辣粉", "土豆粉",            "螺狮粉", "凉皮儿", "麻辣烫肉夹馍", "羊肉汤", "炒饭", "盖浇饭", "卤肉饭", "烤肉饭", "黄焖鸡米饭", "驴肉火烧", "川菜",            "麻辣香锅", "火锅", "酸菜鱼", "烤串","披萨", "烤鸭", "汉堡", "炸鸡", "寿司", "蟹黄包", "粽子", "煎饼果子", "生煎", "炒年糕"];        // 生成一个0到1的随机数
        random_num = Math.random();        //将随机数扩大N倍 (N为数组的长度), 然后取整,获得随机的索引!

        menus_index = parseInt(random_num * (menus.length));        // 获得食物
        the_menu = menus[menus_index];        // 返回食物
        return the_menu

    }    // 预先定义食物变量
    var my_food;    //获取两个元素对象
    var btn = document.getElementById("ibtn");    var best_food = document.getElementById("ifood");    // 点击按钮后的事件
    btn.onclick = (function () {        // 获取新食物
        var new_food;
        new_food = choose_menu();        // 将这次的食物与上次对比,如果不相同,则替换为 新食物的名称
        if (new_food != my_food){

            my_food = new_food;

        }        //如果和上次重复了,就自动再抽一次,如果又重复了(遇到几率这么的情况,实属不易),建议这顿就吃个吧!

        else{

            new_food = choose_menu()

        }        // 更新显示的食物名称

        best_food.innerHTML= the_menu;        // 更新按钮显示的文字,只是第一次起作用
        btn.innerHTML = "换一个";

    })
    
};