`

chrome extension例子——选中文本笔记

阅读更多
作为练手,昨晚开发了一个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扩展开发——自动填表实例[收集].pdf

    Chrome 扩展开发 —— 自动填表实例 本文将详细介绍 Chrome 扩展开发中的自动填表实例,通过分析 manifest.json 配置文件,了解扩展应用的权限、内容脚本、浏览器行为和弹出页面的实现机制。 一、权限...

    Chrome插件,右键菜单转换选中文本为二维码

    【标题】:Chrome插件开发——创建右键菜单将文本转化为二维码 在现代互联网工作中,二维码的使用越来越普遍,从网址分享到数据传输,都离不开它的身影。针对这一需求,Chrome浏览器提供了一种便捷的方式——通过...

    Chrome浏览器插件axure-chrome-extension

    Chrome浏览器插件Axure Chrome Extension是一款专为Axure RP设计的工具,旨在增强Axure原型在Chrome浏览器中的体验。Axure RP是一款广泛使用的交互原型设计软件,它允许设计师快速创建 wireframes、prototypes 和 ...

    Chrome Extension (Chrome插件)开发官方最新文档(20190401)

    Chrome扩展(Chrome插件)是谷歌浏览器上的应用程序,它们能够增强和定制用户的浏览体验。这些插件是由HTML、CSS和JavaScript构建的,并通过Chrome的API与浏览器进行交互,实现诸如网页拦截、数据存储、用户界面修改...

    OpenAI Translator Chrome Extension

    OpenAI Translator Chrome Extension是一个Chrome浏览器扩展程序,它可以利用OpenAI的语言模型进行多语言翻译。用户只需要选中需要翻译的文本,然后点击扩展程序图标即可获得快速准确的翻译结果。该扩展程序可用于...

    axure-chrome-extension(axure浏览器插件).zip

    Axure Chrome Extension是一款专为Axure设计的浏览器插件,它极大地扩展了Axure原型在谷歌浏览器中的功能,使得交互设计师和产品经理能够更便捷地在浏览器中预览、测试和分享他们的原型作品。这款插件的使用对于提高...

    axure-chrome-extension-V0.6.3

    Axure Chrome Extension V0.6.3 是一个专为谷歌浏览器设计的小插件,主要用于增强Axure原型设计的功能。Axure是一款广泛使用的交互原型设计工具,它允许设计师创建线框图、原型和规格文档,而这个扩展则进一步提升了...

    ChromeExtension二维码生成器LuckyQRGenerator

    Chrome Extension 二维码生成器Lucky QR Generator是一款专为Chrome浏览器设计的扩展程序,它允许用户快速、方便地生成二维码,将网页链接、文本、联系信息等数据转化为二维码图像。这款扩展利用了JavaScript语言的...

    axure_chrome_extension_V0.6.3

    如果你在用谷歌浏览器打开Axure生成的本地HTML文件时,提示安装扩展程序Axure RP Extension for Chrome,但是按照中文网提供的安装方法,在最新版的谷歌浏览器中已经无法安装成功。会提示:程序包无效:“CRX_HEADER...

    axure_chrome_extension_V0.6.3 插件与安装教程

    Axure Chrome Extension V0.6.3 是一个专为网页原型设计工具Axure设计的浏览器扩展,它极大地提升了用户在Chrome浏览器中预览和编辑Axure RP项目时的效率和便利性。本教程将详细介绍该插件的功能以及如何进行安装。 ...

    原型图插件 axure-chrome-extension-V0.6.3

    "原型图插件 axure-chrome-extension-V0.6.3"是针对谷歌浏览器(Chrome)的一个扩展,旨在帮助用户更方便地查看和测试Axure制作的原型设计。 首先,让我们深入了解一下Axure。Axure RP(Rapid Prototyping)是一个...

    Axure谷歌浏览器插件axure-chrome-extension下载

    Axure导出的html文件在浏览器中打不开,是因为浏览器缺少“axure-chrome-extension”插件导致。只需要在扩展程序中安装一个插件“axure-chrome-extension”,就可以解决问题了。

    谷歌扩展程序之axure-chrome-extension.zip

    标题中的“谷歌扩展程序之axure-chrome-extension.zip”指的是一个专门为谷歌浏览器(Chrome)设计的扩展程序,这个扩展程序的名称是“Axure Chrome Extension”。Axure是一款流行的产品原型设计工具,它允许设计师...

    chrome-extension-network.zip

    "chrome-extension-network.zip" 是一个包含示例代码的压缩包,专门针对Chrome扩展中的网络模块,旨在帮助开发者理解和实践如何利用网络接口进行各种网络操作。在本篇文章中,我们将深入探讨Chrome扩展的网络模块...

    Chrome插件Axure RP Extension for Chrome下载

    Axure RP Extension for Chrome是原型设计工具Axure RP的Chrome浏览器插件。因为在线安装需要访问Google Chrome在线商店,访问不了。所以提供一个离线版本进行安装。 安装方法: 1、打开Chrome浏览器,找到“工具 -&gt;...

Global site tag (gtag.js) - Google Analytics