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 ...
随机推荐
- 杂项-地图：LBS
ylbtech-杂项-地图:LBS 基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网.CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标,或大地坐标),在地理 ...
- Meson使用
安装 Meson是基于python3实现,至少需要python3.5才能运行,默认采用ninja作为后端.在Ubuntu下最简单的是通过pip3安装 $ sudo apt-get install py ...
- java中的数组的Arrays工具类的使用
package day04.d1.shuzu; import java.util.Arrays; /** * Arrays 工具类 * @author Administrator * */public ...
- Selenium的文件上传JAVA脚本
在写文件上传脚本的时候,遇到了很多问题,包括元素定位,以及上传操作,现在总结下来以下几点: 1. 上传的控件定位要准确,必要时要进行等待 WebElement adFileUpload = drive ...
- NFA
任意正则表达式都存在一个与之对应的NFA,反之亦然. 正则表达式 ((A*B|AC)D)对应的NFA(有向图), 其中红线对应的为该状态的ε转换, 黑线表示匹配转换 我们定义的NFA具有以下特点: 正 ...
- linux下使用Android studio启动模拟器时提示 waiting for target device to come online 的问题
方法来自:http://stackoverflow.com/questions/42612468/how-can-i-get-more-information-about-waiting-for-ta ...
- Google浏览器“无法添加来自此网站的应用、扩展程序和应用脚本”的解决办法
原文链接:https://blog.csdn.net/Fan_Weibin/article/details/80402790 解决方法如下: 在桌面找到Google Chrome图标→右击属性→在快捷 ...
- 计算机二级考试Access教程
本教程对编程语言各种要点进行详细的讲解介绍,从基础知识到实用技术功能,内容涵盖了从数组,类等基本概念到多态.模板等高级概念.教程本着实用的原则,每一小节都结合了可以笔试.面试的常见程序实例,以便从第一 ...
- Windows各种计时器
(一):OnTimer类 1.打开对应对话框的类向导ClassWizard. 2.在消息映射MessageMaps中添加消息Message:WM_TIMER. 3.程序代码中将自动添加函数OnTime ...
- C#——面对对象之封装、继承、多态的简单理解
一.封装 隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别. 简单来多,就是讲我们所需要的代码打包封装进入一个类里面,便于我们调用,操作.这就是封装. 这样就隔离了具体 ...