[Chrome扩展]4.图片编辑器-release V1.0.0

GTools V1.0.0 release

图片编辑器第一个版本经过差不多一天时间已经完成。

源码及CRX文件

源码GitHub:https://github.com/GESTAR/GTools
CRX下载:GTools

安装

1.下载GTools.zip,解压后得到GTools.crx
2.chrome打开chrome://extensions/
3.把GTools.crx拖到chrome://extensions/页面的chrome中

使用

1.百度地图搜索功能:选中页面文字-右键-GTools-百度地图中搜索 xxx 或 选中页面文字-右键-百度地图中搜索 xxx
2.新选项卡打开链接:鼠标移到链接上-右键-新页面中打开
3.图片处理功能(核心功能):鼠标移到网页图片上-邮件-编辑图片
目前只支持IMG里的图片,背景图片会在以后版本支持

已知bug

1.对与类似百度图片,页面上引入的不是地址栏上domain的图片就会加载失败。
2.在chrome当前tab也做页面切换后同样会导致图片加载失败。原因跟bug1一样,是canvas跨域引起。目前已解决tab和扩展之间的跨域问题。

[Chrome扩展]问题汇总


1.Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ chrome-extension-resource:”.

从Chrome Extenstion V2开始,不允许执行任何inline javascript代码(也就是html内的任何js代码都不允许执行)
尤其是onclick=”xxx()”这种写法,是不可取的。需要用eventListener或者类似的东西来为元素绑定事件的监听。
后来将所有页面内代码移出,打包成.js文件,然后采用外链js文件的方式,问题迎刃而解。
REF:http://coolgod.me/?p=241


Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught SecurityError: An attempt was made to break through the security policy of the user agent.

canvas跨域问题,类似AJAX跨域

[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

Mysql升级后获取表结构问题

因为安装TFS需要把服务器上的Mysql从4.x升级到了5.x,一直运行的好好的。

后来说用mysql workbench连接后获取不到表结构,另报错:”1558: Column count of mysql.proc is wrong. Expected 20, found 16. Created with MySQL 50077, now running 50158. Please use mysql_upgrade to fix this error”

究其原因因为升级后系统表有改动不兼容。所以需要运行mysql_upgrade mysql -h 192.168.30.254 -u xxxxuojie -p处理

安装passport和discuz云桌面部署过程中遇到问题总结

1.MQ同步:如果数据库被锁住不能更新消息到MQ服务器。

2.MQ同步工具:注意连接数据库字符串的的encode需要和数据库的一致,查看数据库编码可以通过show variables like ‘character%';否则会导致中文乱码而同步是吧

3.MYSQL:mysql安装后默认是只允许本地localhost来连接数据库。如果mysql和应用不在同台服务器,需要个mysql远程连接的权限。及时在同台机子,不用localhost连接也需要给权限。可以通过grant all PRIVILEGES on discuz.* to ted@’123.123.123.123′ identified by ‘123456’; 123.123.123.123表示允许连接的ip或则域名,如果用%代替,则表示完全开放。

HTML5-Geolocation

HTML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法。

1、getCurrentPosition()

getCurrentPosition 用来获取用户当前的位置信息,该方法带有三个参数:

1、successCallback:成功获取用户位置信息后的回调函数
2、errorCallback:获取用户位置信息失败时的回调函数
3、positionOptions:可选。获取用户位置信息的配置参数

i)successCallback
successCallback 函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值:

1、accuracy:精确度
2、latitude:纬度
3、longitude:经度
4、altitude:海拔
5、altitudeAcuracy:海拔高度的精确度
6、heading:朝向
7、speed:

ii)errorCallback和 successCallback 函数一样带有一个参数,对象字面量格式,表示返回的错误代码。它包含以下两个属性:

1、message:错误信息
2、code:错误代码。

其中错误代码包括以下四个值:

0 — UNKNOW_ERROR:表示不包括在其它错误代码中的错误,这里可以在 message 中查找错误信息
1 — PERMISSION_DENIED:表示用户拒绝浏览器获取位置信息的请求
2 — POSITION_UNAVALIABLE:表示网络不可用或者连接不到卫星
3 — TIMEOUT:表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

iii)positionOptions
positionOptions 的数据格式为JSON,有三个可选的属性:

1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。
3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。

2、watchPosition()
watchPosition 的三个参数和 getCurrentPosition 完全一样,不同的是 watchPosition 是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置,只要发生变化,浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ,否则触发 errorCallback。另外和  getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数(setTimeout/setInterval)那样,返回一个 ID ,可以被清除掉。这里是用接下来介绍的 clearWatch 清除。

3、clearWatch()

接受一个 watchPosition 返回的 ID,功能是清除对用户位置的循环监视。

一款不错的Mysql Proxy–Amoeba

amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy。它集中地响应应用的请求,依据用户事先设置的规则,将SQL请求发送到特定的数据库上执行。基于此可以实现负载均衡、读写分离、高可用性等需求。与MySQL官方的MySQL Proxy相比,作者强调的是amoeba配置的方便(基于XML的配置文件,用SQLJEP语法书写规则,比基于lua脚本的MySQL Proxy简单)。

amoeba相当于一个SQL请求的路由器,目的是为负载均衡、读写分离、高可用性提供机制,而不是完全实现它们。用户需要结合使用MySQL的 Replication等机制来实现副本同步等功能。amoeba对底层数据库连接管理和路由实现也采用了可插拨的机制,第三方可以开发更高级的策略类来替代作者的实现。这个程序总体上比较符合KISS的思想。

amoeba主要解决以下问题:

a). 数据切分后复杂数据源整合
b). 提供数据切分规则并降低数据切分规则给数据库带来的影响
c). 降低数据库与客户端连接
d). 读写分离路由

PS:网上看到文章说Amoeba比较占内存,有待考证。

参考:http://docs.hexnova.com/amoeba/

VSFTP安装配置

VSFTP是一款相当不错的Linux FTP服务。管理起来很方便。

1. 安装

使用chkconfig –-list vsftp来查看是否装有vsftpd服务;
使用yum命令直接安装:yum -y install vsftpd
然后为它创建日志文件:touch /var/log/vsftpd.log
这样简单的两个命令就完成了vsftp的安装,但是如果你现在想这样ftp://your_ip来访问的话,那还不行,还需要配置权限!

2. 启动与配置自启动

使用chkconfig –-list vsftp来查看vsftpd服务启动项情况;
如果看到的是如下显示的结果:
vsftpd 0:off 1:off 2:off 3:off 4:off 5:off 6:off
服务全部都是off的,注意这里的off表示的是服务器启动的时候是否会自启动服务,我们使用如下命令来配置其自启动:

chkconfig –level 2345 vsftpd on #2345对应的是上面对应的0-6项

查看与管理ftp服务:
启动ftp服务:service vsftpd start
查看ftp服务状态:service vsftpd status
重启ftp服务:service vsftpd restart
关闭ftp服务:service vsftpd stop

3. 配置vsftp服务

编辑/etc/vsftpd/vsftpd.conf文件,配置vsftp服务:
#vi /etc/vsftpd/vsftpd.conf

3.1 编辑修改如下项目:

anonymous_enable=NO #设定不允许匿名访问
local_enable=YES #设定本地用户可以访问。注:如使用虚拟宿主用户,在该项目设定为NO的情况下所有虚拟用户将无法访问。
chroot_list_enable=YES #使用户不能离开主目录
xferlog_file=/var/log/vsftpd.log #设定vsftpd的服务日志保存路径。注意,该文件默认不存在。必须要手动touch出来
ascii_upload_enable=YES #允许使用ASCII模式上传
ascii_download_enable=YES #设定支持ASCII模式的上传和下载功能。
pam_service_name=vsftpd #PAM认证文件名。PAM将根据/etc/pam.d/vsftpd进行认证

#以下这些是关于Vsftpd虚拟用户支持的重要CentOS FTP服务配置项目。默认vsftpd.conf中不包含这些设定项目,需要自己手动添加RHEL/CentOS FTP服务配置。
guest_enable=YES #设定启用虚拟用户功能。
guest_username=vsftp #指定虚拟用户的宿主用户。-RHEL/CentOS中已经有内置的vsftp用户了,没有通过useradd vsftp    passwd vsftp新建
user_config_dir=/etc/vsftpd/vuser_conf #设定虚拟用户个人vsftp的RHEL/CentOS FTP服务文件存放路径。存放虚拟用户个性的CentOS FTP服务文件(配置文件名=虚拟用户名)

3.2 创建chroot list,将ftp用户加入其中:

touch /etc/vsftpd/chroot_list
echo vsftp >> /etc/vsftpd/chroot_list

3.3 进行认证:

首先,安装Berkeley DB工具,很多人找不到db_load的问题就是没有安装这个包。
yum install db4 db4-utils
然后,创建用户密码文本vi /etc/vsftpd/vuser_passwd.txt ,注意奇行是用户名,偶行是密码
ftpuser1
ftppass1
ftpuser2
ftppass2
接着,.生成虚拟用户认证的db文件
db_load -T -t hash -f /etc/vsftpd/vuser_passwd.txt /etc/vsftpd/vuser_passwd.db
随后,编辑认证文件/etc/pam.d/vsftpd,全部注释掉原来语句
再增加以下两句
auth required pam_userdb.so db=/etc/vsftpd/vuser_passwd
account required pam_userdb.so db=/etc/vsftpd/vuser_passwd
最后,创建虚拟用户个性RHEL/CentOS FTP服务文件
mkdir /etc/vsftpd/vuser_conf/
vi /etc/vsftpd/vuser_conf/ftpuser1
内容如下:

local_root=/opt/var/ftp1 虚拟用户的根目录(根据实际修改)
write_enable=YES 可写
anon_umask=022 掩码
anon_world_readable_only=NO
anon_upload_enable=YES
anon_mkdir_write_enable=YES
anon_other_write_enable=YES

4. 为目录附权限并重启动vsftp服务:

mkdir /opt/var/ftp/ftpuser1
chmod  777 /opt/var/ftp/ftpuser1
service vsftpd restart