文档章节

Chrome插件开发入门教程

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

       最近在用百词斩这个网站来学单词,感觉很不错,就是在回顾单词列表的时候只有单词和意思,却没有读音。感觉很不方便,思来思去,想到了Chrome插件可以胜任这个工作,于是小小的研究了一下。


       Chrome插件的本质就是一个由 manifest.json 文件和插件所需要的图片,css,html,js资源组成的一个web页面,只是和传统的web页面不同的,它是以chrome浏览器为宿主运行的一个web程序。


       Chrome插件可以与Web页面交互,也可以通过content script或cross-origin XMLHttpRequests与服务器交互。还可以访问浏览器提供的内部功能,例如标签或书签等。同时也可以以browser action或page action的形式在浏览器界面上展现出来。



       上图中工具栏所显示的电脑管家的插件就是采用了browser action,而在地址栏最后的那个T型图标(公告终结者)则是采用了page action和content script注入到页面中的。每个插件最多可以有一个browser action或page action。当插件的图标是否显示出来是取决于单个的页面时,应当选择page action;当其它情况时可以选择browser action。


  


       上面第一副图是原图,第二幅图则是采用了content script来改变了页面的内容。content script可以很轻松地给页面注入脚本。这样就可以实现个性化的操作了。


       下面是一个简单的manifest.json(manifest.json文件格式需为utf-8):

{
    "name": "我的第一个Chrome插件",
    "version": "1.0.0",
    "manifest_version": 2,
    "icons": {
        "48": "logo_avatar.png"
    }
}

       这就是最简单的 manifest.json文件了。在扩展程序中选择“正在开发的扩展程序”,选择manifest.json和图片所在的目录就可以看到如下效果:


       看起来是不是很简单的呢。当然现在它什么功能也没有,如果你想要开发的话,需要了解更多。可以点击这里


       附一个简单的小例子:

manifest.json文件

{
    "name": "我的第一个Chrome插件",
    "version": "1.0.1",
    "manifest_version": 2,
    "description": "我的第一个Chrome插件",
    "icons": {
        "48": "logo_avatar.png"
    },
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    }
}
popup.html
<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }
	
	      img {
	        margin: 5px;
	        border: 2px solid black;
	        vertical-align: middle;
	        width: 75px;
	        height: 75px;
	      }
	    </style>
	    <script src="popup.js"></script>
	  </head>
	  <body>
	  </body>
	</html>

popup.js
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * Global variable containing the query we'd like to pass to Flickr. In this
 * case, kittens!
 *
 * @type {string}
	 */
	var QUERY = 'kittens';
	
	var kittenGenerator = {
	  /**
	   * Flickr URL that will give us lots and lots of whatever we're looking for.
	   *
	   * See http://www.flickr.com/services/api/flickr.photos.search.html for
	   * details about the construction of this URL.
	   *
	   * @type {string}
	   * @private
	   */
	  searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' +
	      'method=flickr.photos.search&' +
	      'api_key=90485e931f687a9b9c2a66bf58a3861a&' +
	      'text=' + encodeURIComponent(QUERY) + '&' +
	      'safe_search=1&' +
	      'content_type=1&' +
	      'sort=interestingness-desc&' +
	      'per_page=20',
	
	  /**
	   * Sends an XHR GET request to grab photos of lots and lots of kittens. The
	   * XHR's 'onload' event is hooks up to the 'showPhotos_' method.
	   *
	   * @public
	   */
	  requestKittens: function() {
	    var req = new XMLHttpRequest();
	    req.open("GET", this.searchOnFlickr_, true);
	    req.onload = this.showPhotos_.bind(this);
	    req.send(null);
	  },
	
	  /**
	   * Handle the 'onload' event of our kitten XHR request, generated in
	   * 'requestKittens', by generating 'img' elements, and stuffing them into
	   * the document for display.
	   *
	   * @param {ProgressEvent} e The XHR ProgressEvent.
	   * @private
	   */
	  showPhotos_: function (e) {
	    var kittens = e.target.responseXML.querySelectorAll('photo');
	    for (var i = 0; i < kittens.length; i++) {
	      var img = document.createElement('img');
	      img.src = this.constructKittenURL_(kittens[i]);
	      img.setAttribute('alt', kittens[i].getAttribute('title'));
	      document.body.appendChild(img);
	    }
	  },
	
	  /**
	   * Given a photo, construct a URL using the method outlined at
	   * http://www.flickr.com/services/api/misc.urlKittenl
	   *
	   * @param {DOMElement} A kitten.
	   * @return {string} The kitten's URL.
	   * @private
	   */
	  constructKittenURL_: function (photo) {
	    return "http://farm" + photo.getAttribute("farm") +
	        ".static.flickr.com/" + photo.getAttribute("server") +
	        "/" + photo.getAttribute("id") +
	        "_" + photo.getAttribute("secret") +
	        "_s.jpg";
	  }
	};
	
	// Run our kitten generation script as soon as the document's DOM is ready.
	document.addEventListener('DOMContentLoaded', function () {
	  kittenGenerator.requestKittens();
	});

图片:

48×48:,20×20:


       放到同一个目录中,然后在扩展程序页中加载进来,在工具栏中就会多一个图标,点击以后显示一下效果:



       demo下载:请点击这里下载demo。

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

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

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
Chrome本地安装Metamask

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

汇智网教程 ⋅ 05/03 ⋅ 0

以太坊MetaMask钱包插件简介

MetaMask是一个以太坊钱包插件,虽然只能在Chrome浏览器中使用,但作为以太坊钱包的metamask却很受以太坊开发者欢迎。 MetaMask 评价(5★): 安装设置:★★★★ 界面操作:★★★★ 备份方...

笔阁 ⋅ 04/23 ⋅ 0

Chrome+SwitchyOmega+Shadowsocks实现智能翻墙

接上文 电脑小白使用Shadowsocks搭建翻墙服务器傻瓜式手把手教程 ,使用Shadowsocks自带的PAC列表翻墙已经算不错的了。但其也有不方便的地方,其表现在以下两点: Pac列表只收录被墙的站点,...

Airship ⋅ 05/14 ⋅ 0

puppeteer入门及实践(1)

前面写过的phantomJs,研究几天后发现phantomJs虽然在业内有一定的影响力,但后继乏力,主要还是缺乏维护人员,导致项目依赖的chrome内核版本太低,无人解决的BUG太多(1000+),现在这个环境...

子非鱼_fish ⋅ 06/02 ⋅ 0

Ubuntu使用Shadowsocks-qt5科学上网

由于大多数朋友都问我在Ubuntu上面怎么科学上网,为了防止以后忘记,故此记录。 本教程使用的配置 Ubuntu 16.10 Shadowsocks-qt5 一个可用的ss账号 一根能够通向www的网线 说明 是ubuntu上一...

Airship ⋅ 05/14 ⋅ 0

简洁,多样的菜单解决方案 - SelectMenu

简洁、易用、多样的菜单解决方案 状态 入门指南、DEMO、文档 插件官方首页(入门指南、DEMO、文档): 中文官网 英文官网 项目GitHub地址: https://github.com/TerryZ/SelectMenu 插件运行效...

TerryZ ⋅ 2017/10/08 ⋅ 3

chrome插件开发入门

1、参考文档链接 chrome浏览器插件开发官网教程 https://developer.chrome.com/extensions/getstarted foege工具,能够使用一份代码同时生成firfox,chrome,ie的插件,但是目前该项目已经不...

曾梓华 ⋅ 2015/03/05 ⋅ 0

Chrome OS 新版已可运行 Linux 应用

导读 今年二月底,我们曾报道了 Chrome 开发人员正在开发一个名为 Crostini 的项目,暗示着 Chrome OS 即将支持运行 Linux 应用。 今年二月底,我们曾报道了 Chrome 开发人员正在开发一个名为...

linuxprobe16 ⋅ 05/20 ⋅ 0

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

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

changyinling520 ⋅ 05/10 ⋅ 0

API & HTTP 请求调试插件(Postman)

简述 Postman 是一个 Chrome 扩展,提供功能强大的 Web API & HTTP 请求调试。它能够发送任何类型的 HTTP 请求(GET、HEAD、POST、PUT..),附带任何数量的参数 + headers。 支持不同的认证机制...

潘志闻 ⋅ 2016/05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

阿里云云栖社区 ⋅ 26分钟前 ⋅ 0

Ubuntu部署django问题汇总

使用Anaconda3的Python3.6的pip安装UWSGI报错 原因是gcc版本不兼容,安装4.7并修改gccsudo apt-get install gcc-4.7sudo mv /usr/bin/gcc /usr/bin/gcc.baksudo ln -s /usr/bin/gcc-4.......

wuyaSama ⋅ 29分钟前 ⋅ 0

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

猫耳m ⋅ 29分钟前 ⋅ 0

Docker减肥小记

如果经常使用 docker,你会发现 docker 占用的资源膨胀很快,其中最明显也最容易被察 如何快速的清理 docker 占用的系统资源,具体点说就是删除那些无用的镜像、容器、网络和数据卷… 1、查看...

寰宇01 ⋅ 40分钟前 ⋅ 0

微信小程序中如何使用WebSocket实现长连接(含完整源码)

本文由腾讯云技术团队原创,感谢作者的分享。 1、前言 微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。腾讯云研究了一...

JackJiang- ⋅ 48分钟前 ⋅ 0

定制库到Maven本地资源库

1.如果只有定制库的JAR文件 下载链接如下:pdf.jar 2.使用命令转换成Maven本地资源 mvn install:install-file -Dfile=/Users/manager/Downloads/clj-pdf-2.2.33.jar -DgroupId=clj-pdf -Dar......

年少爱追梦 ⋅ 52分钟前 ⋅ 0

高仿springmvc之xuchen-mvc

package org.mvc.framework.servlet; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.......

徐志 ⋅ 54分钟前 ⋅ 0

关于自定义URLStreamHandler的一次踩坑

关于自定义URLStreamHandler的一次踩坑 20180625 lambo init 说明 一般自定义实现url的协议解析.方案为实现URLStreamHandler.实现其 openConnection 就可以了, 如果我们执行 new URL("xx://...

林小宝 ⋅ 55分钟前 ⋅ 0

【SM2证书】利用BC的X509v3CertificateBuilder组装X509国密证书

演示证书文件 链接: https://pan.baidu.com/s/1ijHNnMQJj7jzW-jXEVd6Gg 密码: vfva 所需jar包 <!-- https://mvnrepository.com/artifact/org.bouncycastle/bcpkix-jdk15on --> <dependenc......

小帅帅丶 ⋅ 56分钟前 ⋅ 0

用Calendar 实现 计算 一段时间的毫秒值

Calendar c=Calendar.getInstance();c.add(Calendar.MONTH, -1);int lastMonthMaxDay=c.getActualMaximum(Calendar.DAY_OF_MONTH);c.set(c.get(Calendar.YEAR), c.get(Calendar.MONTH)......

岸芷汀兰 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部