1、CSS概述
（1）默认样式、CSS选择器和Box模型
标签在浏览器中都有其默认样式。如果不想使用默认样式，可使用CSS更改其样式。
CSS选择器有以下几种：
》标签名选择器：div {...}
》类名选择器：.apple {...}，这里的apple为一个标签的类名class。
》ID选择器：#banana {...}，这里的banana为一个标签的ID。ID在一个HTML中是唯一的。
》选择器结合：div.apple {...}，这里是去设定类名为apple的div标签的样式。
》嵌套选择器：div .apple {...}，这里是去设置div标签下所有类名为apple的标签的样式。
》多个选择器：div, .apple, #banana {...}，一次性设置多个选择器，中间用逗号分隔。
》泛选择器：* {...}，设置所有元素的某个样式。
CSS的Box模型：
（2）元素定位
默认情况下，元素的position属性值为static，元素排列在正常的流中。position属性值还有另外三个选项值：
》absolute：位置是相对于除static定位以外的父系元素的，如果没有，则相对于body。
》relative：位置是相对于其在HTML流中的默认位置的。
》fixed：位置是相对于浏览器窗口的。
（3）字体和背景颜色
涉及到以下部分：
》font-size控制字体大小
》font-family控制字体类型
》color控制字体颜色
》line-height控制行高度
》background-image控制背景图片
》background-color控制背景颜色
》background-repeat控制背景图片重复方式
》background-position控制背景图片位置
2、Browser Actions
Browser Actions可将图标置于浏览器地址栏右侧，并可设置popup页面、标题以及badge等。
（1）图标设置，在manifest文件中设置：
同时可以使用setIcon方法动态改变：
chrome.browserAction.setIcon({imageData: .., path: ..., tabId: ...}, callback);（2）popup页面，即用户点击扩展图标时弹出的展示页面。这个使用方法在前边的教程中已经多次提到过，这里就不再赘述。只说一点需要注意的：
popup.html页面中尽量用来展示数据，而不是处理数据，且不要用来保存JS变量。因为当我们关闭popup页面时，就相当于关闭了标签页，里边的JS代码就会被退出。并且在重新打开时，JS代码重新执行。
（3）标题，即将鼠标悬停在扩展图标上显示的文字。也就是上边图片上的default_title。也可以利用API进行动态更改：
chrome.browserAction.setTitle({title: 'new title'}, callback);（4）Badge，即在图标上一直显示的文字。主要用来显示一些辅助信息，比如邮件的未读邮件数量、音乐播放的时间、订阅的未读信息数等。长度有限制，最长为4个字节。
目前我们只能通过Chrome的API来设置Badge的内容：
chrome.browserAction.setBadgeBackgroundColor({color: '#0000FF'});
chrome.browserAction.setBadgeText({text: '11'});Chrome不支持更改文字的颜色，默认都是白色，所以尽量避免选择浅色背景色。
注意：还有另外一种“Page Actions”，它和Browser Actions区别不大，主要区别在于：
》前者没有Badge选项，而后者有。
》前者的图标的可以动态设置显示或者隐藏，即有show和hide函数。
3、右键菜单
即用户在网页中单击右键时弹出来的选项菜单，它可以为用户提供很多便利的功能，比如翻译英语、复制指定信息、下载视频等。这里以翻译为例，说明其用法。
（1）在manifest文件中，设置后台运行JS文件：
并在permission中设置相关权限：
（2）Chrome提供了3种方法用于操作右键菜单：create，update和remove。右键菜单有4种，分别是普通菜单normal、复选菜单checkbox、单选菜单radio和分隔线separate。其中普通菜单还可以有下一级菜单。而连续相邻的单选菜单会被认为是同一设置的选项，Chrome会在其两端自动添加分隔线。
在创建菜单时，有以下几个设置：
》type，即菜单类型，就是我们上边提高的normal、checkbox、radio、separate等。
》title，即菜单显示的标题，比如我们这里的Google翻译。
》contexts，是一个数组，即设置在什么情况下显示自定义菜单，可选项有：al、page、frame、selection、link、editable、image、video、audio和launcher。
》documentUrlPatterns，即设置在标签Url符合什么规则时才显示菜单。
》targetUrlPatterns，即设置在目标Url符合什么规则时才显示菜单。
》onclick，即当我们单击菜单时调用的JS函数。传入的参数有菜单ID、页面URL等等
（3）编写translate函数，并将所有JS代码写入到background.js中。
此时我们的扩展就能在浏览器启动后开始工作了。如下图：
4、桌面提醒
桌面提醒的效果：
权限设置，即在permission中添加“notifications”权限。
桌面提醒的创建：
提醒被创建后，并不会自动显示，需要调用show函数：notification.show()。
同时Chrome为桌面提醒提供了4个事件：ondisplay, onerror, onclose, onclick。比如这里我们这是桌面提醒自动关闭：
5、omnibox
Chrome中的omnibox即为其地址栏。omnibox意思为多功能框，即表示Chrome的地址栏不止可以输入Url地址，还可以扩展其他应用。比如显示美元对应价格等。
（1）在manifest文件中设置omnibox关键词：
（2）Chrome的API提供以下几种函数：
chrome.omnibox.setDefaultSuggestion({'description':'Find current USD price.'});
chrome.omnibox.onInputStarted.addListener(function); # 事件监听
chrome.omnibox.onInputChanged.addListener(function); # 事件监听
chrome.omnibox.onInputEntered.addListener(function); # 事件监听
chrome.omnibox.onInputCancelled.addListener(function); # 事件监听更高级的内容，大家可自行百度。
=============================================================
作者主页：笑虎（Python爱好者，关注爬虫、数据分析、数据挖掘、数据可视化等）
作者专栏主页：撸代码，学知识 - 知乎专栏
作者GitHub主页：撸代码，学知识 - GitHub
欢迎大家拍砖、提意见。相互交流，共同进步！
==============================================================
