Chromebook Pixel (2013) 安装Linux的方法

2015-4-20 19:54

同学最近淘了一台二手 Chromebook Pixel (2013)，这款笔记本最大的诱惑就是 12.85 寸但是配备了一块 2560 x 1700 分辨率的触摸屏。上网的体验不要太爽啊，在体验了一小时的 Chrome OS 之后，便感叹就只有一个浏览器而已啊！于是开始折腾如何安装 Linux，毕竟这款笔记本本来就对 Linux 支持很好。下面开始介绍安装过程。

由于这款笔记本是 x86 架构还自带 SeaBIOS，所以在安装 Linux 上省了不少功夫，很多非 SeaBIOS 的 Chromebook 都是需要刷固件才能引导 Linux 的。

# 启用开发者模式

启动电脑
按住 Esc 和 F3（刷新）按钮，这时候按电源键，即可进入 Recovery 模式
按 Ctrl+ D，会提示你是否要进入开发者模式，确认之后等一会系统就会转变成启用开发者模式

这时候每次开机屏幕都有警告提示，要么按 Ctrl + D，或者等待 30s 系统响一声便进入系统。

# 进入超级用户 shell

按 Ctrl+Alt+F2（→），之后你会看到一个登录提示
输入 chronos 作为用户名，没有密码
然后输入 sudo bash,以超级用户使用 shell

# 启用 SeaBIOS

在终端里面输入下面的指令：

# crossystem dev_boot_usb=1 dev_boot_legacy=1

之后重启电脑即可。之后每次进入 SeaBIOS 都要在开机的时候按 Ctrl + L

# 将 SeaBIOS 设置成默认启动

首先你需要破解硬件写保护，按照 wiki 上的说法需要拆机和跳线，具体的操作可以查看这个wiki (opens new window),拆机操作非常危险，请自己慎重考虑。

如果你已经成功破解硬件写保护，接下来就是解除软件写保护。同样是进入超级用户 shell 然后输入指令禁用软件写保护：

# flashrom --wp-disable

检查软件写保护：

# flashrom --wp-status

运行 set_gbb_flags.sh ：

# set_gbb_flags.sh

注意：新版本的 Chrome OS 已经把这个脚本移动到 /usr/share/vboot/bin/set_gbb_flags.sh位置了，然而并不在$PATH 环境变量中。

确认有下面的输出：

GBB_FLAG_DEV_SCREEN_SHORT_DELAY 0x00000001
GBB_FLAG_FORCE_DEV_SWITCH_ON 0x00000008
GBB_FLAG_FORCE_DEV_BOOT_LEGACY 0x00000080
GBB_FLAG_DEFAULT_DEV_BOOT_LEGACY 0x00000400

1
2
3
4

现在可以设置 SeaBIOS 为默认了：

# set_gbb_flags.sh 0x489

最后再重新启用写保护：

# flashrom --wp-enable

现在可以使用 Linux 安装 U 盘进行安装了。

# 写在最后

插上 U 盘，开机然后按 Ctrl+ L 发现启动光盘正常启动，然后选择安装之后突然提示。。。

not enough memory to load specified image

这时候不要慌张，在安装选择菜单点击 Tab 键，可以编辑启动命令，在双横线前面输入 mem=4G 注意是双横线前面！

恢复 Chrome OS，请参阅Recover your Chromebook (opens new window)

# 参考

Chrome OS devices (opens new window)

Chromebook (opens new window)

Installing Linux on the Chromebook Pixel (opens new window)

突破同源策略限制的方法

2015-4-20 19:54

# 同源策略基本介绍

同源策略（Same Origin Policy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。可以说 Web 是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。

浏览器的同源策略，限制了来自不同源的“document”或脚本，对当前“document”读取或设置某些属性。

但是随着互联网的发展跨域的需求也越来越迫切，有些时候我们需要突破同源策略。下面开始介绍突破同源策略的几种方法：

# 使用 HTTP 头

因为 JavaScript 无法控制返回的 HTTP 头，所以可以在服务器端这个 HTTP Header 即可：

self.set_header("Access-Control-Allow-Origin", "*")

# 使用 JSONP

Jsonp(JSON with Padding)是 json 的一种“使用模式”，可以让网页从别的网域获取资料。jsonp 是采用的 js 的回调机制来实现的。本质上是因为 GET 方法不受同源策略限制，然后获取到的数据不是 json，而是一段 JavaScript 并解释执行。

# 使用 iframe

上面两种都是比较常见和常用的突破浏览器的方法，这种不常见的才是重点。虽然使用 iframe 算不上优雅，但也算开了眼界。在开发 115 网盘的时候，发现 115 的主站网页和获取数据的网址是不同源的，也顺便研究了一下工作原理。
主站是：http://115.com/?mode=wangpan，
但是获取数据的 API 是：http://web.api.115.com/files/download?pickcode=？
这就造成了非同源，但是 115 巧妙的使用了一个桥接网页完成了跨域操作！
桥接网址：http://web.api.115.com/bridge_2.0.html?namespace=DownBridge&api=jQuery
关键代码：

if (parent) {
  var execObj = parent.window;
  if (params['namespace']) {
    var tmp = params['namespace'].split('.'),
      f;
    while ((f = tmp.shift())) {
      execObj = execObj[f];
    }
  }
  var method = params['api'] ? params['api'] : 'DataAPI';
  execObj[method] = $;
}

1
2
3
4
5
6
7
8
9
10
11
12

可以看到，桥接是首先判断父 Window 是否存在，获取 namespace 的值设置为 execObj 最后再获取 api 的值然后设置为 execObj 的一个方法，不过这个方法对应的值肯定是 $,也就是整个 JQuery，这样我们就可以使用页面 web.api.115.com 的 JQuery 发起数据请求从而绕过跨越的限制。

下面是 115.com 上面注入的 JS 实现方法：

set_down_url:function(){
    var self=this;
    DownBridge={};
      $('<iframe>').attr('src', 'http://web.api.115.com/bridge_2.0.html?namespace=DownBridge&api=jQuery').css({
        width: 0,
        height: 0,
        border: 0,
        padding: 0,
        margin: 0,
        position: 'absolute',
        top: '-99999px'
      }).one('load',function(){
        window.DownBridge.getFileUrl=function(pickcode,callback){
        this.jQuery.get('http://web.api.115.com/files/download?pickcode=' + pickcode, function (data) {
                  callback(data);
                }, 'json');
        };
        window.DownBridge.getFileList=function(cate_id,callback){
        this.jQuery.get('http://web.api.115.com/files?aid=1&limit=1000&show_dir=1&cid=' + cate_id, function (data) {
                  callback(data);
                }, 'json');
        };
      }).appendTo('html');
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

115 网站的这种实现方法很另类，不知道是否是有什么特殊需求导致的，但是很有意思～不过我还是不建议在网页里嵌入这么多的 iframe，严重影响用户体验，非常不推荐！

CSS使用box-shadow和border-radius的妙用

2015-3-17 15:08

CSS

使用 CSS 画出一个圆角矩形很简单，但是要画出一个和圆角接近平行的月牙就是需要一点技巧了。例如下面这个图片：

css

“首页”左边的那个白色和圆角平行的弧形就是我们要用 CSS 设计实现的。

# 先使用 box-shadow 制造一个长条：

box-shadow: 10px 0 0 0 rgba(245, 245, 245, 0.7);

效果如下图：

css

# 再使用 border-radius 使这个长条变成弧形：

border-radius: 0 0 100px 0;

效果如下图：

css

# 最后再嵌套一个 DIV 截取我们所需要的部分

overflow: hidden;

css

这样就达到我们一开始的图片效果了～

示例代码：点我点我 (opens new window)