如何开发Chrome扩展程序 - 文章 - 伯乐在线
& 如何开发Chrome扩展程序
伯乐在线注：上周在微博推荐了英文原文，感谢
的翻译，感谢
校稿。如果其他朋友也有不错的原创或译文，可以尝试。
我真的很喜欢Chrome浏览器，这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript，那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩展有基本了解的速成班，但我在这个方面也不敢自称是专家，如果你在文章中发现任何错误，请一定让我知道。
为了着手创建你的扩展程序，你只需要为你的扩展创建一个文件夹。程序所必须的文件只有manifest.json.，不过也推荐准备一些图片用作图标，和至少一个JavaScript以提供功能。一般来说还会包含HTML文档、样式表、图片等等其他的资源。
Manifest文件
每个扩展都必须在其根目录下包含一个manifest.json文件。
这个文件里面声明了扩展的名称、版本、权限、设置选项和其他的一些和扩展相关的元数据。Manifest v1早在Chrome 18便已被弃用，而且会根据逐渐淘汰使用Manifest v1的扩展。如果你在参考一些旧扩展的Manifest文件的话，请确认添加"manifest_version": 2.
Google发布的
大多数扩展都会在其manfiest.json文件内有这样的内容：
&background&: {
&scripts&: [&index.js&, &other.js&]
{&&"background": {&&&&"scripts": ["index.js", "other.js"]&&}}
这一段代码指定了两个需要被加载而且要保持在后台运行的脚本，这些脚本会在扩展的后台页运行。是一个在扩展的进程中生成并运行的页面，存在时间会和扩展的生命周期等长。后台页可用来作为扩展的其他界面的控制器，用来维护某个状态或者保持某些活动。如果你需要用后台页来声明一些标记来用，可以把一个HTML文件名指定给page选项。
后台页会从扩展被加载的时候被装载，而且会一直留在内存里。这是因为如果有些状态需要被长时间维护，或者需要被扩展的其他部分访问。但是如果你没有这个需求，那么应该尽可能的使用事件页。其实只是相当于一个包含了”persistent”: false条目的后台页，这一行语句告诉Chrome可以不需要把后台页保留在内存里。相对来说，事件页也会在最开始被装载，但是一旦指定的脚本运行完毕，事件页便会从内存卸载，而且会在需要的时候被再次加载（比如用来回应某些操作）。
以上便是在为扩展添加功能之前所需要知道的。
利用Google提供的大量API，你的扩展与浏览器交互或者为用户提供功能都变得方便。
chrome.* APIs
Chrome的程序和扩展程序都非常喜欢调用，这些API可以让你通过不同的方式来操控浏览器，API通常会在后台脚本里面被调用，这是我找到的一些常用API：
标签页：新建、刷新、关闭、访问和操控标签页
历史：访问用户浏览历史
书签：添加、编辑、移除和搜索用户书签
事件：监听或者管理浏览器发生的事件
命令：添加或者改变键盘命令
右键：添加条目到右键下文菜单
多功能框（地址栏）：添加多功能框关键字，使用户可以向扩展发送指令或者激活扩展
Chrome程序和扩展程序通常也会用到，包括如本地存储、地理位置、缓存、画布等新型的HTML5 API。你也可以用普通的JavaScript或者webkit API来实现。
有些Chrome API的功能必须要在manifest.json文件中声明相关权限才能被调用，通过在permissions 域中把值设成相应权限名称，或者是通识符组成的数组。
&permissions&: [
&contextMenus&,
&https://developer.mozilla.org/*&
{&&"permissions": [&&&&"contextMenus",&&&&"tabs",&&&&"https:///*&,&&&&"https://developer.mozilla.org/*&&&]}
在这一段声明代码中，数组中的头两个字符串是分别用来为chrome.contextMenus和chrome.tabs
的API授权的，最后的两个字符串则是用来匹配以 / 和 https://developer.mozilla.org/ 开头的地址。
Chrome扩展的用户界面有着严格的限制，但是根据扩展的需要却可以有不同形式的界面。
浏览器按钮[a]
允许你在右上角放置一个的16 x 16像素的图标，如果扩展应用的界面是全局的，而不是针对某个页面，那就应该使用浏览器操作。如果要使用浏览器按钮，你必须在manifest.json中的browser_action域中做如下声明：
&browser_action&: {
&default_icon&: {
&19&: &images/icon19.png&,
&38&: &images/icon38.png&
&default_title&: &tooltip text here&,
&default_popup&: &popup.html&
12345678910
{&&"browser_action": {&&&&"default_icon": {&&&&&&&&&&&&&&&&&&&&&&&&&&"19": "images/icon19.png",&&&&&&"38": "images/icon38.png"&&&&},&&&&"default_title": "tooltip text here",&&&&"default_popup": "popup.html"&&}}
一个浏览器按钮可以有一个图标、提示、文字标记和一个弹出内容，文字标记可以将极少的文字（4字符）动态的覆盖在浏览器操作的图标上，你也可以通过API来对浏览器按钮相关的事件做出反应。
允许你在多功能栏（地址栏）右边添加一个按钮，其实他和浏览器按钮很相似，区别之处在于页面按钮是专门用来处理某些指定的页面的。页面按钮必须在manfiest.json中声明， page_action域的使用和浏览器按钮一样。页面按钮可以通过 API控制，可以在不同的标签页中灵活的显示或者隐藏。页面按钮也可以设置图标、提示和弹出内容，和浏览器按钮不同的是其没有文字标记功能。
是另一个提供用户界面，方便用户和扩展交互的方式。Chrome的右键菜单通过右键激活，但根据激活内容的变化，菜单内容也会做相应改变。
API允许你向为不同内容激活的右键菜单添加项目，若要使用此API，则在manifest.json文件中声明相应的contextMenus权限。
目前可用的激活内容有：
all, page, frame, selection, link, editable,image, video,
对应：所有内容、页面、框架、选择、链接、可编辑、图像、视频、音频，以下这个例子需要contextMenus 和tabs权限，他可以使扩展为右键菜单添加一个根项目，然后添加一个子菜单，用来复制当前的页面到一个新选项卡。[b]
var root = chrome.contextMenus.create({
title: 'MyExtension',
contexts: ['page']
}, function () {
var subMenu = chrome.contextMenus.create({
title: 'Duplicate Tab'
contexts: ['page'],
parentId: root,
onclick: function (evt) {
chrome.tabs.create({ url: evt.pageUrl })
12345678910111213
var root = chrome.contextMenus.create({&& title: 'MyExtension',&& contexts: ['page']}, function () {&& var subMenu = chrome.contextMenus.create({&&&&&& title: 'Duplicate Tab'&&&&&& contexts: ['page'],&&&&&& parentId: root,&&&&&& onclick: function (evt) {&&&&&&&&&& chrome.tabs.create({ url: evt.pageUrl })&&&&&& }&& });});
Chrome把地址栏/搜索栏称为多功能框，通过 API，他可以让扩展有另一个界面。通过API 可以设置一个特定的激活字符串，当这个字符串被键入多功能框时扩展便可以对其做出反应。在manifest.json中做如下声明：
&omnibox&: {
&keyword&: &ext-&
{&&"omnibox": {&&&&"keyword": "ext-"&&}}
这部分代码会把ext-作为激活字符串，当用户键入ext-并按下SPACE键或者TAB键时扩展会被激活。激活字符串必须通过manifest.json文件声明，故也不能通过JavaScript来更改。用户可以通过右键单击多功能框—–修改搜索引擎来更改。激活字符串是大小写敏感的，同时想为一个扩展声明多个激活字符串也是不可以的。
chrome.omnibox API可以让你添加激活字符串被键入之后的修改或者输入的事件处理器。
是一个的常见的用户界面，在chrome://extensions里可以通过单击扩展右边的选项按钮来打开。通常这个页面会和存储API结合使用，以用来在计算机上为用户保存设置。而使用脚本通过API来打开选项页面也是可以的。
允许你完全替代一个以下指定页面（一个扩展程序只能重载一个页面）
书签管理器
通过访问chrome://bookmarks或者Chrome菜单打开的页面
通过访问chrome://history或者Chrome菜单打开的页面
通过访问chrome://newtab或者新建选项卡出现的页面
这些被替换的页面必须在manifest.json文件中如下声明chrome_url_overrides域：
&chrome_url_overrides&: {
&bookmarks&: &newBookmarkManager.html&
{&&"chrome_url_overrides": {&&&&"bookmarks": "newBookmarkManager.html"&&}}
是和你的扩展有关，在网页中运行的脚本。这个脚本可以让你访问页面里相应的DOM元素，你可以像这样在manifest.json里通过指定content_scripts域定义一个内容脚本数组：
&content_scripts&: [
&matches&: [&/*&],
&css&: [&custom-google-styles.css&],
&js&: [&custom-google-script-1.js&, &custom-google-script-2.js&]
&matches&: [&http://*&],
&css&: [&global-styles.css&],
&js&: [&global-script.js&]
1234567891011121314
{&&"content_scripts": [&&&&{&&&&&&"matches": ["http:///*&],&&&&&&"css": ["custom-google-styles.css"],&&&&&&"js": ["custom-google-script-1.js", "custom-google-script-2.js"]&&&&},&&&&{&&&&&&"matches": ["http://*&],&&&&&&"css": ["global-styles.css"],&&&&&&"js": ["global-script.js"]&&&&}&&]}
你也可以用通过chrome.tabs API以动态的把JavaScript或者CSS。
内容脚本有以下限制：
不能使用chrome.* API （chrome.extension的部分除外）
不能使用由扩展脚本定义的变量或函数
不能使用由网页所定义的变量或函数
不能使用由其他内容脚本定义的变量或函数
内容脚本可以通过消息传递间接的使用chrome.* API，或者是和扩展脚本交互。
Chrome有一个非常棒的样例程序页面，你可以通过他们调用了哪些API来搜索样例扩展，你也可以阅读我第一个扩展程序相关的。。
关于作者：
可能感兴趣的话题
看起来很不错7样子，学习了
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线您的举报已经提交成功，我们将尽快处理，谢谢！
google 输入 youtube downloader for chrome 然后在第一个网站里
http://www.chromeextensions.or...
大家还关注
(window.slotbydup=window.slotbydup || []).push({
id: '2081942',
container: s,
size: '1000,60',
display: 'inlay-fix'如何安装Chrome插件-简网APP工场
如何安装Chrome插件
1、 准备工作，首先你要拥有一个Chrome浏览器，其次，要有一个gmail邮箱。然后，用你的gmail邮箱登陆Chrome浏览器。2、登陆方法：点击Chrome浏览器最右侧的“三条杠”图标，选择“登陆到Chrome”。输入Gmail邮箱地址和密码，点击“登陆”。3、 打开cms后台()，点击“Chrome浏览器插件”。4、点击“Chrome插件XXXX”这段文字，下载插件到你的电脑。如果你会翻墙，可跳过此步，直接点击“Chrome商店安装”即可。在“三道杠”图标下，找到“下载内容”列表5、 点击“在文件夹中显示”或“打开下载内容文件夹”。6、 找到“extension .crx”文件名7、 切换到 Chrome 浏览器，点击“三道框”图标，在下拉菜单中，找到“工具”，在工具菜单中，点击 “扩展程序”，然后将“extension .crx”文件，拖到“扩展程序”中。8、 会弹出一个“要添加到收藏到应用”窗口，点击添加即可。
京公网安备54号
请点击这里
然后选择“在Safari中打开”您现在的位置是：&>&&>& &
谷歌浏览器2014插件怎么使用?
　　谷歌2014除了可以浏览网页之外，还应该是个&全能选手&。谷歌的Chrome，其最大的魅力就在于可以安装各种扩展插件，让Chrome自身的功能更加丰富。在Google Chrome网上应用店，用户可以下载和安装应用程序、扩展程序以及主题背景。
　　1、快捷工具 支持自定义快速访问菜单，保存未提交表单数据，快捷键，网址一键通，原始图片查看，图片放大镜，设置图片为桌面背景，独立视频
　　2、迅雷/快车/旋风专用链转换 && Private Link Support
　　3、广告终结者广告的方式也在更新，你可以自定义去除广告
　　4、Adblock+Element Hiding Helper，图标是这个样子的，这是插件的功能是消除动态广告的，我们在上一些论坛的时候，就会有很多那种闪啊闪的动态图片广告，这个插件就能够帮我们屏蔽掉那些烦人的广告，一方面使页面更加清爽，另一方面也能够加快网页打开速度。
　　5、Sexy Undo Close Tab，这也是我们平时常用的按钮，可以打开被我们不小心关闭的标签，非常实用。而且我们可以设置它保存已被关闭标签的数量，非常方便。
　　6、Lightshot，这是一款截图工具，跟QQ的截图工具是一样的，这样的话以后不用开QQ就能截图。接下来是一款非常实用的插件是IE Tab Multi，这是在谷歌中模拟出一个IE核心。网上有些功能非要用IE才能使用，这就是我们中国的网络公司所标榜的双核原因所在。谷歌核心打开网页速度快，IE核心虽然速度慢，但是介于历史原因使用很广。现在的诸如网银、网上支付的使用非要使用IE核心。IE Tab Multi可以很方便地解决这个问题，一键切换，非常简易。
　　7、微博控必备：FaWave(发微)
　　微博已经成为很多人每天必不可少的一部分，即使只看不发，每天也必需开着。FaWave(发微)是一款支持多微博绑定的Chrome扩展程序，各微博有新消息时可同时提示，互不干扰。FaWave(发微)除了支持新浪微博、腾讯微博、豆瓣、饭否等国内微博，还支持Twitter、Facebook等国外知名社交网站。安装好之后打开&选项&，开始设置FaWave(发微)。
　　首先，可以在&基本设置&中对获取信息间隔时间、新信息提示方式、多账号发送选择等基本项目进行设置。
　　基本设置
　　接下来，点击上方的标签进入&帐号设置&，添加经常光顾的微博。FaWave(发微)默认使用oAuth验证方式进行账号绑定，在下拉列表中选择要绑定的微博网站，然后点击&点此获取授权码&按钮，会弹出一个新页面。
　　帐号设置
　　在新页面中输入你在该微博的用户名和密码，点击&允许&即可完成绑定。
　　输入贴绑定微博
　　绑定成功后，该微博账户就会出现在FaWave(发微)帐号设置下方的&用户管理&列表中。在这里，也可以单独为每个微博设置不同的刷新间隔。
　　用户管理列表
　　设置完成后，绑定的微博有新消息时，Chrome右上角的FaWave(发微)图标就会有数字提示。
　　新信息提示
　　点击图标，即可打开扩展程序，通过下方的微博头像在各微博之间切换查看新信息。
　　多微博同时更新
　　除了一次查看多个微博，FaWave(发微)还支持多微博同步更新，只要点击扩展程序右上角的&写微博&在输入框中写好要发布的微博内容，并选中所有要发布到的微博帐号，点击&发微&，这条文件就可以一次发到你所有绑定的微博中。
(责任编辑：下载王小编)
无相关信息
最新评论 共0条评论
已有条跟贴
请自觉遵守互联网相关的政策法规,文明发言。
常用电脑软件下载
&2015 下载王软件教程学院 &
电子邮箱：