如何开发Chrome扩展程序

2013-8-28 11:05| 发布者: 红黑魂| 查看: 6267| 评论: 0|来自: 伯乐在线

摘要: 我真的很喜欢Chrome浏览器，这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript，那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩 ...

页面按钮

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

右键菜单

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

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

目前可用的激活内容有：

all, page, frame, selection, link, editable,image, video, audio

对应：所有内容、页面、框架、选择、链接、可编辑、图像、视频、音频，以下这个例子需要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 })
       }
   });
});

多功能框

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

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

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

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

选项页面

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

页面重载

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

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

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

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

内容脚本

内容脚本是和你的扩展有关，在网页中运行的脚本。这个脚本可以让你访问页面里相应的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"]
    }
  ]
}