Chrome插件开发新手教程
近期在用百词斩这个站点来学单词，感觉非常不错，就是在回想单词列表的时候仅仅有单词和意思。却没有读音。感觉非常不方便，思来思去，想到了Chrome插件能够胜任这个工作。于是小小的研究了一下。
Chrome插件的本质就是一个由 manifest.json 文件和插件所须要的图片，css。html，js资源组成的一个web页面，仅仅是和传统的web页面不同的，它是以chrome浏览器为宿主执行的一个web程序。
Chrome插件能够与Web页面交互，也能够通过content script或cross-origin XMLHttpRequests与server交互。还能够訪问浏览器提供的内部功能。比如标签或书签等。同一时候也能够以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和图片所在的文件夹就能够看到例如以下效果：
看起来是不是非常easy的呢。当然如今它什么功能也没有，假设你想要开发的话。须要了解很多其它。能够点击这里。
附一个简单的小样例：
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：
放到同一个文件夹中，然后在扩展程序页中载入进来，在工具栏中就会多一个图标。点击以后显示一下效果：
demo下载:请点击这里下载demo。
Chrome插件开发新手教程的更多相关文章
- chrome插件开发-消息机制中的bug与解决方案
序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- A-Frame WebVR开发新手教程
WebVR和WebGL应用程序接口使得我们已经能够在浏览器上创建虚拟现实(VR)体验.但从project化的角度而言,开发社区还须要很多其它方便强大的开发库来简化编程.Mozilla的 A-Frame ...
- Web项目的发布新手教程
ASP.NET服务器发布新手教程 ——本文仅赠予第一次做Web项目,需要发布的新手们,转载的请注明出处. 首先我们说一下我们的需要的一个环境.我使用的是Visual Studio 2010,版本.NE ...
- APP设计尺寸规范大全，APP界面设计新手教程【官方版】(转)
正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...
- ROS探索总结（三）——ROS新手教程【转】
转自:http://blog.csdn.net/hcx25909/article/details/8811313 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 一ROS的 ...
- jQuery插件开发详细教程
这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...
- Chrome插件开发入门（二）——消息传递机制
Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...
- 新手教程之使用Xib自定义UITableViewCell
新手教程之使用Xib自定义UITableViewCell 前言 首先:什么是UITableView?看图 其次:什么是cell? 然后:为什么要自定cell,UITableView不是自带的有cell ...
随机推荐
- [codeforces contest 1119 F] Niyaz and Small Degrees 解题报告 (树形DP+堆)
interlinkage: http://codeforces.com/contest/1119/problem/F description: 有一颗$n$个节点的树,每条边有一个边权 对于一个$x$ ...
- Aspose.cell中的Excel模板导出数据
//Excel模板导数据(Eexcel中根据DataTable中的个数,给多个Sheet中的模板赋值) public void DataSetToManyExcel(string fileName, ...
- wpf小玩意之关键字文本框
有些时候,我们会碰到在输入文本时高亮一些文本关键字,譬如以下这图: 很明显,这个输入的文本中有四个关键字,正常文本都是黑色,关键字文本用了其他颜色.那么我们如何达到这种效果呢.wpf的textbloc ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- 数据结构——栈的实现（数组、Java）
巩固数据结构 栈是一种有限制的线性表 只能对表尾进行操作 package com.shine.test.datastruct; import java.util.Arrays; public clas ...
- FBX骨骼坐标系与模型坐标系的关系
采用assimp加载FBX文件.首先记录下ubuntu下assimp的编译安装. cd assimp_unzip_dir mkdir build cd build && cmake . ...
- 实验6 Bezier曲线生成
1．实验目的: 了解曲线的生成原理,掌握几种常见的曲线生成算法,利用VC+OpenGL实现Bezier曲线生成算法. 2．实验内容: (1) 结合示范代码了解曲线生成原理与算法实现,尤其是Bezier ...
- iview datepicker 选择的时间少一天
使用iview的datepicker时间选择器发现获取的value值是比实际要少一天,严格来说应该是时间格式不一样,datepicker获取的时间是UTC时间格式,也就是:yyyy-MM-ddTHH: ...
- LAMP环境下，通过网页url获取gb2312编码中文命名的下载资源方法
最近有个功能, 要求获取中文命名的.zip压缩文件,我准备直接采用网页url填写压缩文件地址的方式获取下载资源, 但问题是 我们的linux系统和php编程环境都是采用的zh_GB2312编码, 而浏 ...
- JavaScript正则表达式总结
同学们,今天给大家带来一篇正则表达式的总结,老规矩,先说下我们为什么要用正则?正则要用在什么地方? (个人理解的,大神轻喷) 正则很多时候要用于字符串操作,比如我们要把一个字符串里面的空格删除啊,替换 ...