GGshow reloaded GGshow reloaded

February 16, 2013

Webpage Editable Switch

FREE! A handy web browser extension/add-on to turn document body contentEditable on or off.

* Pencil icon used in this extension was downloaded from http://openclipart.org

Webpage Editable Switch 1.0 for Firefox

Download WES 1.0 for Firefox

Webpage Editable Switch 1.0 for Chrome

Download WES 1.0 for Chrome

Filed under: Web,Web Browsers — Tags: , , , , , — GG @ 10:50 pm

April 3, 2012

Debugging PHP application with Netbeans, Xdebug, and Chromium (or Google Chrome) in Ubuntu

  1. Requirements:
    Firstly, we must have Netbeans, Xdebug, Chromium (or Google Chrome) installed.How to check if Xdebug installed?

    user@ubuntu:~$ php -v
    PHP 5.3.6-13ubuntu3.6 with Suhosin-Patch (cli) (built: Feb 11 2012 02:17:16)
    Copyright (c) 1997-2011 The PHP Group
    Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies
        with Xdebug v2.1.0, Copyright (c) 2002-2010, by Derick Rethans
  2. Install Xdebug helper extension
    Visit this URL using Chromium (or Google Chrome).
    Press [Add To Chrome] button to install the Xdebug helper extension.
  3. Configure Xdebug helper options
    Under Chrome extensions, Xdebug helper, press Options.
    Select Netbeans for IDE key.
    Add domains to the domain filter whitelist.
  4. Configure Netbeans
    Tools > Options > General > Web Browser, press [Edit] button.
    Press [Add] button to add a new browser, set configuration as below:Process:
    /usr/bin/chromium-browser
    or
    /usr/bin/google-chromeArguments:
    -remote “{URL}” –user-data-dir=~/.cache/chromium
    or
    -remote “{URL}” –user-data-dir=~/.cache/google-chrome[OK]

    Ubuntu Netbean Chromium Debugging

  5. Debugging
    You can now debug a project (Ctrl+F5) or debug a file (Ctrl+Shift+F5)

    Ubuntu Netbean Chromium Debugging

    To control debugger session
    Finish Debugger Session (Shift+F5)
    Continue (F5)
    Step Over (F8)
    Step Into (F7)
    Step Out (Ctrl+F7)
    Run to Cursor (F4)
    or use the buttons in Debug Toolbar

Filed under: Web,Web Browsers — Tags: , , , , , — GG @ 12:08 pm

December 9, 2009

Hello, Google Chrome World! Log for my first Google Chrome extension test.

Google Chrome now has extensions, and GG now want to have create some Google Chrome extensions ^^

By referring to the Getting Started tutorial and samples on Google Code Labs, I’ve created my first Google Chrome “Hello, World!” extension. It was much easier than expected.

Steps:

  1. Create a folder called mygc_ext01.
  2. Create a text file called manifest.json inside mygc_ext01 folder, contains code:
    {
      "name": "My First Extension",
      "version": "1.0",
      "description": "The first extension that I made.",
      "browser_action": {
        "default_icon": "icon.png"
      },
      "permissions": [
        "http://api.flickr.com/"
      ]
    }
  3. Prepare an PNG icon called icon.png put into the same folder.
    I’ve tested it with .ico file in my Windows 7, it works.
    If we use a .ico icon, we should also change the value for default_icon to our .ico filename (e.g. filename.ico).
  4. Now load the extension into Google Chrome.
    Click on Tools Google Chrome Tools menu and choose Extensions.
    Enable Developer Mode.
    Click Load unpacked extension…
    Browse for the mygc_ext01 folder, and press OK.
    My icon successfully displayed as an extension button on Google Chrome Google Chrome Extension.
  5. Edit manifest.json, add popup parameter below default_icon
    ...
      "browser_action": {
        "default_icon": "icon.png",
        "popup": "mypage.html"
      },
    ...
  6. Create a new file called “mypage.html” put into the same folder.
    Display something in the html page body.
  7. On Google Chrome Extensions Developer Mode, press the Reload link behind My First Extension. And now if I click on my extension button, mypage.html will be displayed in a popup.

I’m planning to create some Google Chrome extension, but for now still need to sort my bunch of idea.

Below is an working example mygc_ext01 where mypage.html contains code to retrieve and display some picture from flickr.

Download:
Google Chrome extension sample code

Reference:
Getting Started: Building a Chrome Extension

Filed under: Web,Web Browsers — Tags: , — GG @ 5:51 pm

© 2017 GGSHOW | Powered by WordPress