[Chrome扩展]6.火车票查询-release V1.0.0

火车票查询 – Chrome Plugins

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

Chrome WebStore:火车票查询

===========================

功能特性
1.提供一种简便的方式查询火车时刻表
2.同时可以看到余票信息

已知BUG
NO

变更历史
Train v1.0.0
1.根据起点、终点、时刻表查询。 2.显示列车时刻表及余票

[Chrome扩展]5.图片编辑器-release V1.0.2

GTools – Chrome Plugins

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

### 功能特性

1.通过选中网页内容直接在百度地图中搜索
2.新窗口打开链接
3.图片编辑

### 已知BUG
1.对与类似百度图片,页面上引入的不是地址栏上domain的图片就会加载失败。[FIXED 20131018]
2.在chrome当前tab也做页面切换后同样会导致图片加载失败。原因跟bug1一样,是canvas跨域引起。目前已解决tab和扩展之间的跨域问题。[FIXED 20131018]
3.多次调用会多次加载先前的图片源。但是不影响使用,性能上会有些许影响。

### 变更历史

#### GTools v1.0.2
1.解决页面中引起其他domain的图片导致加载失败问题。[BUG-1]
2.解决TAB做页面切换后图片加载失败问题。[BUG-2]
2.整个图片获取流程、代码结构调整。

#### GTools v1.0.1
1.对于跨域出现的问题做了提示,显得不叫友好,这样整个软件看起来比较完整。

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

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

原因未知

评论系统采用“多说”

以前网站评论垃圾评论太多了,虽然要审核才能显示,但是这个审核太费力,知道有插件可以用,但是懒得安装。还是算了,最后把评论管理了一段时间。

今天在别人的博客中看到了多说这款评论系统,试用了下海不错,主要是可以使用微博,qq这些通用账号登陆。

推荐使用,地址:http://duoshuo.com/

[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或则域名,如果用%代替,则表示完全开放。