前段时间看了下@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应用开发》

扫码关注w3ctech微信公众号