Build a Chrome Extension with VueJS

It turns out quite easy to build a Chrome Extension. Basically the extension is a web application containing HTML, JS, images, etc. I tried to build a simple extension using VueJS recommended by colleagues.

There’s just 1 limitation that affected me: The eval JS function is disabled in Chrome Extensions for security reasons. That means there will be no dynamic templates, but only pre-compiled Vue components. Here’s the blog which explained in detail: https://dzone.com/articles/what-i-learned-about-vuejs-from-building-a-chrome

And this blog has very good instructions on how to start a Chrome Extension development with NPM and Vue:  https://blog.damirmiladinov.com/vuejs/building-chrome-extension-with-vue.html#.We7W8OBxW-Y

After all the steps in the above blog are done, I started working on the `app/scripts.babel/popup/Popup.vue` file and adding UI and functions in it while gulp watch is running to rebuild the project when any watched file has been changed. There was 1 issue where gulp can’t watch too many files so here’s the fix:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

🙂

Cherokee 完美配置 Joomla! 1.7.x

下面是从头开始配置 Joomla! 1.7.x 的步骤. 环境是 Ubuntu 11.10 64bit + Cherokee 1.2 + PHP 5.3 + MySQL 5.1:

  1. 登录到 cherokee-admin
  2. vServers > + > Manual. 以下假设建立的 vServer 是 mysite
  3. vServers > mysite > Basics :
    1. 在 Document Root 填写 Joomla! 的安装路径, 例如 /var/www …
    2. Dirctory Indexes: index.php, index.html
  4. vServers > mysite > Behavior:
    1. 添加 PHP 支持: + > Languages > PHP. 如果添加失败, 可能是没有安装 php5-cgi
    2. 将 Default > Handler 改为 Redirection, 并添加如下重定向规则:
      1. (External) ^/administrator/?$ /administrator/index.php
      2. (Internal) ^/(.*)$ /index.php?/$1
    3. 添加漏洞保护:
      1. + > Manual > Regular Expression, 并添加一下表达式, 它们之间是 OR 的关系即可
        1.  mosConfig_[a-zA-Z_]{1,21}(=|\=)
        2. (\<|<).*script.*(\>|>)
        3. base64_encode.*\(.*\)
        4. GLOBALS(=|\[|\%[0-9A-Z]{0,2})
        5. _REQUEST(=|\[|\%[0-9A-Z]{0,2})
      2. Handler : HTTP Error, HTTP Error: 403
    4. 不是必须的, 可以添加静态内容的压缩和过期时间
      1. + > Manual > Extensions : .html, .htm, .css, .js
      2. + > Manual > Extensions : .jpg, .png, .gif, .jpeg
  5. 在 Joomla! 管理后台里, 开启 URL 重写

参考链接: http://www.cherokee-project.com/doc/cookbook_joomla.html (Cherokee 娘家的文档, 竟然没有 URL 重写那部分, 奇怪. )

Joomla! 1.7.x 缺省模板的 Page Class

真是不理解, Joomla! 1.7的缺省模板Beez2里居然没有把 Page Class 写在 <body> 里面. 在菜单条目里可以给每一个页面设置 Page Class, 但如果 Page Class 不是出现在模板的 <body> 里, 那通过 Page Class 来做特定页面的 CSS 布景就不能实现.

还好, 找到了实现方法: 编辑/templates/beez_20/index.php.

在33行找到:

$doc->addScript($this->baseurl.’/templates/beez_20/javascript/md_stylechanger.js’, ‘text/javascript’, true);

在之后添加成:

$doc->addScript($this->baseurl.’/templates/beez_20/javascript/md_stylechanger.js’, ‘text/javascript’, true);
$pageclass =  & $app->getParams(‘com_content’);

然后, 找到 <body> 并改为:

<body class=”<?php echo $pageclass ->get(‘pageclass_sfx’); ?>”>

任务完成. 😀

参考链接: http://forum.joomla.org/viewtopic.php?f=619&t=623802&p=2653319#p2653319

古董越老越好, 浏览器可不是

今年初, 终于, 微软自己也受不了自己的IE6了. IE6倒计时网站开通后, 微软也呼吁网民放弃”好汉不提当年勇”的IE6浏览器. 遗憾的是, 尽管中国大陆毫无竞争的拿下这款娘家不疼亲家不爱的浏览器的最高份额, 但微软显然”don’t give it a shit”居然没有做个中文版出来 😀

十年前, 一款浏览器诞生了, 它的名字是IE6. 而现在是2011年, 是网络新标准的时代了. 是时候说再见了.

尽管我从2004年就抛弃IE6了, 但为了我的访客和用户们, 我不得不保留一份IE6作为测试使用(相信很多做过web前端的朋友都是如此, 并为了IE6而加班加点). 希望IE6早些安息吧.

如果想在网站中明确声明本站不支持IE6, 可以如此(下面应该写在<head></head>里面):

<script type="text/javascript">
	//CHECK FOR IE6
	function is_ie6(){
	    return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined));
	}
	function alert_ie6(){
	    if(is_ie6()){
		alert('我注意到您还在使用微软IE6.0浏览器或者基于IE6.0内核的浏览器. ');
		alert('很抱歉本站在IE6.0下有点走样子, 因为本站采用很多新技术而IE6.0已经是10年前的产品了, 现在IE最新版是9.0, 更快也更安全, 也能更好的浏览本站.');
	    }
	}
</script>

然后在<body>里面加上onload=”alert_ie6()”就可以了. 脚本来源: http://www.stemkoski.com/how-to-detect-ie6-with-javascript/

最后, 除了IE, 更有很多好的浏览器等你选择: Mozilla FireFox, Google Chrome, Opera, Safari 都很不错. 😀