Archive for the ‘前端开发’ Category

如何制作chrome扩展程序

简单实现了一个 chrome 的扩展,方法如下:
首先新建一个文件夹,用编辑器写一个文件名为 manifest.json 的文件:

{
  "name": "抓猫!",
  "version": "1.0",
  "description": "你能抓住她吗?",
  "browser_action": {
  "default_icon": "icons/icon_19.png",
  "popup": "files/game.html"
  },
  "icons": {
    "16": "icons/icon_16.png",
    "19": "icons/icon_19.png",
    "32": "icons/icon_32.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  }
}

这其中,如果需要多语言支持的话,可以添加default_locale,并将name&description字段修改为:

{
  "name": "__MSG_name__",
  "description": "__MSG_description__",
  "default_locale": "zh_CN"
}

并在插件目录下添加 _locales 目录,内置语言文件,如图所示:

这其中 messages.json 内容如下:

{
  "name": {"message": "Catch Cat!"},
  "description": {"message": "Can you catch it ?"}
}

插件主程序完成后,直接编写插件所调用的html就可以了 “popup”: “files/game.html”
调试时,可以勾选chrome浏览器扩展程序里面的“开发人员模式”,载入正在开发的扩展程序即可。

开发完成后,使用浏览器打包扩展程序,就可以发给朋友们玩了。欢迎下载体验:
http://uicss.cn/test/catch-cat.crx

离线存储

开发WebApp时,遇到一个问题:
如果把页面配置到服务器上,当服务器挂掉或者用户离线的时候,那这个App也就没法工作了。
而当我把页面打包进App里面,又有一个新问题,更新不方便。每次更新的时候都要重新提交。

部门就此组织了一次《application cache》的相关讨论。使用离线存储,来解决上述问题:

view-source:http://uicss.cn/test/coolcode.html
这是一个打包进App的应用地址,阅读源代码可以看到,html标记上给了一个manifest配置文件。里面列出了需要高速缓存的、用于离线访问的文件。在支持mime类型为.manifest的服务器上,它能够列出浏览器应该下载和保存以便以后使用的所有文件。

除了本例中的全部离线存储的用法之外。它还可以通过配置 NETWORK 来列出那些绝不能高速缓存的文件。以及通过配置 FALLBACK 使用户离线的时候,可以跳转到离线提示的页面。

CACHE MANIFEST

NETWORK:
*

FALLBACK:
/ offline_message.html

CACHE:
http://uicss.cn/test/js/jsformat.js
http://uicss.cn/test/js/htmlformat.js

注:文中的*号意指,除了cache的文件之外,其他文件都不做缓存处理。

跨域修改iframe内的文字

所用到的js脚本:

<script type="text/javascript">
document.getElementsByTagName("iframe")[0].src="replace.php?"+document.getElementsByTagName("iframe")[0].src;
<
/script>

replace.php代码:

<?php
$site=$_SERVER['QUERY_STRING'];
$ch = curl_init();
          
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
          
curl_setopt($ch, CURLOPT_URL, $site);
          
$content  = curl_exec ($ch);
          
curl_close ($ch);
$content=str_replace("browser","崔凯到此一游",$content);
//将iframe对方页面的browser替换为崔凯到此一游
echo $content;
exit;

演示地址:http://uicss.cn/test/replace.html

用书签查询网站pr值

在chrome或者firefox都有pr查询工具,访问某个网页的时候,自动显示当前网站的pr值。
但并不是所有的页面都需要查询,于是弄了一个查询pr的书签,仅在需要查询的时候,再点击查询。

javascript:(function()%7Bvar%20d=document;var%20l=location;var%20u=l.toString();var%20s=d.createElement('script');var%20b='http://uicss.cn/pr/';var%20n=b+'url.php?'+'&url='+encodeURIComponent(u);window.open(n);%7D)();

使用方法:
添加上面的js代码到自己的书签就可以了。在需要查询pr的网址,直接点书签即可:

用书签查询网站pr值

阅读全文 »

基于新浪SAE平台的电视预告

一直喜欢看“天津卫视”的《非你莫属》,但是事情比较多,总是忘记节目开始的时间。
于是在“新浪SAE”搭了一套“预告”的代码,实现思路如下:

1.写一个fnms.php负责发邮件到139邮箱,139邮箱内设置开启短信通知
2.部署cron任务定时执行fnms.php

fnms.php :

  1. < ?php
  2. $mail = new SaeMail();
  3. $ret = $mail->quickSend( '收件人@139.com' , '非你莫属,天津卫视' , '去看电视吧,伟大的崔凯''发件人@sina.cn' , '密码' , 'smtp.sina.cn' , 25  ); // 指定smtp和端口
  4.     
  5. //发送失败时输出错误码和错误信息
  6. if ($ret === false)
  7. var_dump($mail->errno(), $mail->errmsg());
  8. ?>

cron设置:

  1. cron:
  2.     - description: 非你莫属
  3.     url: fnms.php
  4.     schedule: every Sunday of month 21:12
  5.     timezone: Beijing

阅读全文 »

Page 1 of 121234510...Last »
崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯博客 All rights reserved. 京ICP备09029324号.