如何开发Chrome扩展程序

短命女 2023-07-12 14:55 24阅读 0赞

我真的很喜欢Chrome浏览器，这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript，那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩展有基本了解的速成班，但我在这个方面也不敢自称是专家，如果你在文章中发现任何错误，请一定让我知道。

## 开始 ##

为了着手创建你的扩展程序，你只需要为你的扩展创建一个文件夹。程序所必须的文件只有manifest.json.，不过也推荐准备一些图片用作图标，和至少一个JavaScript以提供功能。一般来说还会包含HTML文档、样式表、图片等等其他的资源。

## Manifest文件 ##

每个扩展都必须在其根目录下包含一个manifest.json文件。  
这个文件里面声明了扩展的名称、版本、权限、设置选项和其他的一些和扩展相关的元数据。Manifest v1早在Chrome 18便已被弃用，而且会根据[这个时间表][Link 1] 逐渐淘汰使用Manifest v1的扩展。如果你在参考一些旧扩展的Manifest文件的话，请确认添加`"manifest_version": 2`.

Google发布的[Manifest v2中支持的域][Manifest v2]

## 后台页 ##

大多数扩展都会在其manfiest.json文件内有这样的内容：

{ "background": { "scripts": ["index.js", "other.js"] } }

这一段代码指定了两个需要被加载而且要保持在后台运行的脚本，这些脚本会在扩展的后台页运行。[后台页][Link 2]是一个在扩展的进程中生成并运行的页面，存在时间会和扩展的生命周期等长。后台页可用来作为扩展的其他界面的控制器，用来维护某个状态或者保持某些活动。如果你需要用后台页来声明一些标记来用，可以把一个HTML文件名指定给page选项。

## 事件页 ##

后台页会从扩展被加载的时候被装载，而且会一直留在内存里。这是因为如果有些状态需要被长时间维护，或者需要被扩展的其他部分访问。但是如果你没有这个需求，那么应该尽可能的使用事件页。[事件页][Link 3]其实只是相当于一个包含了”persistent”: false条目的后台页，这一行语句告诉Chrome可以不需要把后台页保留在内存里。相对来说，事件页也会在最开始被装载，但是一旦指定的脚本运行完毕，事件页便会从内存卸载，而且会在需要的时候被再次加载（比如用来回应某些操作）

以上便是在为扩展添加功能之前所需要知道的。

## 交互 ##

利用Google提供的大量API，你的扩展与浏览器交互或者为用户提供功能都变得方便。

## chrome.\* APIs ##

Chrome的程序和扩展程序都非常喜欢调用[chrome.\* APIs][chrome._ APIs]，这些API可以让你通过不同的方式来操控浏览器，API通常会在后台脚本里面被调用，这是我找到的一些常用API：

[chrome.tab][][s][chrome.tab] 标签页：新建、刷新、关闭、访问和操控标签页

[chrome.histor][][y][chrome.histor] 历史：访问用户浏览历史

[chrome.bookmark][chrome.histor][s][chrome.histor] 书签：添加、编辑、移除和搜索用户书签

[chrome.event][][s][chrome.event] 事件：监听或者管理浏览器发生的事件

[chrome.command][][s][chrome.command] 命令：添加或者改变键盘命令

[chrome.contextMenu][][s][chrome.contextMenu] 右键：添加条目到右键下文菜单

[chrome.omnibo][][x][chrome.omnibo] 多功能框（地址栏）：添加多功能框关键字，使用户可以向扩展发送指令或者激活扩展

## 其他API ##

Chrome程序和扩展程序通常也会用到[其他的API][chrome._ APIs]，包括如本地存储、地理位置、缓存、画布等新型的HTML5 API。你也可以用普通的JavaScript或者webkit API来实现。

## 声明权限 ##

有些Chrome API的功能必须要在`manifest.json`文件中声明相关权限才能被调用，通过在permissions 域中把值设成相应权限名称，或者是通识符组成的数组。

{ "permissions": [ "contextMenus", "tabs", "https://google.com/*", "https://developer.mozilla.org/*" ] }

在这一段声明代码中，数组中的头两个字符串是分别用来为chrome.contextMenus和chrome.tabs  的API授权的，最后的两个字符串则是用来匹配以 https://google.com/ 和 https://developer.mozilla.org/ 开头的地址。

## 用户界面 ##

Chrome扩展的用户界面有着严格的限制，但是根据扩展的需要却可以有不同形式的界面。

## 浏览器按钮 ##

[浏览器][Link 4][按钮][Link 4]允许你在右上角放置一个的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" } }

一个浏览器按钮可以有一个图标、提示、文字标记和一个弹出内容，文字标记可以将极少的文字（4字符）动态的覆盖在浏览器操作的图标上，你也可以通过[chrome.browserActio][Link 4][n][Link 4]API来对浏览器按钮相关的事件做出反应。

## 页面按钮 ##

[页][Link 5][面按钮][Link 5]允许你在多功能栏（地址栏）右边添加一个按钮，其实他和浏览器按钮很相似，区别之处在于页面按钮是专门用来处理某些指定的页面的。页面按钮必须在manfiest.json中声明， page\_action域的使用和浏览器按钮一样。页面按钮可以通过[chrome.pageActio][Link 5][n][Link 5] API控制，可以在不同的标签页中灵活的显示或者隐藏。页面按钮也可以设置图标、提示和弹出内容，和浏览器按钮不同的是其没有文字标记功能。

## 右键菜单 ##

[右键][chrome.contextMenu][菜单][chrome.contextMenu]是另一个提供用户界面，方便用户和扩展交互的方式。Chrome的右键菜单通过右键激活，但根据激活内容的变化，菜单内容也会做相应改变。

[chrome.contextMenu][][s][chrome.contextMenu]API允许你向为不同内容激活的右键菜单添加项目，若要使用此API，则在manifest.json文件中声明相应的contextMenus权限。

目前可用的激活内容有：all, page, frame, selection, link, editable,image, video,  audio

对应：所有内容、页面、框架、选择、链接、可编辑、图像、视频、音频，以下这个例子需要contextMenus 和tabs权限，他可以使扩展为右键菜单添加一个根项目，然后添加一个子菜单，用来复制当前的页面到一个新选项卡。

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把地址栏/搜索栏称为多功能框，通过[chrome.omnibo][][x][chrome.omnibo] API，他可以让扩展有另一个界面。通过API 可以设置一个特定的激活字符串，当这个字符串被键入多功能框时扩展便可以对其做出反应。在manifest.json中做如下声明：

{ "omnibox": { "keyword": "ext-" } }

这部分代码会把ext-作为激活字符串，当用户键入ext-并按下SPACE键或者TAB键时扩展会被激活。激活字符串必须通过manifest.json文件声明，故也不能通过JavaScript来更改。用户可以通过右键单击多功能框—–修改搜索引擎来更改。激活字符串是大小写敏感的，同时想为一个扩展声明多个激活字符串也是不可以的。

chrome.omnibox API可以让你添加激活字符串被键入之后的修改或者输入的事件处理器。

## 选项页面 ##

[选项页面][Link 6]是一个的常见的用户界面，在chrome://extensions里可以通过单击扩展右边的选项按钮来打开。通常这个页面会和存储API结合使用，以用来在计算机上为用户保存设置。而使用脚本通过[chrome.tab][][s][chrome.tab]API来打开选项页面也是可以的。

## 页面重载 ##

[页面重载][Link 7]允许你完全替代一个以下指定页面（一个扩展程序只能重载一个页面）

*  书签管理器
 *  通过访问chrome://bookmarks或者Chrome菜单打开的页面
 *  历史
 *  通过访问chrome://history或者Chrome菜单打开的页面
 *  新选项卡
 *  通过访问chrome://newtab或者新建选项卡出现的页面

这些被替换的页面必须在manifest.json文件中如下声明chrome\_url\_overrides域：

{ "chrome_url_overrides": { "bookmarks": "newBookmarkManager.html" } }

## 内容脚本 ##

[内容脚本][Link 8]是和你的扩展有关，在网页中运行的脚本。这个脚本可以让你访问页面里相应的DOM元素，你可以像这样在manifest.json里通过指定content\_scripts域定义一个内容脚本数组：

{ "content_scripts": [ { "matches": ["http://www.google.com/*"], "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[注入网页][Link 9]。

内容脚本有以下限制：

*  不能使用chrome.\* API （chrome.extension的部分除外）
 *  不能使用由扩展脚本定义的变量或函数
 *  不能使用由网页所定义的变量或函数
 *  不能使用由其他内容脚本定义的变量或函数

内容脚本可以通过消息传递间接的使用chrome.\* API，或者是和扩展脚本交互。

## 一些例子 ##

Chrome有一个非常棒的样例程序页面，你可以通过他们调用了哪些API来搜索样例扩展，你也可以阅读我第一个扩展程序[MDNJump][]相关的[文章][Link 10]。[MDNJump已放在GitHub][MDNJump_GitHub]。

原文：[http://blog.jobbole.com/46608/][http_blog.jobbole.com_46608]

[Link 1]: http://developer.chrome.com/extensions/manifestVersion.html#manifest-v1-support-schedule
[Manifest v2]: http://developer.chrome.com/extensions/manifest.html
[Link 2]: http://developer.chrome.com/extensions/background_pages.html
[Link 3]: http://developer.chrome.com/extensions/event_pages.html
[chrome._ APIs]: http://developer.chrome.com/extensions/api_index.html
[chrome.tab]: http://developer.chrome.com/extensions/tabs.html
[chrome.histor]: http://developer.chrome.com/extensions/downloads.html
[chrome.event]: http://developer.chrome.com/extensions/events.html
[chrome.command]: http://developer.chrome.com/extensions/commands.html
[chrome.contextMenu]: http://developer.chrome.com/extensions/contextMenus.html
[chrome.omnibo]: http://developer.chrome.com/extensions/omnibox.html
[Link 4]: http://developer.chrome.com/extensions/browserAction.html
[Link 5]: http://developer.chrome.com/extensions/pageAction.html
[Link 6]: http://developer.chrome.com/extensions/options.html
[Link 7]: http://developer.chrome.com/extensions/override.html
[Link 8]: http://developer.chrome.com/extensions/content_scripts.html
[Link 9]: http://developer.chrome.com/extensions/content_scripts.html#pi
[MDNJump]: https://chrome.google.com/webstore/detail/mdnjump/mfjekjhknpjgpgchoghlemhgchpmkiha?hl=en-US
[Link 10]: http://coryg89.github.io/technical/2013/08/14/mdnjump-fastest-way-to-reference-mdn
[MDNJump_GitHub]: https://github.com/CoryG89/MDNJump
[http_blog.jobbole.com_46608]: http://blog.jobbole.com/46608/