w3ctech

Chrome 扩展开发笔记

前段时间看了下@Sneezry 同学的新书《Chrome扩展及应用开发》,随便在印象笔记里记了点东西,搬出来(哈哈,混满五篇再说)...

首先当然是新建一个文件夹咯,把扩展的文件放进去。最简单的一个扩展包含的文件比如:

images(图片)
js文件
manifest.json(必须要有)
html文件

Chrome扩展都包含一个Manifest文件——manifest.json,这个文件可以告诉Chrome关于这个扩展的相关信息,它是整个扩展的入口,也是Chrome扩展必不可少的部分。 Chrome扩展的Manifest文件必须包含name、version和manifest_version属性,目前来说manifest_version属性值只能为数字2,对于应用来说,还必须包含app属性。

其他常用的可选属性还有browser_action、page_action、background、permissions、options_page、content_scripts,所以我们可以保留一份manifest.json模板,当编写新的扩展时直接填入相应的属性值。如果我们需要的属性不在这个模板中,可以再去查阅官方文档,但我想这样的一份模板可以应对大部分的扩展了。

{
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    },
    "manifest_version": 2,
    "name": "My Extension",
    "version": "versionString",
    "default_locale": "en",
    "description": "A plain text 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": "Extension Title",
        "default_popup": "popup.html"
    },
    "page_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "Extension Title",
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
            "matches": ["http://www.google.com/*"],
            "css": ["mystyles.css"],
            "js": ["jquery.js", "myscript.js"]
        }
    ],
    "options_page": "options.html",
    "permissions": [
        "*://www.google.com/*"
    ],
    "web_accessible_resources": [
        "images/*.png"
    ]
}

其中Manifest的content_scripts属性值为数组类型,数组的每个元素可以包含matches、exclude_matches、css、js、run_at、all_frames、include_globs和exclude_globs等属性。其中matches属性定义了哪些页面会被注入脚本,exclude_matches则定义了哪些页面不会被注入脚本,css和js对应要注入的样式表和JavaScript,run_at定义了何时进行注入,all_frames定义脚本是否会注入到嵌入式框架中,include_globs和exclude_globs则是全局URL匹配,最终脚本是否会被注入由matches、exclude_matches、include_globs和exclude_globs的值共同决定。简单的说,如果URL匹配mathces值的同时也匹配include_globs的值,会被注入;如果URL匹配exclude_matches的值或者匹配exclude_globs的值,则不会被注入。

content_scripts中的脚本只是共享页面的DOM1,而并不共享页面内嵌JavaScript的命名空间。也就是说,如果当前页面中的JavaScript有一个全局变量a,content_scripts中注入的脚本也可以有一个全局变量a,两者不会相互干扰。当然你也无法通过content_scripts访问到页面本身内嵌JavaScript的变量和函数。

其中 Manifest的permissions属性中声明需要跨域的权限。

在Manifest中指定background域可以使扩展常驻后台。background可以包含三种属性,分别是scripts、page和persistent。如果指定了scripts属性,则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面;如果指定了page属性,则Chrome会将指定的HTML文件作为后台页面运行。通常我们只需要使用scripts属性即可,除非在后台页面中需要构建特殊的HTML——但一般情况下后台页面的HTML我们是看不到的。persistent属性定义了常驻后台的方式——当其值为true时,表示扩展将一直在后台运行,无论其是否正在工作;当其值为false时,表示扩展在后台按需运行,这就是Chrome后来提出的Event Page。Event Page可以有效减小扩展对内存的消耗,如非必要,请将persistent设置为false。persistent的默认值为true。

Manifest里的 "options_page" 为开发者提供一个扩展选项页面的接口。

一般Chrome扩展使用以下三种方法中的一种来储存数据:第一种是使用HTML5的localStorage,这种方法在上一节的内容中已经涉及;第二种是使用Chrome提供的存储API;第三种是使用Web SQL Database。 使用Chrome存储API必须要在Manifest的permissions中声明"storage",之后才有权限调用。Chrome存储API提供了2种储存区域,分别是sync和local。两种储存区域的区别在于,sync储存的区域会根据用户当前在Chrome上登陆的Google账户自动同步数据,当无可用网络连接可用时,sync区域对数据的读写和local区域对数据的读写行为一致。

Manifest 里的 Browser Actions 是设置一个默认的图标显示在浏览器上(一般是19px或38px),但是default_icon也不是必须指定的,如果没有指定,Chrome将使用一个默认图标。

Manifest 里的Page Actions与Browser Actions非常类似,除了Page Actions没有badge外,其他Browser Actions所有的方法Page Actions都有。另外的区别就是,Page Actions并不像Browser Actions那样一直显示图标,而是可以在特定标签特定情况下显示或隐藏,所以它还具有独有的show和hide方法。

chrome.pageAction.show(integer tabId);
chrome.pageAction.hide(integer tabId);

tabId为标签id,可以通过tabs接口获取,有关tab相关的内容将在后面进行讲解。

Chrome 主题制作

Chrome主题与扩展和应用的结构类似,包含一个Manifest文件和一些图片资源。主题的Manifest结构如下:

{
    "version": "2.6",
    "name": "camo theme",
    "theme": {
        "images" : {
            "theme_frame" : "images/theme_frame_camo.png",
            "theme_frame_overlay" : "images/theme_frame_stripe.png",
            "theme_toolbar" : "images/theme_toolbar_camo.png",
            "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
            "theme_ntp_attribution" : "images/attribution.png"
        },
        "colors" : {
            "frame" : [71, 105, 91],
            "toolbar" : [207, 221, 192],
            "ntp_text" : [20, 40, 0],
            "ntp_link" : [36, 70, 0],
            "ntp_section" : [207, 221, 192],
            "button_background" : [255, 255, 255]
        },
        "tints" : {
            "buttons" : [0.33, 0.5, 0.47]
        },
        "properties" : {
            "ntp_background_alignment" : "bottom"
        }
    }
}

颜色使用RGB格式,即[r, g, b]。图片路径使用基于主题包根路径的相对路径。properties定义了图片的位置和repeat属性。tints定义了按钮、框架和后台标签页等某些部分的色调,使用HSL格式,取值范围为0到1的浮点型数据。

还有 chrome 应用的开发笔记没记了,可以去参考 《Chrome应用开发》

前端圈微信

扫码关注前端圈微信公众号

共收到2条回复

  • 把你的地址告诉我哈,我给你寄书。

    回复此楼
  • 你得到一本书要不要考虑咱去海底捞吃一屯页啊。。。

    回复此楼