作为练手,昨晚开发了一个chrome的扩展
效果是在页面上选中文本,然后在右键菜单里点击按钮,保存到localStorage里,在popup window里可以看到保存的笔记
数据是保存在localStorage里的,由于localStorage只能保存String(奇怪),但是应用的数据结构需要用到object,所以要用JSON的方法转化一下,详见代码
扩展用到了background javascript,用来生成右键菜单、处理点击;以及一个popup页面,用来展示保存的笔记;由于没有和页面的直接交互,就不需要用到content script
首先是manifest
{
"manifest_version": 2,
"name": "kyfxbl note",
"description": "This extension notes text content from page",
"version": "1.4",
"background": {
"scripts": ["common.js","uuid.js","background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "kyfxbl note"
},
"permissions": [
"tabs",
"contextMenus",
"http://*/*"
]
}
然后是background.js,在chrome启动时就会在后台运行
initLocalStorage();
// see http://developer.chrome.com/extensions/contextMenus.html for details
var createMenuProp = {
"title" : "note",
"contexts" : [ "selection" ],
"onclick" : noteIt
};
chrome.contextMenus.create(createMenuProp);
function noteIt(info, tab) {
var uuid = Math.uuid(16);
var note = new Note(info.selectionText);
var object = JSON.parse(localStorage.mynotes);
object[uuid] = note;
localStorage.mynotes = JSON.stringify(object);
}
最后是popup.js,点击时显示笔记
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="popup.css" />
<script src="jquery-1.8.0.js"></script>
<script src="common.js"></script>
<script src="popup.js"></script>
<title>kyfxbl note</title>
</head>
<body>
<div id="wrapper"></div>
<button id="btn_clear">clear</button>
</body>
</html>
$(document).ready(function() {
$("#btn_clear").click(clearLocalStorage);
renderNotes();
function renderNotes() {
$("#wrapper").empty();// 先清空页面
var notes = JSON.parse(localStorage.mynotes);
$.each(notes, function(index, value) {
var $div = $("<div>");
var content = value.content;
var $content = $("<span class='content'>" + content + "</span>");
var $uuid = $("<span class='uuid'>" + index + "</span>");
var $button = $("<button>delete</button>");
$button.click(deleteCurrentNote);
$div.append($content);
$div.append($uuid);
$div.append($button);
$("#wrapper").append($div);
});
}
function clearLocalStorage() {
localStorage.clear();
initLocalStorage();
renderNotes();
}
function deleteCurrentNote() {
var uuid = $(this).prev().text();
var object = JSON.parse(localStorage.mynotes);
delete object[uuid];
localStorage.mynotes = JSON.stringify(object);
renderNotes();
}
});
完整的代码见附件
感觉google出的东西都比较好学,因为它的架构很清晰,相关的文档比较全,API设计得也比较好
总结一下,当学习一个新的框架或者平台的时候,可以按三步走:
1、了解场景和边界,即这个东西是用在什么场合,可以解决什么问题,不能解决什么问题
2、学习架构,在高层面上明白有什么组件,怎么交互。比如android的4种组件,chrome extension的background、browser action、content script的关系
3、学习API,在上述2个步骤以后,就可以深入到reference里,看看都有什么API,应该怎么调用。每个平台或者框架能做什么事情,最终都是由API来体现的
- 大小: 17.6 KB
分享到:
相关推荐
Chrome 扩展开发 —— 自动填表实例 本文将详细介绍 Chrome 扩展开发中的自动填表实例,通过分析 manifest.json 配置文件,了解扩展应用的权限、内容脚本、浏览器行为和弹出页面的实现机制。 一、权限...
【标题】:Chrome插件开发——创建右键菜单将文本转化为二维码 在现代互联网工作中,二维码的使用越来越普遍,从网址分享到数据传输,都离不开它的身影。针对这一需求,Chrome浏览器提供了一种便捷的方式——通过...
Chrome浏览器插件Axure Chrome Extension是一款专为Axure RP设计的工具,旨在增强Axure原型在Chrome浏览器中的体验。Axure RP是一款广泛使用的交互原型设计软件,它允许设计师快速创建 wireframes、prototypes 和 ...
Chrome扩展(Chrome插件)是谷歌浏览器上的应用程序,它们能够增强和定制用户的浏览体验。这些插件是由HTML、CSS和JavaScript构建的,并通过Chrome的API与浏览器进行交互,实现诸如网页拦截、数据存储、用户界面修改...
OpenAI Translator Chrome Extension是一个Chrome浏览器扩展程序,它可以利用OpenAI的语言模型进行多语言翻译。用户只需要选中需要翻译的文本,然后点击扩展程序图标即可获得快速准确的翻译结果。该扩展程序可用于...
Axure Chrome Extension是一款专为Axure设计的浏览器插件,它极大地扩展了Axure原型在谷歌浏览器中的功能,使得交互设计师和产品经理能够更便捷地在浏览器中预览、测试和分享他们的原型作品。这款插件的使用对于提高...
Axure Chrome Extension V0.6.3 是一个专为谷歌浏览器设计的小插件,主要用于增强Axure原型设计的功能。Axure是一款广泛使用的交互原型设计工具,它允许设计师创建线框图、原型和规格文档,而这个扩展则进一步提升了...
Chrome Extension 二维码生成器Lucky QR Generator是一款专为Chrome浏览器设计的扩展程序,它允许用户快速、方便地生成二维码,将网页链接、文本、联系信息等数据转化为二维码图像。这款扩展利用了JavaScript语言的...
如果你在用谷歌浏览器打开Axure生成的本地HTML文件时,提示安装扩展程序Axure RP Extension for Chrome,但是按照中文网提供的安装方法,在最新版的谷歌浏览器中已经无法安装成功。会提示:程序包无效:“CRX_HEADER...
Axure Chrome Extension V0.6.3 是一个专为网页原型设计工具Axure设计的浏览器扩展,它极大地提升了用户在Chrome浏览器中预览和编辑Axure RP项目时的效率和便利性。本教程将详细介绍该插件的功能以及如何进行安装。 ...
"原型图插件 axure-chrome-extension-V0.6.3"是针对谷歌浏览器(Chrome)的一个扩展,旨在帮助用户更方便地查看和测试Axure制作的原型设计。 首先,让我们深入了解一下Axure。Axure RP(Rapid Prototyping)是一个...
Axure导出的html文件在浏览器中打不开,是因为浏览器缺少“axure-chrome-extension”插件导致。只需要在扩展程序中安装一个插件“axure-chrome-extension”,就可以解决问题了。
标题中的“谷歌扩展程序之axure-chrome-extension.zip”指的是一个专门为谷歌浏览器(Chrome)设计的扩展程序,这个扩展程序的名称是“Axure Chrome Extension”。Axure是一款流行的产品原型设计工具,它允许设计师...
"chrome-extension-network.zip" 是一个包含示例代码的压缩包,专门针对Chrome扩展中的网络模块,旨在帮助开发者理解和实践如何利用网络接口进行各种网络操作。在本篇文章中,我们将深入探讨Chrome扩展的网络模块...
Axure RP Extension for Chrome是原型设计工具Axure RP的Chrome浏览器插件。因为在线安装需要访问Google Chrome在线商店,访问不了。所以提供一个离线版本进行安装。 安装方法: 1、打开Chrome浏览器,找到“工具 ->...