[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.