顯示具有 chrome 標籤的文章。 顯示所有文章
顯示具有 chrome 標籤的文章。 顯示所有文章

2015年6月1日 星期一

Chrome NaCL 開發心得小記

目前開發到一半, 先加減記一下。之後有多什麼心得再來補充。

為什麼要用 NaCL

自然是方便重用既有的 C/C++ 程式啦。

雜項

  • NaCL 無法在本機檔案中執行 (file://...)。web pages、Chrome Web App、 Chrome Extension 才能用 NaCL。若要在本機試 web pages 的話, 需要跑 local web server。NaCL SDK 內有附一個 local web server, Getting Started 的範例用 make serve 執行 local web server。建議先玩 Getting Started 裡面的兩個範例, 了解 NaCL 的架構。
  • 有支援 POSIX 和 ptherad, 還算堪用, 不過 port Linux 的程式時會遇到很多 Linux 才有但 POSIX 沒有的程式碼 (網路、時間、pthread 各式各樣都有)。
  • 分成 PNaCL (編成 bitcode 執行檔, 使用前再轉成執行檔) 和 NaCL (native binary)。若需要放到 Chrome Web Store, 後者比較不方便, 得編多份不同平台的 binary
  • 得用 NaCL SDK 附的工具, 我試過用 nm 和 ar 都無效, 改用 NaCL SDK 附的 llvm-nm 和 llvm-ar 才有正常結果。
  • 若想使用 stdio 的函式 (如 FILE 相關函式), 要另外使用 nacl_io library。需要在 Makefile 補上 -I$(NACL_SDK_ROOT)/include -I$(NACL_SDK_ROOT)/include/pnacl-lnacl_io

除錯

參考資料: 官方文件

1. 基本的除錯方式是透過 stderr 導到執行 Chrome 的 terminal (預設行為), 或寫到 DevTools 的 console (透過 /dev/console1 ~ 3)。

但是導到 DevTools console 的輸出會被限制行寬, 超出的字會被截掉。還有由於 stderr 是 unbuffered, 輸出會亂掉, 若想將 stderr 導到 /dev/console1, C/C++ 程式內記得改設 stderr 為 line buffer ( setlinebuf(stderr) )

2. 開發 extension 時, 即使沒需求, 也可考慮加個 background page, 這樣可以長駐在 Chrome 內, 方便寫 log 到 background page 的 console, 用 DevTools 觀察 console 的 log 除錯。

3. 可以用 NaCL SDK 附的 nacl-gdb attch 到使用 NaCL 的 process, 但是手續頗麻煩的。但是不用 gdb, native code 出錯時更麻煩。

參考資料: Running nacl-gdb

我一開始在 Mac OS X + Pepper 42 試失敗, 後來在 Linux + Pepper 43 試成功了。不確定和平台或版本是否有關, 先前有遇到 Mac OS X + Pepper 42 的 bug (使用 nacl_io library 後, 輸出到 stderr 的資料沒有顯示在執行 Chrome 的 terminal 上), 但在 Linux + Pepper 43 沒事。

以開發 Chrome extension 為例:

  • 執行 Chrome 要加參數 --enable-nacl-debug --no-sandbox
  • 編譯時用 -O0 -g
  • 需要設一些 gdb 參數, 我包成兩個 script, 放在 native code 專案的根目錄:
$ cat run_gdb.sh 
#!/bin/bash

if [ "$NACL_SDK_ROOT" = "" ]; then
        echo "Please set the env variable NACL_SDK_ROOT"
        exit 1
fi

echo -e "\033[1;33m"
echo "Please ensure that Chrome is run with --enable-nacl --enable-nacl-debug --no-sandbox"
echo "Ref: https://developer.chrome.com/native-client/devguide/devcycle/debugging"
echo -e "\033[m"

cd $(dirname $0)
ROOT=$(pwd)
cd ../../
${NACL_SDK_ROOT}/toolchain/linux_x86_glibc/bin/i686-nacl-gdb -x sync/nacl/nacl.gdb
$ cat nacl.gdb 
target remote localhost:4014
remote get nexe my.nexe
file my.nexe
remote get irt my.irt
nacl-irt my.irt

先重新載入 extension, 再執行 run_gdb.sh, 成功後會出現 gdb 的 prompt。注意, 執行 Chrome 有加 --enable-nacl-debug 時, 就一定要跑 nacl-gdb, 因為 Chrome 會停住 NaCL process, 等著被 gdb attach。

在 Ubuntu 14.04 上編 stable chromium 43

參考資料

步驟

1. 從這裡找到最近的 stable version VERSION

2. 取得程式和安裝相依套件

$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ export PATH=$PATH:/path/to/depot_tools
$ fetch --nohooks chromium
$ fetch --nohooks blink
$ cd src
$ ./build/install-build-deps.sh
$ git checkout VERSION  # 可和 git tag 對照一下
$ git show VERSION # 取得 commit 編號 COMMIT
$ (edit ../.gclient) # 設 "safesync_url" 為 COMMIT
$ gclient sync --with_branch_heads  # 沒有 --with_branch_heads 會出錯

3. 產生編譯所需的檔案和編譯

$ cd /path/to/chromium/src
$ gclient runhooks
$ ./build/gyp_chromium
$ ninja -C out/Debug chrome

2013年12月21日 星期六

在 Chrome DevTools 修改 CSS 並同步回檔案裡

Chrome DevTools 最近的新功能, 參考 Chrome DevTools Revolutions 2013 - HTML5 Rocks, 作法如下:

  1. DevTools: settings -> workspace, 點選 add folder 加入開發用的目錄。允許 Chrome 讀寫該目錄下的檔案。
  2. 開啟網址 (本機或網路上的), 在 DevTools 的 source panel 找到要同步存檔的檔案, 按右鍵選 Map to Network Resource。
  3. 重新載入該頁。

注意:

  • 即使直接開啟 workspace 目錄內的檔案, 仍需要執行 "Map to Network Resource" 該步, 沒作這步讓我卡了一陣子 ...。
  • 只能同步存外部 CSS 檔, html 本體無法同步存檔, 仍得自己按 Ctrl+S。

成功後改網頁就快多啦, 在 html 內寫好骨架, 幫主要元件加上 class, 之後就在 DevTools 內選 tag, 直接在 class 內加 CSS rules, 調整參數。調整的當下就會存回檔案了, 真是超爽的啦。

備註: 依官方的說明, 也可以同步 Sass。

2011年5月24日 星期二

隨手亂搞: 「逆向工程」改 Chrome Extension

原本想改 RePlurk Chrome, 改成我自己慣用的輸出格式, 到作者的 Blog 找原始碼, 發覺下載位置已掛了。不知道要怎麼採正規方式解封 Chrome extension 再重包。索性來玩看看比較髒的改法。
  1. 從 Chrome 執行檔的 link 找到 Chrome 放的位置在 C:\Users\MY_ACCOUNT\AppData\Local\Google\Chrome\Application 。 
  2. 再從此找到 extensions 放在 C:\Users\MY_ACCOUNT\AppData\Local\Google\Chrome\User Data\Default\Extensions。
  3. 看到一堆亂碼的目錄, 一個個進去看, 找到 RePlurk Chrome 的目錄, 和關鍵的原始碼: RePlurk.js
  4. 參考作者原本參考的 Greasemonkey 的 RePlurk, 了解大概的格式, 明白要改的東西只是最後輸出那行
  5. 對照 RePlurk.js 的內容, 很快就搞定了。
  6. 和原本猜想的一樣, 關掉 Chrome 再開啟 Chrome, 會重載入所有 extensions, 然後就OK啦。
整體來說還滿順利的, 花的時間應該比我寫這篇的時間還短, 運氣不錯。或著說, 我寫隨手記的速度還是太慢了, 要好好改進啊 ......。

2010年6月15日 星期二

試改 Chrome Extension

extension Create Link 滿好用的, 可以自定取出網址和網頁標題的格式, 方便貼到 blog 或是 plurk。美中不足的是, 它沒支援短網址。有不少 extension 提供短網址服務, 可惜沒提供像 CreateLink 那樣自制的格式, 讓我能按一個鍵就取出短網址並以我想要的格式排版。比方說按個鍵產生 "SHORT_URL (TITLE)", 就能直接貼到 plurk 上了。

看了一下 Shorten URLs 和 Create Link 的程式碼後, 決定抽出 Shorten URLs 產生短網址的程式碼, 加到 CreateLink 裡。比想像中簡單許多, 懂 JavaScript 的話, 只要了解 Chrome Extension 的規範, 就能輕易上手。不過不知是不是 Chrome 的問題, 有時 Extension 會沒反應, 但重開 Chrome 就好了。

改完的結果在這裡, 整個修改流程如下:
  1. 閱讀 Chrome Extension 的入門教學。照著做一遍就會了, 再看一下如何除錯就能上工了。
  2. 在 github 上 Fork CreateLink 的專案, open source 真好啊。
  3. 在 Windows 上用 TortoiseGit 連 github, 這一步花掉我最久的時間, 實在是很挫折的事。參考官網說明。途中遇到不少問題, 最後不知怎麼弄對了, 懶得理了。下回考慮用 andLinux 連 github。不過這樣得溫習 git 的指令, 原本就是懶得查指令, 結果讓 TortoiseGit 能和 github 連線, 反而花了更多時間...。
  4. 載入本機未封裝的 CreateLink, 改一下 manifest.json, 確定自己的修改有發揮作用。個人認為改程式時, 這是最重要的第一步, 愈早完成愈好。
  5. 看一下 Shorten URLs 的程式明白怎麼用 XmlHttpRequest 透過 GET 連網站, 再查一下相關參數說明, 將 async 設成 false 即可。將程式寫成等三秒沒結果就放棄短網址改用原網址。原本有考慮用 jQuery 做, 看到原作者全部檔案加起來都比 jquery-1.4.2.min.js 小 (34.2KB vs. 70.4KB), 就打消這個念頭了。
  6. 為了能用 JavaScript 連 tinyurl 使用它的 API, 得在 Chrome Extension 裡允許 cross site javascript, 參考官網說明輕鬆解決。
  7. Create Link 程式寫得很乾淨, 改起來很容易。最後卻是花了不少時間將改完的結果 push 回 github。
第一次改別人的程式並 push 回 open source repository (雖說只是 push 回自己的啦), 還有寫瀏覽器擴充套件, 滿有意思的。最後, 就用剛才改好的 CreateLink 產生連結貼到微網址吧!!



在 Fedora 下裝 id-utils

Fedora 似乎因為執行檔撞名,而沒有提供 id-utils 的套件 ,但這是使用 gj 的必要套件,只好自己編。從官網抓好 tarball ,解開來編譯 (./configure && make)就是了。 但編譯後會遇到錯誤: ./stdio.h:10...