Hook All the Functions in JavaScript Files

During my daily development, I encounter a request to add code snippets before and after each function call for all the JavaScript files. I have figure out three ways to do this

1. Overwrite the Function.prototype.call, this will only effect the directly call the call method from a function object such as foo.call(…). The call method will not triggered with directly call function with brace, such as foo(…)

disadvantage: not cover all the function even normal function calls

2. Use custom or use some AOP JS library to hook specify function. This is also could be extended by use a recursive method to hook all the function object in a give scope such as window in browser.

such as hooker lib, https://github.com/rcorp/hooker

jquery AOP plugin

advantage: easy to use

disadvantage: not cover all of the functions in the JS files, such as anonymous functions are not included.

3. Use some script to parse all the JS files and inject codes before and after all the functions.

This article is mainly to talk about the tool which I created for automatic inject the codes before and after the function calls.

It is called hookjs, which is written in python. It could be checkout from my github repo(https://github.com/shangerxin/PersontalTools). The binary version could be download from the bin folder.

$ hookjs -h

usage: hookjs.exe [-h] [-p PATH] [-s START] [-e END]                   [-f [BLACK_FILES [BLACK_FILES ...]]]                   [-d [BLACK_DIRS [BLACK_DIRS ...]]]

A command line JavaScript hook tool for inject start, end codes into every JavaScript functions. Currently only support uncompressed EMCScipt 5. Any errors will be output into the error.log file.

optional arguments:

-h, –help   show this help message and exit

-p PATH, –path PATH  The path to the JavaScript file or directory

-s START, –start START  The start code snippet which will be injected at the                         begin of each function

-e END, –end END     The end code snippet which will be injected at the end                         of each function

-f [BLACK_FILES [BLACK_FILES ...]], –black-files [BLACK_FILES [BLACK_FILES ...]]                         Use regex expression to define the black files list, the files will not be hooked

-d [BLACK_DIRS [BLACK_DIRS ...]], –black-dirs [BLACK_DIRS [BLACK_DIRS ...]]                         Use regex expression to define the black dirs list, the directory and sub directory will not be searched

Created by Edwin, Shang(Shang, Erxin), License under GNU GPLv3. Version 1.0.0

Example:

Inject codes to a JS files, the original JS content

  1. x = findMax(1, 123, 500, 115, 44, 88);
  2.  
  3. (function(){
  4. })();
  5.  
  6. function findMax() {
  7. var i;
  8. var max = -Infinity;
  9. for (i = 0; i < arguments.length; i++) {
  10. if (arguments[i] > max) {
  11. max = arguments[i];
  12. }
  13. }
  14. return max;
  15. }

 

run command

  1. hookjs.exe -p e:\demo.js -s console.log("start"); -e console.log("end");
  1. x = findMax(1, 123, 500, 115, 44, 88);
  2.  
  3. (function(){console.log(start);
  4. console.log(end);})();
  5.  
  6. function findMax() {console.log(start);
  7. var i;
  8. var max = -Infinity;
  9. for (i = 0; i < arguments.length; i++) {
  10. if (arguments[i] > max) {
  11. max = arguments[i];
  12. }
  13. }
  14. console.log(end);return max;
  15. console.log(end);}

 

Limitations:

The tool is not works with compressed JS file such as jquery-min etc. To add hook for these kinds of JS files, it required to format the JS first then use the tool the inject the JS codes.

Current it is not design for support arrow function syntax which is added in EMCAScript 6

Have fun.

Automatic Export About:Config Content Compare the Differece between for Firefox

Requirement:

We need to compare the difference between the configuration changes between the new vision of the FF and the previous version

We wish to compare the configuration setting in plain text. Then we could use the compare tools such as beyond compare or winmerge to give us a quick visual for the difference.

The Problem:

There is not a official way to export the about:confg page from FF into plain text file. There is a prefs.js file locate in the firefox profile folder, it contains some of the configuration setting but not all.

Known solutions to export the about:config but not well enough:

Solution for export the about:config:

Use the GUI automation tool(autoit) to help export the configuration directly from the about:config page. The script is export-opened-firefox-config.au3 which could be download from my github repot

  1. Install autoit, which double be download from official website follow the previous link
  2. Download the export-opened-firefox-config.au3
  3. Before run the script close all the Firefox process existed in the current system
  4. Run the script export-opened-firefox-config.au3
  5. Open the Firefox that you want to export the about the configure content
  6. The script will start automatically and wait for it stops, please make any user input during the script execution
  7. The output.txt will be generated at the same location of the script file export-opened-firefox-config.au3 which contain all the configuration values
  8. Check the last line of the output.txt contain the last item of the about:config. If the values are same then all is well. If not please modify the sleep time for the script to give more calculate time for the low performance system.

Solution for generate the difference compilation results:

Use python to parse and generate the previous generate configuration files and the current user.js settings which contain in the LR-INSTALL-DIRECTORY\dat\FFProfile\user.js. The python script could be check out from my personal tools repo from github

  1. Install python 2.7.x, if current system doesn’t contain python environment
  2. Install xlsxwriter from pip or download the package install manually. Check this link, if you doesn’t familiar with python
  3. Download the script
  4. Copy and replace the about config content files and the user.js into the data folder to make it follow this file structure

2015-12-02_110835

2015-12-02_111617

5. Execute the python script the output files will be overwrite and generated automatically  Note: If the excel file is not required you could common the script lines relative to generate excel to only generate plain text report. The key/value pair is separate by semicolons like this:

2015-12-02_111832

References

Note: the content of the wiki may adapt to the old version of FF to check the new version please follow the link supplied in the wiki pages.

 

Use Python to Create a Tree View Command Line Tool

In recent days I need to generate a directory free from the window command prompt. As I known there is a DOS tool called tree could do this. But it is not quite fit for my requirement. Here is an example which the graphic generated by built-in tree command in window.

D:\PersonalTools>tree D:\emacs-24.5 /A
卷 WareHouse 的文件夹 PATH 列表
卷序列号为 64CA-A0C3

D:\EMACS-24.5
+—admin
|   +—charsets
|   |   \—mapfiles
|   +—coccinelle
|   +—grammars
|   +—notes
|   +—nt
|   \—unidata
+—build-aux
|   \—snippet
+—doc
|   +—emacs
|   +—lispintro
|   +—lispref
|   +—man
|   \—misc
+—etc
|   +—charsets
|   +—e
|   +—forms
|   +—gnus
|   +—images
|   |   +—custom
|   |   +—ezimage
|   |   +—gnus
|   |   +—gud
|   |   +—icons
|   |   |   +—allout-widgets
|   |   |   |   +—dark-bg
|   |   |   |   \—light-bg
|   |   |   \—hicolor
|   |   |       +—128×128
|   |   |       |   \—apps
|   |   |       +—16×16
|   |   |       |   \—apps
|   |   |       +—24×24
|   |   |       |   \—apps
|   |   |       +—32×32
|   |   |       |   \—apps
|   |   |       +—48×48
|   |   |       |   \—apps
|   |   |       \—scalable
|   |   |           +—apps
|   |   |           \—mimetypes
|   |   +—low-color
|   |   +—mail
|   |   +—mpc
|   |   +—newsticker
|   |   +—smilies
|   |   |   +—grayscale
|   |   |   \—medium
|   |   \—tree-widget
|   |       +—default
|   |       \—folder
|   +—nxml
|   +—org
|   +—refcards
|   +—schema
|   +—srecode
|   +—themes
|   \—tutorials
+—info
+—leim
|   +—CXTERM-DIC
|   +—MISC-DIC
|   \—SKK-DIC
+—lib
+—lib-src
+—lisp
|   +—calc
|   +—calendar
|   +—cedet
|   |   +—ede
|   |   +—semantic
|   |   |   +—analyze
|   |   |   +—bovine
|   |   |   +—decorate
|   |   |   +—symref
|   |   |   \—wisent
|   |   \—srecode
|   +—emacs-lisp
|   +—emacs-parallel
|   +—emulation
|   +—erc
|   +—eshell
|   +—gnus
|   +—international
|   +—language
|   +—leim
|   |   +—ja-dic
|   |   \—quail
|   +—mail
|   +—mh-e
|   +—net
|   +—nxml
|   +—obsolete
|   +—org
|   +—play
|   +—progmodes
|   +—term
|   +—textmodes
|   +—url
|   \—vc
+—lwlib
+—m4
+—msdos
+—nextstep
|   +—Cocoa
|   |   \—Emacs.base
|   |       \—Contents
|   |           \—Resources
|   +—GNUstep
|   |   \—Emacs.base
|   |       \—Resources
|   \—templates
+—nt
|   +—icons
|   \—inc
|       +—arpa
|       +—netinet
|       \—sys
+—oldXMenu
+—site-lisp
\—src
\—bitmaps

A quite complicate file structure for emacs 24.5. There are several limitations for this command.

  1. It can’t control the iteration depth
  2. When display with files it doesn’t generated the dash lines which is not clearly to indicate the file structure
  3. If we could give a depth parameter I also want to display the sub items as ellipsis to indicate there is something under but which is omitted

So I use python to write a custom version to enhance this command called treex. It support generated the same structure as the tree command but also provide additional control switch. The source code is already pushed to my personal repository in GitHub. Feel free to check it out.

The help information is

usage: treex.py [-h] [-f] [-d DEPTH] [-m] [-e] path

A Cmd Line Tool for Graphically displays the folder structure of a drive or
path

positional arguments:
path

optional arguments:
-h, –help            show this help message and exit
-f, –file            Display the names of the files in each folder
-d DEPTH, –depth DEPTH
Display the depth number
-m, –mark            Mark the item is file or directory
-e, –ellipsis        Mark the next sub-item with ellipsis

Create by Edwin, Shang(Shang, Erxin) License under MIT. Version 1.0.0

Try to use the treex to generate a depth 2 directory structure

D:\PersonalTools>c:\Python27\python.exe treex.py D:\emacs-24.5 -d 2
Folder path listing
D:\emacs-24.5
+—admin
|   +—charsets
|   +—coccinelle
|   +—grammars
|   +—notes
|   +—nt
|   \—unidata
+—build-aux
|   \—snippet
+—doc
|   +—emacs
|   +—lispintro
|   +—lispref
|   +—man
|   \—misc
+—etc
|   +—charsets
|   +—e
|   +—forms
|   +—gnus
|   +—images
|   +—nxml
|   +—org
|   +—refcards
|   +—schema
|   +—srecode
|   +—themes
|   \—tutorials
+—info
+—leim
|   +—CXTERM-DIC
|   +—MISC-DIC
|   \—SKK-DIC
+—lib
+—lib-src
+—lisp
|   +—calc
|   +—calendar
|   +—cedet
|   +—emacs-lisp
|   +—emacs-parallel
|   +—emulation
|   +—erc
|   +—eshell
|   +—gnus
|   +—international
|   +—language
|   +—leim
|   +—mail
|   +—mh-e
|   +—net
|   +—nxml
|   +—obsolete
|   +—org
|   +—play
|   +—progmodes
|   +—term
|   +—textmodes
|   +—url
|   \—vc
+—lwlib
+—m4
+—msdos
+—nextstep
|   +—Cocoa
|   +—GNUstep
|   \—templates
+—nt
|   +—icons
|   \—inc
+—oldXMenu
+—site-lisp
\—src
\—bitmaps

Here is another result for generate with ellipsis and marks

D:\PersonalTools>c:\Python27\python.exe treex.py D:\emacs-24.5 -d 2 -e -m
Folder path listing
D:\emacs-24.5
[d]+—admin
[d]|   +—charsets
[d]|   |   \—…
[d]|   +—coccinelle
[d]|   +—grammars
[d]|   +—notes
[d]|   +—nt
[d]|   \—unidata
[d]+—build-aux
[d]|   \—snippet
[d]+—doc
[d]|   +—emacs
[d]|   +—lispintro
[d]|   +—lispref
[d]|   +—man
[d]|   \—misc
[d]+—etc
[d]|   +—charsets
[d]|   +—e
[d]|   +—forms
[d]|   +—gnus
[d]|   +—images
[d]|   |   +—…
[d]|   +—nxml
[d]|   +—org
[d]|   +—refcards
[d]|   +—schema
[d]|   +—srecode
[d]|   +—themes
[d]|   \—tutorials
[d]+—info
[d]+—leim
[d]|   +—CXTERM-DIC
[d]|   +—MISC-DIC
[d]|   \—SKK-DIC
[d]+—lib
[d]+—lib-src
[d]+—lisp
[d]|   +—calc
[d]|   +—calendar
[d]|   +—cedet
[d]|   |   +—…
[d]|   +—emacs-lisp
[d]|   +—emacs-parallel
[d]|   +—emulation
[d]|   +—erc
[d]|   +—eshell
[d]|   +—gnus
[d]|   +—international
[d]|   +—language
[d]|   +—leim
[d]|   |   +—…
[d]|   +—mail
[d]|   +—mh-e
[d]|   +—net
[d]|   +—nxml
[d]|   +—obsolete
[d]|   +—org
[d]|   +—play
[d]|   +—progmodes
[d]|   +—term
[d]|   +—textmodes
[d]|   +—url
[d]|   \—vc
[d]+—lwlib
[d]+—m4
[d]+—msdos
[d]+—nextstep
[d]|   +—Cocoa
[d]|   |   \—…
[d]|   +—GNUstep
[d]|   |   \—…
[d]|   \—templates
[d]+—nt
[d]|   +—icons
[d]|   \—inc
[d]|       +—…
[d]+—oldXMenu
[d]+—site-lisp
[d]\—src
[d]    \—bitmaps

The key technical point is the depth first traversal algorithms, and I implement it with nonrecursive mode to reduce the stack usage.

The other key point is how to generate the graphic. There is a pattern between the second line and the previous line. So I use it. The implementation could be found from the source.

That’s all. Happy coding.

 

Python基础教程,第一章 简介(Python Fundamental, Charpter 01 Introduction)

对Python编程语言做了基本的介绍
Make a basic introduction about python programming language.

主要内容:

  • Python的简介, introduction
  • Python的哲学, philosophy
  • Python的排名, current state
  • Python开发的项目, projects
  • Python的编程风格, programming style
  • Python的协议, license
  • Python的开发工具, development environment
  • Get required lasts lines from a huge text file in python

    During my work, I need to parse the result from some huge log files. The result is always save at the end of the file. So I need find a way to get the required last lines to accelerate the parse speed. Here is the function I have written to achieve this requirement in python.

    1. def last_lines(filename, lines=1):
    2. '''
    3. return the last lines from the specify files
    4. '''
    5. with open(filename, 'rb') as fh:
    6. fh.seek(0, os.SEEK_END)
    7. if fh.tell() == 0:
    8. return []
    9. fh.seek(-2, os.SEEK_END)
    10. #while not BOF
    11. while fh.tell() > 0:
    12. cur_char = fh.read(1).decode()
    13. if cur_char == '\n':
    14. lines -= 1
    15. if lines > 0:
    16. fh.seek(-2, os.SEEK_CUR)
    17. else:
    18. break
    19. return [line.decode() for line in fh.readlines()]

     

    Use oscilloscope Check the AC noise of a Power Source

    How to use a oscilloscope display the wave shape of AC power source?
    1. Check the oscilloscope is connected with attenuator probes, and adjust to the right attenuation factor. 1x, 10x 100x, … the more big the number the more attenuator value

    2. Adjust the oscilloscope to the relative measure scope and set to the right channel

    3. Connect the ground with the clamp to the ground of the source
    10092166

    4. Use one probe connecting with zero line, the other connected with the supply line

    5. Adjust the sample time to make the wave shape looks better

    6. The noise pulses are displayed during my measurement result

    WP_20141212_14_13_43_Pro

    WP_20141212_14_10_58_Pro

    Use Python puka client with RabbitMQ

    Send a message to RabbitMQ

    1. #!/usr/bin/env python
    2.  
    3. import sys
    4. sys.path.append("..")
    5.  
    6.  
    7. import puka
    8.  
    9. client = puka.Client("amqp://localhost/")
    10.  
    11. promise = client.connect()
    12. client.wait(promise)
    13.  
    14. promise = client.queue_declare(queue='test')
    15. client.wait(promise)
    16.  
    17. promise = client.basic_publish(exchange='', routing_key='test',
    18. body="Hello world!")
    19. client.wait(promise)
    20.  
    21. print " [*] Message sent"
    22.  
    23. promise = client.queue_declare(queue='test', passive=True)
    24. print " [*] Queue size:", client.wait(promise)['message_count']
    25.  
    26. promise = client.close()
    27. client.wait(promise)

    Setup WordPress Site in Ubuntu

    To install wordpress in Ubuntu Server, a few steps are required:

    1. Update your system by

    # apt-get update
    # apt-get upgrade
    

    2. install apache2

    # apt-get apache2

    3. install MySQL

    # apt-get mysql

    4. install WordPress

    # apt-get wordpress

    5. Configure WordPress in ubuntu

    6. Configure your wordpress site to support it access from the root of url

    7. install ftp to your server to support wordpress install plugin

    # apt-get ftp

    8. if encounter a error, “can’t create directory”, when install a plugin from admin panel, check this link to change the configuration to fix it