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 ...
随机推荐
- Git 工具 - 子模块
子模块 有种情况我们经常会遇到:某个工作中的项目需要包含并使用另一个项目. 也许是第三方库,或者你独立开发的,用于多个父项目的库. 现在问题来了:你想要把它们当做两个独立的项目,同时又想在一个项目中使 ...
- 配置Windows群集
故障转移群集 l 一个群集支持8个节点,(64位操作系统支持16个节点) l 可以使用故障转移群集的服务:SQL Server(数据库), Exchange(邮件),文件和打印服务,DHCP服务等 ...
- [luogu P5349] 幂 解题报告 (分治FFT)
interlinkage: https://www.luogu.org/problemnew/show/P5349 description: solution: 设$g(x)=\sum_{n=0}^{ ...
- poj 1161 Floyd+枚举
题意是: 给出n个点,围成m个区域.从区域到另一个区域间需穿过至少一条边(若两区域相邻)——边连接着两点. 给出这么一幅图,并给出一些点,问从这些点到同一个区域的穿过边数最小值. 解题思路如下: 将区 ...
- hihoCoder挑战赛32
Rikka with Sequence V 构造 #pragma comment(linker, "/STACK:102400000,102400000") #include< ...
- [Offer收割]编程练习赛36
逃离单身节 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<vector&g ...
- 关于react-router-dom入门配置
react-router-dom入门配置 配置 参考:github https://reacttraining.com/react-router/web/api/BrowserRouter 1. 导入 ...
- (到8.1为止)Android版本名称与内容
版本名称 API 主要版本更新时间 Android 1.0 1 测试版本 Android 1.1 2 2008 年9月正式发布的Android第一版 Android 1.5 Cupcake(纸杯 ...
- 经典C/S服务器模型之守护进程
linux编程-守护进程编写 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种很有用的进程. Linux的大多数服务 ...
- 从Spark1.6到Spark2.1，Logging该何去何从
大家都知道spark 1.6.0版本比较稳定,也比较流行. 我们项目组也是,最初用的就是这个版本. 这段时间,项目组引入spark 2.1.0版本,我想尝尝鲜. Pom中刚刚换了dependency马 ...