[Tool]Google Chrome Developer Edition

Google Chrome Developer Edition

Virus Scan:
VirusTotal - Free Online Virus, Malware and URL Scanner

What is Google Chrome Developer?

Google Chrome Developer Channel offers the same features as Google Chrome Standard, but has the ability to add & test plugins before compiling.

If you are looking to develop your own Chrome Browser Extensions, this is a good place start.

Quick Tutorial (Sample) for building extensions in chrome.

(You can find a list of API , Here: chrome.* APIs - Google Chrome Extensions - Google Code)

First, I strongly suggest you download NPP (NotePad Plus Plus), A portable version is located here.

(Click Here)

After you have download it, Run NotePad Plus Plus Portable, Run the Temp Install, Open the destination folder and run notepadd ++ it will open the application.

We are going to create a quick extension that will allow the user to search MPGH from anywhere/anytime (granted the site is up).

1. Create a folder (somewhere you can locate the files easily)

2. Run Notepad ++ (or any text editor of your choice)

3. Click File ---> New to start a new work document.

Note: Google Chrome Extensions are built with HTML, JSON(JavaScript Object Notation)/JavaScript & CSS.

4. Click File --> Save --> Change it from the default Save Type (*.txt) to All Files, Give it the name

manifest.json

5. Paste the following code into the manifest.json file and save it (I made sure to include notation, even though it is self explanatory, I want to be sure you understand the purpose of each peace of code)

Note: Suggested Icon size is 16X16 (for some reason), however, I used 32 X 32
You should also add the icon to the same directory as your manifest and html files. The Icon I used for this sample can be found here
http://www.iconspedi*****m/dload.php?up_id=88926 (you should resize (this will auto download the .ico, if you use it name it mpghicon.png"

Code:

{
  "_comment" : "The following is to set the name of the extension",
  "name": "MPGH Search",
  "_comment" : "The following is to set the Version # of the extension",
  "_comment" : "I chose 0.1 because this is not complete (though    functional, I would like to see everyone else create thier own version and make it better.",
  "version": "0.1",
  "_comment" : "The following adds the description of the extension",
  "description": "Search MPGH Quickly, Anywhere/Anytime",
     "browser_action": {
    "default_icon": "mpghicon.jpg",
     "popup": "mpgh.html"
  },
  "_comment" : "This part is used to set permissions (such as API), I am not using a API, so I will leave it blank, You can also comment it out using the _comment method",
  "permissions": [
    ""
  ]
}

6. Save the file (manifest.json) into the newly created folder.

7. Now we need to create the html file, So go ahead and create a new html file called mpgh.html (as listed in the source above as the page to popup)(HTML will be (in NPP) under Hyper Text Markup Language)

8.add the following code (again, I added notation to the source, this will help you determine what is going on, this way you can make some changes

Note:You can use full html pages and css, Example tags <!DOCTYPE html><head><script></script></head><body></body></html> etc

Note: <!DOCTYPE html> is the document type for HTML5, I strongly suggest you HTML4 users , get on board

Code:

<script language="JavaScript" type="text/javascript">
<!--
//Created a quick Javascript function to search MPGH using URL , this way we don't need a API , or to figure out a search ID
function searchmpgh(){ 
//using DOMS to grab the value of the Input box with the name "search"
window.open("http://www.mpgh.net/forum/search.php?do=process&query="+document.search.search.value); 
//window.open will open a new tab in chrome with the results
}
//-->
</script>
<form name="search">
<input type="text" name="search" value="">
<input type="submit" value="Search MPGH" onClick="searchmpgh()">
</form>

9. The Extension has been completed and you can now test (before final compilation)

Click on the "wrench icon" located in the upper right hand corner, then go down and hover over tools, then click "extensions"

Image:

You should now see a list of installed extensions (if any, if not the extensions section will be empty)

10. Over to the right side you will see a (+) symbol labeled "developer mode" , Click the (+) and it will expand 3 buttons specifically used for extension testing and building.

11. Click the first button, "Load Unpacked Extension" (again this is used to test a extension before you compile it for release)

12. Load the entire extensions folder.

Once loaded, you should have a new extension on your list.

also take note to the new icon next to your tools button ("Wrench Button" in upper right)

Note:The reason my image has a white background is because I did this fast, saved it as a .jpg and was to lazy to re-open PS and save it as a .png

if you click the new button, you will see your new Google Chrome Application, and test it.

There is a lot more that can be done with this, and I will be explaining that VERY soon.

[Tool]Google Chrome Developer Edition

Post a Reply

Tags for this Thread