[Chrome扩展]3.图片编辑器-需求


今天决定做一个简单的图片编辑器,先简单的写下需求,以及一些后期可以做的比较有意思的几个点。以后会想到了点好玩的就更新此文档。

GitHub:https://github.com/GESTAR/GTools

一、主要功能点

1.鼠标右键弹出“编辑图片”[完成-20131012]
2.新打开一个页面,载入img。[完成-20131012]
3.通过腾讯开源的Alloy对图片进行简单处理。[完成-20131012]
4.编辑后图片下载保存。

二、后期功能点

1.除了支持img标签图片外,支持background图片。
2.代码封装

三、问题

1.canvas跨域。

这个可以使用代理解决,但是我们不希望有个自己服务器中转,主要考虑网速和图片比较大的情况。
现在的解决方案是,img src为base64格式,而不是url形式,这样可以解决跨域问题。
base64数据通过extension长连接connection解决。
这样就剩问题2了。怎么在插件里吧页面上的图片转为base64格式。

2.网路图片转为base64编码

1.为了跨域使用chrome.extension.connect/chrome.extension.onConnect/chrome.tabs.connect/chrome.tabs.executeScript技术实现
中间tabs和extension之间消息传递比较复杂
2.base64使用canvas的toDataURL
3.对于tab切换或页面中引入其他domain的图片,解决方案为先打开图片tab,然后在此tab上executeScript解决

[Chrome扩展]2.一个莫名其妙的错误

1.在mainfest.json中如果加入

"app" : {
		"launch" : {
			"web_url" : "http://tomner.com"
		},
		"urls" : ["http://tomner.com"]
	},

对于app官方说明:

app

可安装的webapp,包括打包过的app,需要这个字段来指定app需要使用的url。最重要的是app的启动页面——当用户在点击app的图标后,浏览器将导航到的地方。
更详细的信息,请参考文档hosted apps和packaged apps.:

会在加载插件时候出现错误:

尝试安装此扩展程序时出现以下警告:

  • ‘contextMenus’ is only allowed for extensions, legacy packaged apps and packaged apps, and this is a hosted app.

原因未知

[Chrome扩展]1.第一个扩展应用-右键菜单

很久以前就想写写chrome的插件,一直没这精力,主要是比较懒。今天心血来潮想研究研究,最开始就想做个比较好玩的东西,向来想去最后说先做个简单的,“选中文字-右键菜单-百度地图搜索”。就这么个简单的应用。

刚开始弄来弄去,参考了很多demo,也看了json viewer的代码,拎到自己写的插件里总是不好使。晚上继续呗。终于找到个比较好的。然后自己修修改改还真成了。废话不多少,直接上代码。

manifest.json
manifest.json

{ 
	"name": "SIBM", 
	"description": "通过选中网页内容直接在百度地图中搜索", 
	"version": "0.0.0.1", 
	"permissions": ["contextMenus", "tabs"], 
	"background": { 
		"scripts": ["menu.js"] 
	}, 
	"manifest_version": 2 
} 

menu.js

function genericOnClick(info, tab) {
	window.open(info.linkUrl); 
} 
function selectionOnClick(info, tab) { 
	console.log(info);
	console.log(tab)
	window.open('http://map.baidu.com/?newmap=1&ie=utf-8&s=s%26wd%3D'+info.selectionText); 
} 
var link = chrome.contextMenus.create({
	"title": "新页面中打开",
	"contexts":["link"],
	"onclick":genericOnClick
	}); 
var selection = chrome.contextMenus.create({
	"title": "百度地图搜索",
	"contexts":["selection"],
	"onclick":selectionOnClick
	});

效果:

20131010215544

参考:

1.http://www.jb51.net/article/31708.htm

2.https://developers.google.com/chrome/web-store/docs/get_started_simple?hl=zh-CN

3.http://open.chrome.360.cn/extension_dev/overview.html