扩展的交互形式与实现.md

扩展的交互形式与实现

总结下chrome扩展的交互形式无外乎以下几种:

扩展图标(C3/browser_actions_icon)

图标不光可以定义,也可以设置一些动作和更新效果

• chrome.browserAction.setIcon({ path: { '19': 'images/icon19_' + index + '.png' } }) 设置图标

标题

标题是把鼠标放在扩展图标上过段时候后会出来的文字描述

• chrome.browserAction.setTitle({title: 'This is a new title'}) 设置标题

badge(EX/badge)

badge指的是图标最下面的一行, 比如邮件应用,就可以使用badge来显示未读邮件

• chrome.browserAction.setBadgeBackgroundColor({color: '#0000FF'}) 设置badge的底色
• chrome.browserAction.setBadgeText({text: 'Dog'}) 设置badge的文字内容

扩展界面ui(popup)(C1/my_clock)

这个是最常规的交互方式,通过点击插件图标激活下拉界面实现交互

popup本质上就是一个html文件,可以理解为点击图标就打开了一个本地的webapp

popup的设置在manifest.json中的browser_action.default_popup中指定path

右键菜单(C3/google_translate)

右键菜单可以定义一些全局页面工具,比如全页面图片下载呀啥的

右键菜单需要在manifest.json中的permissions字段中设置contextMenus权限

在脚本中则要在background中使用

chrome.contextMenus.create({
    'type': 'normal',
    'title': 'title',
    'contexts': ['selection'],
    'id': 'cn',
    'onclick': translate
})

来创建出这个菜单.

完整的chrome.contextMenus接口为

declare namespace chrome.contextMenus {
    interface OnClickData {
        selectionText?: string;
        checked?: boolean;
        menuItemId: any;
        frameUrl?: string;
        editable: boolean;
        mediaType?: string;
        wasChecked?: boolean;
        pageUrl: string;
        linkUrl?: string;
        parentMenuItemId?: any;
        srcUrl?: string;
    }
    interface CreateProperties {
        documentUrlPatterns?: string[];
        checked?: boolean;
        title?: string;
        contexts?: string[];
        enabled?: boolean;
        targetUrlPatterns?: string[];
        onclick?: (info: OnClickData, tab: chrome.tabs.Tab) => void;
        parentId?: any;
        type?: string;
        id?: string;
    }
    interface UpdateProperties {
        documentUrlPatterns?: string[];
        checked?: boolean;
        title?: string;
        contexts?: string[];
        enabled?: boolean;
        targetUrlPatterns?: string[];
        onclick?: Function;
        parentId?: any;
        type?: string;
    }

    interface MenuClickedEvent extends chrome.events.Event<(info: OnClickData, tab?: chrome.tabs.Tab) => void> {}
    var ACTION_MENU_TOP_LEVEL_LIMIT: number;
    export function removeAll(callback?: () => void): void;
    export function create(createProperties: CreateProperties, callback?: () => void): void;
    export function update(id: string, updateProperties: UpdateProperties, callback?: () => void): void;
    export function update(id: number, updateProperties: UpdateProperties, callback?: () => void): void;
    export function remove(menuItemId: string, callback?: () => void): void;
    export function remove(menuItemId: number, callback?: () => void): void;
    var onClicked: MenuClickedEvent;
}

桌面提醒(EX/notification)

比如音乐应用,换歌就可以用这个.我们可以用chrome接口,也可以使用html5接口,本处以chrome接口为例

要使用桌面提醒,必须在manifest.json中的permissions字段中设置notifications权限.

接着在需要的地方使用chrome.notifications.create(notification)创建并触发提醒.

notifications的接口为:

declare namespace chrome.notifications {
    interface ButtonOptions {
        title: string;
        iconUrl?: string;
    }

    interface ItemOptions {
        title: string;
        message: string;
    }

    interface NotificationOptions {
        type?: string;
        iconUrl?: string;
        title?: string;

        message?: string;

        contextMessage?: string;

        priority?: number;

        eventTime?: number;

        buttons?: ButtonOptions[];
        items?: ItemOptions[];
        progress?: number;
        isClickable?: boolean;
        appIconMaskUrl?: string;
        imageUrl?: string;
    }

    interface NotificationClosedEvent extends chrome.events.Event<(notificationId: string, byUser: boolean) => void> {}

    interface NotificationClickedEvent extends chrome.events.Event<(notificationId: string) => void> {}

    interface NotificationButtonClickedEvent extends chrome.events.Event<(notificationId: string, buttonIndex: number) => void> {}

    interface NotificationPermissionLevelChangedEvent extends chrome.events.Event<(level: string) => void> {}

    interface NotificationShowSettingsEvent extends chrome.events.Event<() => void> {}

    export var onClosed: NotificationClosedEvent;
    export var onClicked: NotificationClickedEvent;
    export var onButtonClicked: NotificationButtonClickedEvent;
    export var onPermissionLevelChanged: NotificationPermissionLevelChangedEvent;
    export var onShowSettings: NotificationShowSettingsEvent;
    export function create(notificationId: string, options: NotificationOptions, callback?: (notificationId: string) => void): void;
    export function create(options: NotificationOptions, callback?: (notificationId: string) => void): void;
    export function update(notificationId: string, options: NotificationOptions, callback?: (wasUpdated: boolean) => void): void;
    export function clear(notificationId: string, callback?: (wasCleared: boolean) => void): void;
    export function getAll(callback: (notifications: Object) => void): void;
    export function getPermissionLevel(callback: (level: string) => void): void;
}

Omnibox(C3/usd_price)

使用地址栏通过关键字激活交互

需要在manifest.json中的设置

"omnibox": {
    "keyword": "usd"
}

之后就可以在backend中使用chrome.omnibox了

chrome.omnibox的接口为:

namespace chrome.omnibox {
    interface SuggestResult {
        content: string;
        description: string;
    }

    interface Suggestion {
        description: string;
    }

    interface OmniboxInputEnteredEvent extends chrome.events.Event<(text: string) => void> {}

    interface OmniboxInputChangedEvent extends chrome.events.Event<(text: string, suggest: (suggestResults: SuggestResult[]) => void) => void> {}

    interface OmniboxInputStartedEvent extends chrome.events.Event<() => void> {}

    interface OmniboxInputCancelledEvent extends chrome.events.Event<() => void> {}
    export function setDefaultSuggestion(suggestion: Suggestion): void;
    var onInputEntered: OmniboxInputEnteredEvent;
    var onInputChanged: OmniboxInputChangedEvent;
    var onInputStarted: OmniboxInputStartedEvent;
    var onInputCancelled: OmniboxInputCancelledEvent;
}