文档章节

Chrome插件开发入门教程

白志华
 白志华
发布于 2015/10/18 10:55
字数 956
阅读 11
收藏 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
博文 265
码字总数 57524
作品 0
长沙
程序员
撸一个增强博客园markdown编辑器的chrome插件

写在前面 从开博到现在,在博客园混了快两年了,一直希望能为园友做点贡献。最近写博客的时候,作为markdown的忠实粉丝,感觉博客园markdown编辑器不是很好用,干脆撸了一个增强版的chrome编...

nobody-junior
07/28
0
0
Chrome本地安装Metamask

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

汇智网教程
05/03
0
0
15分钟学会写chrome插件

chrome插件灰常简单,看看配置文件怎么写你就可以直接参照api文档, 天高任你飞了。 chrome官方API地址:https://developer.chrome.com/extensions/apiindex chrome官方入门教程(自己写的更粗暴...

狮城蜗牛
2015/01/24
0
10
以太坊MetaMask钱包插件使用教程

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

马拉喀什
04/22
0
0
【Chorme】前端调试工具之Chorme专篇

【相关来源】 Browser-Sync:响应式Web开发调试利器 开发者调试工具Chrome Workspace Chrome中的 workspace 工具(官方) Chrome调试工具developer tool技巧 【Chrome开发,debug的使用方法。...

呢喃的猫咪
2013/02/27
0
1

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
9
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部