Chrome插件开发入门教程

简介:        最近在用百词斩这个网站来学单词,感觉很不错,就是在回顾单词列表的时候只有单词和意思,却没有读音。感觉很不方便,思来思去,想到了Chrome插件可以胜任这个工作,于是小小的研究了一下。

       最近在用百词斩这个网站来学单词,感觉很不错,就是在回顾单词列表的时候只有单词和意思,却没有读音。感觉很不方便,思来思去,想到了Chrome插件可以胜任这个工作,于是小小的研究了一下。


       Chrome插件的本质就是一个由 manifest.json 文件和插件所需要的图片,css,html,js资源组成的一个web页面,只是和传统的web页面不同的,它是以chrome浏览器为宿主运行的一个web程序。


       Chrome插件可以与Web页面交互,也可以通过content script或cross-origin XMLHttpRequests与服务器交互。还可以访问浏览器提供的内部功能,例如标签或书签等。同时也可以以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和图片所在的目录就可以看到如下效果:


       看起来是不是很简单的呢。当然现在它什么功能也没有,如果你想要开发的话,需要了解更多。可以点击这里


       附一个简单的小例子:

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:,20×20:


       放到同一个目录中,然后在扩展程序页中加载进来,在工具栏中就会多一个图标,点击以后显示一下效果:



       demo下载:请点击这里下载demo。

目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
1月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
76 0
|
2月前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
146 2
|
2月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
391 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
4月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
80 11
|
4月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
4月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
1167 1
|
4月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
366 8
|
4月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
210 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
5月前
|
Web App开发 前端开发 Java
通过设置 Chrome 解决开发调用跨域问题
通过设置 Chrome 解决开发调用跨域问题
1223 7