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 ...
随机推荐
- 【POJ 3071】 Football
[题目链接] http://poj.org/problem?id=3071 [算法] 概率DP f[i][j]表示第j支队伍进入第i轮的概率,转移比较显然 [代码] #include <algo ...
- H3C路由器查看序列号信息
H3C MSR系列的路由器,查看本机的MAC地址.序列号信息和生产日期信息等可以使用dis device manuinfo 命令查看,以下是执行结果: slot 0 DEVICE_NAME ...
- 原生JS通过勾股定理计算苹果菜单效果
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
- MarkDownPad 注册码
邮箱: Soar360@live.com 授权秘钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6b ...
- Python3没有dict.has_key方法
最近开始学习Python,安装上最新的Python3.3.3照书敲了一个小程序结果报错 'dict' object has no attribute 'has_key' 上网查也找不到解决办法,后来发 ...
- guice 整合ninja framework（七）
ninja是一个优秀的,轻量级的mvc框架,它与google guice整合比较好.下面看一下例子: 我们在web.xml 配置一下: <listener> <listener-cl ...
- [转]Microsoft Solutions Framework (MSF) Overview
本文转自:http://msdn.microsoft.com/zh-CN/library/jj161047(v=vs.120).aspx [This documentation is for prev ...
- INFORMIX MATCHES的使用详解
MATCHES 运算符返回 TRUE ,如果一个字符串与给定的掩码匹配. 语法 expr [NOT] MATCHES mask [ ESCAPE "char" ] ex ...
- SqlServer与MySql 系统表查询自建表数据
SqlServer: SELECT * FROM sys.sysobjects WHERE type='U' ORDER BY name SELECT * FROM sys.syscolumns WH ...
- easyui的datetimebox时间格式化详解
今天公司让用easyui的datetimebox组件,而且还要让格式化成大家通用的那种,网上搜了很多,但差不多都是复制黏贴的,最后请教了下螃蟹. 感谢螃蟹抽空给做了个例子,现在拿出来和大家分享下,效果 ...