chrome extension - browser action

broser action 可以把扩展的图标放置在地址栏的右侧,除了图标还可以有 tooltip、badge 和 popup。

01.png

manifest


manifest.json中注册 browser action。

{
    ...
    "browser_action": {
        "default_icon": {                    // optional
            "16": "images/icon16.png",       // optional
            "24": "images/icon24.png",       // optional
            "32": "images/icon32.png"        // optional
        },
        "default_title": "foo",              // optional; shown in tooltip
        "default_popup": "popup.html"        // optional
    },
    ...
}

icon


chrome 中 browser action 的 icons 都是 16 dips(device-independent pixels)。大的图标会自动调整大小。

可以通过两种方式设置图标:

  • 静态的图片。可以是任何 webkit 可以显示的格式(BMP、GIF、ICO、JPEG & PNG)。没有打包的扩展,图片必须是 png 格式。
  • HTML5 canvas element

设置图标的方法:

tooltip


设置提示的方法:

当然提示的信息也可以本地化。

badge


browser action 可以额外的显示一个徽章。徽章是有限制大小的,所以最好是4个字符以下。

browserAction.setBadgeText设置徽章的文本。
browserAction.setBadgeBackgroundColor设置徽章的颜色。

popup


当用户单击图标时,popup 会出现。

添加 popup 的方法:

see also browser action

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容