谷歌拓展程序初体验

时间 2019-12-12

标签谷歌拓展程序体验栏目 Chrome 繁體版

原文原文链接

谷歌的拓展其实就是一(几)个网页而已拉, 1分钟就能够很容易弄起来一个谷歌拓展. 因此gogogo.前端

简单的介绍

什么是chrome拓展

因此chrome拓展乃谷歌chrome提供的可在浏览器上作一些小程序的功能. 编写的方式就是普通的前端网页技术. 功能不少不少. 这篇文章也只是讲不多一部分. 可能一些别的浏览器也支持chrome拓展, 我并无仔细看.vue

如何加载/打包拓展程序

在浏览器地址栏输入chrome://extensions/就能够看到拓展啦. 这里简单说一下4个按钮:git

右上角Developer mode勾选之后进入了开发者模式
下方Get more extensions能够进入商店选择别人写的拓展
正中的位置左边的按钮Load unpacked extension是开发的时候加载的按钮
正中的位置右边的按钮Pack extension做用是打包完成的拓展.

而后的话若是能够把本身开发的拓展注册在谷歌上. 也不贵.github

一个能够运行的拓展程序的组成部分

只要Load unpacked extension成功就能够算一个拓展了. 一个拓展须要:web

一个文件夹, 加载的时候就加载他.
一个manifest.json文件.

好了. chrome

那么manifest.json的内容呢, 以下:json

{
    "name": "myExt",
    "version": "extVersion",
    "manifest_version": 2
}

没错, 只须要3个字段拓展就ok了. manifest_version必定是数字2. 其余的为字符串, 内容随意.小程序

经常使用内容介绍

chrome拓展的文档在这, manifest的字段不少, api更多. 这个章节讲一些经常使用的api和插件运行方式.后端

manifest

description: 项目描述
icons: 显示在拓展界面的图表
browser_action: 拓展对浏览器的影响. (好比小图标的显示, 右击菜单等)
content_scripts: 对访问的页面进行操做的脚本.
background: 后台, 这个后面会讲
options_page: 选项卡的页面, 右击拓展图表会有选项的选项. 点击会进入这个配置的页面.
perissions: 需求的权限. 你的拓展能够调用的api的权限在这分配. 固然也回在用户加载你的拓展的时候被提示. 这是一些影响很大的权限. 好比操做storage(随用户名漫游的), 桌面提醒(与web的api是不一样的), 操做书签(这个真的厉害了, 能够清空你全部书签), 右击菜单(这个也很帅)等.

后台

咱们的拓展在browser_action中能够指定default_popup字段来指定一个点击图表后弹出的页面, 其实也就是拓展的主界面(也有不少拓展没有弹出页面). 这个页面用于展现, 关闭当前页面或者关闭弹出也就会关闭这个页面, 因此没法进行数据的保存.api

那么数据的保存就有background指定的文件来作. 打开浏览器后background就会在后台运行. 而且他是有页面的(通常不指定, 由于大多状况没有意义). 在这里能够保存数据, 操做api.

也就是说后台相似于服务端, 弹出页面相似于前端. 他们的交互由api实现. 而且交互的api有个比较坑的地方, 接口须要即便相应, 只要有等待的操做会当即返回undefined, 具体原理或者是否可配置尚未深刻.

API

好拉稍微介绍几个api. 这些api一般在background中调用的, 缘由在上节说了, 少部分在弹出页面调用.

消息传递

这个api很重要, 等因而前端后端的协议了. 用起来很简单, 可是以为坑也是有的, 在上节已经提到一个了. 而后他没有相似'事件名字'意思的字段, 就直接发个数据, 另外每次传递数据会带着当前tab的信息的. 我就为这个消息作了最简单的封装:

class sender {
    send(event, data = null) {
        return new Promise((resolve) => {
            chrome.runtime.sendMessage({request: event, data: data}, function (response) {
                resolve(response);
            });
        });
    }
}
class reciever {
    constructor() {
        this.events = {};
        chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
            message.request && this.events[message.request] && sendResponse(this.events[message.request](message.data));
        });
    }

    on(event, fn) {
        this.events[event] = fn;
        return this;
    }
}
export let Message = {
    get sender() {
        return new sender();
    },
    get reciever() {
        return new reciever();
    }
};

桌面提示

这个桌面提示与h5接口略有不一样, 能够改变, 能够销毁, 弹出的签名不是当前网站的host, 固然也不会requestPermission. 而后每一个提示是有id的. 没有仔细想, 若是须要维护id的话应该比较花功夫. 这个是个极简版的:

export let notifier = {
    pop: (content, title = "友情提示", ico = "../imgs/ruby_q.png") => {
        chrome.notifications.create({
            type: "basic",
            iconUrl: ico,
            title: title,
            message: content
        }, (cb) => {
            console.log(cb);
        });
    }
};

badge

badge能够设置颜色, badge内容. 由于badge通常是个消息条数, 提示条数的东西, 限制3个字符(多是4个), 超过长度会被省略号代替.

export let badge = {
    setColor(color) {
        chrome.browserAction.setBadgeBackgroundColor({color: color});
    },
    setText(text, color) {
        chrome.browserAction.setBadgeText({text: text.toString()});
        if (color)
            this.setColor(color);
    },
    clear() {
        chrome.browserAction.setBadgeText({text: ""});
    }
};

储存

储存分为2种, 一种为chrome.storage.local, 本地储存, 另一种chrome.storage.sync同步储存, 若是没有登陆用户或者没有网的时候行为会与本地储存一致. 他与h5的storage也是不一样的. h5的只能存字符串. 他能够存数组, 对象什么的. 这个我看来要使用仍是须要作一些处理:

export let storage = {
    set(key, value) {
        let obj = {};
        obj[key] = value;
        return new Promise((resolve) => {
            chrome.storage.sync.set(obj, (callback) => {
                resolve(`ok${callback}`);
            })
        });
    },
    get(key) {
        return new Promise((resolve) => {
            chrome.storage.sync.get(key, (callback) => {
                resolve(callback[key]);
            });
        });
    },
    getAll() {
        return new Promise((resolve) => {
            chrome.storage.sync.get((callback) => {
                resolve(callback);
            });
        })
    },
    sAdd(set, key, value) {
        return this.get(set)
            .then((result) => {
                result = result || {};
                result[key] = value;
                return this.set(set, result);
            });
    },
    sGet(set, key) {
        return this.get(set)
            .then((result) => {
                return (result && result[key]) ? Promise.resolve(result[key]) : Promise.reject("set not found");
            });
    },
    sRem(set, key) {
        return this.get(set)
            .then((result) => {
                if (result && result[key]) {
                    delete result[key];
                    return this.set(set, result);
                } else {
                    return Promise.reject("set not found");
                }
            });
    },
    remove(key) {
        return new Promise((resolve) => {
            chrome.storage.sync.remove(key, (callback) => {
                resolve(callback);
            })
        });
    }
};

告一段落

试水过程当中顺带用vue(试水++) 作了前端(并无画样式) 作了一些小功能. 感受不错. 未来能够拓展做为方便的小工具啦.

原文地址