如何开发chrome扩展程序

《如何开发chrome扩展程序》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、如何开发Chrome扩展程序伯乐在线注：上周在微博推荐了英文原文，感谢Nappp的翻译，感谢柳一兮校稿。如果其他朋友也有不错的原创或译文，可以尝试推荐给伯乐在线。我真的很喜欢Chrome浏览器，这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript,那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩展有基本了解的速成班，但我在这个方面也不敢自称是专家，如果你在文章中发现任何错误，请一定让我知道。开始为了着手创建你的扩展程序，

2、你只需要为你的扩展创建一个文件夹。程序所必须的文件只有manifest.json.,不过也推荐准备一些图片用作图标,和至少一个JavaScript以提供功能。一般來说还会包含HTML文档、样式表、图片等等其他的资源。MarHfest文件每个扩展都必须在其根目录下包含一个manifest.json文件。这个文件里面声明了扩展的名称、版本、权限、设置选项和其他的一些和扩展相关的元数据。Manifestvl早在Chrome18便已被弃用，而且会根据这个时间表逐渐淘汰使用Manifesto的扩展。如果你在参考一些旧扩展的Manife

3、st文件的话，请确认添加"manifest_versionH:2.Google发布的Manifestv2中支持的域后台页大多数扩展都会在其manfiest.json文件内有这样的内容：这一段代码指定了两个需要被加载而且要保持在后台运行的脚本，这些脚本会在扩展的后台页运行。后台页是一个在扩展的进程中生成并运行的页面，存在时间会和扩展的生命周期等长。后台页可用来作为扩展的其他界面的控制器，用来维护某个状态或者保持某些活动。如果你需要用后台页来声明一些标记来用，可以把一个HTML文件名指定给page选项。事件页后台页会从扩展被加载

4、的时候被装载，而口会一直留在内存里。这是因为如果有些状态需耍被长时间维护，或者需耍被扩展的其他部分访问。但是如果你没有这个需求，那么应该尽可能的使用事件页。事件页其实只是相当于一个包含了”persistentn:false条目的后台页,这一行语句告诉Chrome可以不需要把后台页保留在内存里。相对来说，事件页也会在最开始被装载，但是一旦指定的脚本运行完毕，事件页便会从内存卸载，而且会在需要的时候被再次加载（比如用来回应某些操作）。以上便是在为扩展添加功能之前所需要知道的。交互利用Google提供的大量API,你的扩展与浏览器

5、交互或者为用户提供功能都变得方便。chrome.*APIsChrome的程序和扩展程序都非常喜欢调用chrome.*APIs,这些API可以让你通过不同的方式来操控浏览器，API通常会在后台脚本里面被调用，这是我找到的一些常用API：chrome.tabs标签页：新建、刷新、关闭、访问和操控标签页chrome.history历史：访问用户浏览历史chrome.bookmarks书签：添加、编辑、移除和搜索用户书签chrome.events事件：监听或者管理浏览器发生的事件chrome.commands命令：添加或者改变键盘命

6、令chrome.contextMenus右键：添加条冃到右键下文菜单chrome.omnibox多功能框（地址栏）：添加多功能框关键字，使用户可以向扩展发送指令或者激活扩展其他APIChrome程序和扩展程序通常也会用到其他的API,包括如本地存储、地理位置、缓存、画布等新型的HTML5APIo你也可以用普通的JavaScript或者webkitAPI来实现。声明权限有些ChromeAPI的功能必须要在manifest.json文件中声明相关权限才能被调用，通过在permissions域中把值设成相应权限名称，或者是通识符组

7、成的数组。在这一段声明代码中，数组中的头两个字符串是分别用来为chrome.contextMenus和chrome.tabs的API授权的，最后的两个字符串则是用来匹配以https://google.com/和https://developer.mozilla.org/开头的地址。用户界面Chrome扩展的用户界面有着严格的限制，但是根据扩展的需要却可以有不同形式的界面。浏览器按钮⑻浏览器按钮允许你在右上角放置一个的16x16像素的图标，如果扩展应用的界面是全局的，而不是针对某个页面，那就应该使用浏览器操作。如果要使用浏览器

8、按钮，你必须在manifest.json中的browser_action域中做如下声明：一个浏览器按钮可以有一个图标、提示、文字标记和一个弹出内容,文字标记可以将极少的文字（4字符）动态的覆盖在浏览器操作的图标上，你也可以通过chrome.browserActionAPI来对浏览器按钮相关