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 ...
随机推荐
- 建模：3D建模
ylbtech-建模:3D建模 “3D建模”通俗来讲就是通过三维制作软件通过虚拟三维空间构建出具有三维数据的模型.3D建模大概可分为:NURBS和多边形网格. NURBS对要求精细.弹性与复杂的模型有 ...
- canvas的自动画图
<!DOCTYPE HTML><html><body> <canvas id="myCanvas" width="200&quo ...
- java+appium+安卓模拟器实现app自动化Demo
网上有比较多相关教程,自己写一遍,加深下印象. 环境搭建 据说,很多人都被繁琐的环境搭建给吓到了. 是的,确实,繁琐. node.js 网址 cmd输入node -v,出现下图说明成功. JDK 网址 ...
- jupyter在特定环境特定目录中启动
代码如下: @echo off start %windir%\System32\cmd.exe "/c" D:\Anaconda\Scripts\activate.bat # 启动 ...
- VS中的路径宏
说明$(RemoteMachine)设置为“调试”属性页上“远程计算机”属性的值.有关更多信息,请参见更改用于 C/C++ 调试配置的项目设置.$(References)以分号分隔的引用列表被添加到项 ...
- POJ 1416 DFS
题目翻译: 公司现在要发明一种新的碎纸机,要求新的碎纸机能够把纸条上的数字切成最接近而不超过target值.比如,target的值是50,而纸条上的数字是12346,应该把数字切成四部分,分别是1.2 ...
- 关于电脑安装新硬盘，出现无法是识别设备，03F0问题解答。
问题说明:在添加新的硬盘,切确定硬盘没有坏的情况下,无法识别出新的硬盘. 解决方案: 1.检查bios系统里的安全模式,是否处于开启中.因为在windows 8.1以上的版本中,不开启的情况下只能读取 ...
- 小米 SOAR 开源SQL优化工具安装
github :https://github.com/xiaomi/soar 安装说明 :https://github.com/XiaoMi/soar/blob/master/doc/install. ...
- linux VFS 之一 ：虚拟文件系统的面向对象设计思想
VFS的面向对象的思想,如下图: VFS在上层用户空间的进程与底层特定文件系统之间起到一个承上启下的作用, 对上:封装标准的系统调用接口给用户空间app,user space app不必关心特定文件系 ...
- html form表单追加input元素后在提交
form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件