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
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)manifest.json
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
https://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"
6. Save the file (manifest.json) into the newly created folder.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": [ "" ] }
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
9. The Extension has been completed and you can now test (before final compilation)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("https://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>
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.
Last edited by NextGen1; 04-06-2011 at 09:03 PM.
@CAFlames
That's Twice it didn't attach for me, Re-Adding now
Re-uploaded, New Virus Scan for .rar
@CAFlames , also added a quick tutorial on how to make your first plugin, I created a quick extension which will allow you to search MPGH, any time.
More to come.
CAFlames (04-07-2011)
Looks good, I will read it fully when I am more awakeeeeeee
THE EYE OF AN ADMINISTRATOR IS UPON YOU. ANY WRONG YOU DO IM GONNA SEE, WHEN YOU'RE ON MPGH, LOOK BEHIND YOU, 'CAUSE THATS WHERE IM GONNA BE
"First they ignore you. Then they laugh at you. Then they fight you. Then you lose.” - Dave84311
HAVING VIRTUAL DETOX
NextGen1 (04-07-2011)
THIS!
IS!
SO!
FUCKING!
EPIC!
I love it!
/Thanked + Repped.
Great Tut Mr. im gonna add a cuple of more features to it
[CENTER]I'm back!