November 2011 - Page 2 of 3

Installing WordPress using cpAddons – You do not have sufficient permissions to access this page.

I have a problem today using cpAddons to install my WordPress into one of my subdirectory. I receive "You do not have sufficient permissions to access this page." error upon logging into my WordPress panel. I believe this is not the first time i encounter this problem but this problem only appear if you are not using the default database "wp" as suggested by cpAddons. I google around for a while but didn't get the answer i want or any valuable solution. Hence, i debugged it myself.

Apparently, everything generated by cpanel cpAddons was correct. The database data and wp-config.php was set correctly. Even the database user permission was also correctly given. The file permission of wp-config.php was correct.

Now, i remove all the tables generated by cpAddons and run through WordPress configuration page and setup the WordPress installation again. This will install all the tables that i just deleted into the database. Guess what? It works. This means that the database tables installed by cpAddons is a buggy one. Therefore, we will have to erase the tables through phpmyadmin so that WordPress can be install correctly.

Step by step guide to write a Google Chrome Extension

I have absolutely no experience in writing a Google Chrome Extension myself. But if i can do it. I believe majority of the developer will want to know how i did it and what are the process that involve for me to accomplish this task. Hence, i write this out hopefully people get the idea of how Google Chrome Extension is build and how easy it is to make one once you understand the rule involve in building a google chrome extension. On Google Chrome Extension "Getting Started" page, it's pretty simple and straight forward for anyone to build an app in that scale. However, understanding it will be the task i'm gonna set out for. Hopefully this will be short and easy to understand. Let's start.

Getting Started with Google Chrome Extension

Like many people out there, i started with "HELLO WORLD". Basically you need the following item for a simple Google Chrome extension.

a Folder to keep all your files
a manifest.json which is also a config file for Google Chrome Extension
png or ico image which act as a logo to represent your extension
html file which is the display of your chrome extension.

Once you have the above 4 things, your chrome extension is ready to build. You can head down to the Google Chrome Extension "Getting Started" page to do the above and jump back here to what i wanted to do.

Description of my Google Chrome Extension

Before i get started, just wanted to explain a little bit on what i am going to do and what are the requirement of my extension. I am building a private extension for one of my website to ease my job a little bit. Here are the sequence of this Google Chrome Extension.

I need a chrome extension (obviously)
upon clicking on the extension, it should present me with a form
within the form, the extension should determine the page "url" and "what is the title of the page" and place the correct url and title into the form.
Once i click on the submit button, it will post the record to my website and submit this website feed.

A pretty straight forward chrome extension for any developer but for a starter, this is pretty interesting on how it can be done.

Setup the manifest.json file

Before anything, i believe the most important thing to start would be on the setup file. And here is what i have

{
"name": "PRIVATE SUBMIT",
"version": "1.0",
"description": "PRIVATE app to submit a website into for viewing",
"permissions": ["tabs", "http://*/*"],
"browser_action": {"default_icon": "icon.png","popup": "form.html"}
}

some explanation. Here we are giving permission to any tab with any URL other than https url. The name, description and version is self explained. The browser action is what our extension on the browser looks and will do for us. default icon is an image and popup. That's all we need on your manifest.json.

Our form

Here will list out the form i have when it pop up upon clicking on the extension. I have also added jQuery library from google code into my google chrome extensionfor my conveniences.

<div>
<label for="name">Name*</label>
<input id="name" class="input" type="text" name="name" value="" />
</div>

<div>
<label for="url">URL*</label>
<input id="url" class="input" type="text" name="url" value="" />
</div>

<div class="submit"><input id="button" class="button" type="button" value="Submit!" /></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
  chrome.extension.onConnect.addListener(function(port) {
    var tab = port.sender.tab;

    // This will get called by the content script we execute in
    // the tab as a result of the user pressing the browser action.
    port.onMessage.addListener(function(info) {
      $("#url").val(tab.url);
      $("#name").val(info.title);
  	});
  });

      chrome.tabs.executeScript(null, {file: "content_script.js"});

$(document).ready(function() {

  $('#button').click(function(){
	var name	= $("#name").val(),
	    url		= $('#url').val();
	$.ajax({
            type: "POST", //or GET
            url: "http://private.com/submitasite/",
            data: {
  		name: name,
  		url: url},
            crossDomain:true,
            cache:false,
            async:false,
            success: function(msg){
              console.log(msg);
           },
           error: function(jxhr){
               console.log(jxhr.responseText);
                //do some thing
           }
         });
  	return false;
  });
});
</script>

Upon execution of the popup when a user clicked on the extension, the form will first load out and execute a programming executed content_script.js to fetch some data from the current website page. It will fetch the title of the page and pass it back to the listener where it will store it into our textfield. Now, all we have to do is click on the submit button where the ajax will be fired to wherever your service is located. Before that, you will also need the instruction of the content script.

var additionalInfo = {
  "title": document.title,
};
chrome.extension.connect().postMessage(additionalInfo);

The content script is pretty straight forward. We create a json object and post it to our extension where everything else is explained previously. For the backend part, you should know what to do right? 🙂

Sending data from background.html to popup display in Google Chrome Extension

You are trying to send data from your background.html back to your popup display in your google chrome extension. However, all you read was sending using message in google chrome to initial a one way message from your background.html to your content_script.js. But you do not understand why they are using a "tabs" api instead of extensions since you are still talking to your extension instead of the page itself.

Well, you are not wrong here to question the answer given from your result. The reason being is that you do not need to send data from background.html to your popup display. The reason is pretty simple, they are not separated. However, you do not know how to update the popup display when you get the data on your background.html. I believe the issue is similar to the one i previously written. You do not need that additional background.html if you are going to update your popup display and not working with other extension. All you have to do is write all your listener (assuming content_script is firing up to the extension) to your popup display. And you should get all you want in popup display without getting all headache about background.html not working etc. Hence,

Copy all your background.html code into popup display
Remove background.html entirely on manifest.json
Now try to update like a normal page on your popup display

And it should do the trick. Hope it helps 🙂

How to get Popup and onClick work together on Google Chrome Extension

Firstly, if you try to use a popup in your manifest.json and find out that your chrome broweraction onclick listener doesn't seems to work. You are in the right place then. And if you read properly on Google Chrome Extension API page, the following onclick will not work properly with popup if you have define it on your manifest.json file.

chrome.browserAction.onClicked.addListener(function(Tab tab) {...});

Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.

Well, i have another solution for you if you want both popup and onclick on Google Chrome extension to work together.

Popup and onclick working together on Google Chrome extension

Here is probably what you are doing. You are most likely placing your onclick event handler on your background.html file and awaiting for click of your chrome extension to do something within the onclick. And maybe sending them to your popup display. You soon realize that if the popup options is set on your manifest, your onclick won't work. Now, in order to make everything work, just use the popup instead of both as popup will overwrite the onclick event handler and you want the display to be out. What you should do is to paste the code from your background.html to your popup as you shouldn't have the need for a background.html as you are not communicating with many extension. Therefore, you should really either use popup or an onclick but not both 🙂

You might have guess, i was the dumb one here who did the above and realize i'm dumb. *shy* . hahaha. Hope it helps 🙂

25 Google Chrome Extension For Web Developer and Designer

Firefox is really good web development tool for both web developer and designer for many years. However, it is getting slower and utilize a lot of resources which can be as much as 2GB on my laptop which really doesn't seems to justify. The best alternative i am looking at? Chrome. (DEFINITELY NOT IE ! RAGE!) Here are 25 Google Chrome extension that every web developer and designer will definitely be interested to have.

WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

Even web developers and designers will shout "YEAH!" with this extension.

Pretty Beautiful Javascript

Automatically makes Javascript files you come across on the net look great! Combines both Beautifier (http://jsbeautifier.org/) and Prettify (http://code.google.com/p/google-code-prettify/) to unpack/unobfuscate, format, and add syntax highlighting. No need for copy/pasting or anything else it all happens on the fly for your convenience.

PHP Ninja Manual

With PHP Ninja Manual you can search easily and very quickly in PHP 5.3 documentation in 7 languages. Speed is everything we want in web development.

CoNetServ (Complex Network Services)

Extension that integrates network tools into the browser. I find it pretty useful for both network and web developer to know their server well.

jQuery API Browser

Simple extension for jQuery developers that allows quickly search through API documentation. Web developers and designers who uses jQuery surely find this valuable.

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

Chrome Sniffer

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Version detecting is being implemented. One of the most interesting thing a web developer will want to know.

Edit This Cookie

Edit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

IE Tab (Windows)

It exactly emulates IE by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9). Any web developers and web designers will definitely want a Chrome plugin that can assist you will cross browser issues.

Awesome Screenshot: Capture & Annotate

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click. One of the easiest and most powerful screen capture apps on Chrome. For both web developer and designe will definitely want this on your Chrome so that you can explain to your client more clearly on what are you referring on the site. Picture speaks a thousand words.

Firebug Lite for Google Chrome

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

However, for web developer who is using this you might face problems as not all features are available on a lite version. Here are some of it which you might want to take note of.

Cannot read external resources
Won't work well on pages with frames
JavaScript debugger isn't available
Net Panel isn't available

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person and best of all, we will be enjoying it on Chrome!

speedtest.net

Sometimes things doesn't go well and you will start wondering whether its your internet connection issue. Test it on your Chrome straight away!

Resolution Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size. Something web developers and designers won't want to miss.

Pendule

Pendule extended web developer tools for Chrome. It gives you more features for both web developer and designers could ever think of. Something similar to web developer tool above but built within Chrome developer tool.

Lorem Ipsum Generator

Both web developer and designer will appreciate this Chrome extension whenever they want to test a particular form or just throw some text into a design.

Click&Clean (Windows)

For windows user, you are in luck. Click & Clean is something you want to have on your list, especially web developers. Just think of all the clearing of cache makes me headache but that's not all this Chrome extension do.

Scan your PC for Malware
Delete your browsing history,
Remove download history,
Erase temporary files,
Clear cookies and Empty cache,
Delete client-side Web SQL Databases
Remove Flash Cookies (LSOs)
Protect your privacy by cleaning up all traces of your internet activity,
Clean up your hard drives and Free up more disk space, icluding secure file deletion using external applications, like CCleaner or Wise Disk Cleaner.
Watch flash videos offline, without being connected to the Internet!

Web Edit

Just press F12 on any http:// webpage, and edit text and delete things like photos, and embed elements. You can even delete a YouTube video off a page! Once you've had your fun, just press F2 to turn off edit mode, for a convincing looking defaced webpage. Web designers will definitely find this useful infront of your client.

Eye Dropper

Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page. bla bla bla.. i bet most web developers know more than i do.