文档章节

如何开发Chrome扩展程序

白志华
 白志华
发布于 2015/10/18 10:56
字数 2347
阅读 10
收藏 0
点赞 0
评论 0

         前两篇谈到了Chrome扩展,但是感觉没有说清楚,这次在丰富一下。其实很简单,如果你懂得基本的HTML、CSS、JavaScript,那你就有了扩展Chrome浏览器需要的所有知识。

开始

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

Manifest文件

       每个扩展都必须在其根目录下包含一个manifest.json文件。

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

Google发布的Manifest v2中支持的域

后台页

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

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

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

 

事件页

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

交互

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

chrome.* APIs

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

  • chrome.tabs 标签页:新建、刷新、关闭、访问和操控标签页
  • chrome.history 历史:访问用户浏览历史
  • chrome.bookmarks 书签:添加、编辑、移除和搜索用户书签
  • chrome.events 事件:监听或者管理浏览器发生的事件
  • chrome.commands 命令:添加或者改变键盘命令
  • chrome.contextMenus 右键:添加条目到右键下文菜单
  • chrome.omnibox 多功能框(地址栏):添加多功能框关键字,使用户可以向扩展发送指令或者激活扩展

 其他API

   Chrome程序和扩展程序通常也会用到其他的API,包括如本地存储、地理位置、缓存、画布等新型的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扩展的用户界面有着严格的限制,但是根据扩展的需要却可以有不同形式的界面。

浏览器按钮[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"
  }
}

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

页面按钮

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

右键菜单

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

       chrome.contextMenusAPI允许你向为不同内容激活的右键菜单添加项目,若要使用此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.omnibox API,他可以让扩展有另一个界面。通过API 可以设置一个特定的激活字符串,当这个字符串被键入多功能框时扩展便可以对其做出反应。在manifest.json中做如下声明:

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

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

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

选项页面

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

页面重载

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

    • 书签管理器
    • 通过访问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"]
    }
  ]
}

       你也可以用通过chrome.tabs API以动态的把JavaScript或者CSS 注入网页

       内容脚本有以下限制:

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/24803193

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
详细了解为什么Postman Chrome应用程序突然不能用了?

很多网友反映postman无法使用,本地postman chrome插件确实也无法正常使用,只有Postman官方自己的软件应用程序可以使用。笔者多少追溯终于知道原因,并紧急上线了不同操作系统版本的Postman...

thebeauty2016 ⋅ 05/08 ⋅ 0

Chrome本地安装Metamask

MetaMask是一个开源的以太坊钱包,能帮助用户方便地管理自己的以太坊数字资产,但在国内由于网络原因,你可能下载不了。本文将介绍如何解决metamask钱包无法下载的问题。 你可以按照以下操作...

汇智网教程 ⋅ 05/03 ⋅ 0

Google 禁止从第三方网站安装 Chrome 扩展程序

谷歌宣布将废除 Chrome 扩展的内联安装方式(inline installation),这将使用户无法从第三方网站安装 Chrome 扩展程序。 Google 一直试图改进 Chrome 浏览器扩展的安装体验,一般用户可以直...

h4cd ⋅ 06/14 ⋅ 0

【JAVA秒会技术之软件应用】Chrome超强测试软件Advanced-REST-client免越狱安装

【现在地址】:http://download.csdn.net/detail/qq296398300/9723430 【安装方法】 1.解压Advanced-REST-clientv3.1.9.zip到当前文件夹,得到Advanced-REST-clientv3.1.9目录 2.在Chrome浏览......

天真的蓝 ⋅ 2017/01/13 ⋅ 0

6天挖矿$1000门罗币,Chrome 恶意扩展来袭

近来,恶意 Chrome 扩展窃取用户信息的事件频发,就在上个月,TrendMicro 刚刚曝光了 Facexworm 恶意软件,最近,安全公司 Radware 又披露了一组携带 Nigelthorn 病毒的 Chrome 扩展程序。 ...

雨田桑 ⋅ 05/12 ⋅ 0

6天挖矿$1000门罗币 Chrome 恶意扩展来袭

近来,恶意 Chrome 扩展窃取用户信息的事件频发,就在上个月,TrendMicro 刚刚曝光了 Facexworm 恶意软件,最近,安全公司 Radware 又披露了一组携带 Nigelthorn 病毒的 Chrome 扩展程序。这...

开源中国 ⋅ 05/12 ⋅ 0

对于单页应用中如何监听 URL 变化的思考

周末开发了一个在 GitHub 中给 repo 增加自定义备注的 chrome 扩展。 开发这个扩展的原因是我在 GitHub 中所 star 的项目实在太多了(截止目前 671 个),有的项目过个几天回来看就忘了为什么...

韩子迟 ⋅ 05/27 ⋅ 0

谷歌计划禁止从第三方网站安装 Chrome 扩展程序

雷锋网(公众号:雷锋网)消息,美国时间 6 月 12 日,谷歌在其 Chromium 博客中宣布,到今年年底,Chrome 浏览器将不再支持从网上商店外部安装扩展程序,即“内联式安装”(inline installati...

李勤 ⋅ 06/13 ⋅ 0

图文详解如何将书签bookmarks导回到chrome?

前提概要 在我们使用chrome浏览器的过程中呢,或多或少都有遇到过chrome浏览器卸载重装,或者重装系统,或者更换浏览器等等的情况。在出现这种情况的时候呢?我们可能会遇到一个相同的问题,...

thebeauty2016 ⋅ 05/10 ⋅ 0

Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

前言 WebStorm是Jetbrains公司旗下一款JavaScript 开发工具,当你打开这款软件的时候会觉得特别的熟悉,因为它和itellj idea属于同款产品,界面和快捷键基本类似,而且功能非常强大,提示也非...

changyinling520 ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高并发之Nginx的限流

首先Nginx的版本号有要求,最低为1.11.5 如果低于这个版本,在Nginx的配置中 upstream web_app { server 到达Ip1:端口 max_conns=10; server 到达Ip2:端口 max_conns=10; } server { listen ...

算法之名 ⋅ 今天 ⋅ 0

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部