How to turn your site into a Google Chrome extension!

  • 3
  • Idea
  • Updated 8 years ago
Hello everyone,

I've been tinkering with Google Chrome lately, and I've found out how to turn out sites into Google Chrome extensions. There is a full tutorial here. But I'm going to breifly outline the process here.

What you need

  • Google Chrome (Latest version preferably)

  • A 128x128 PNG Icon for your app



What you do

STEP 1: Make a new directory on your desktop, name it something simple like 'myapp'. This will contain the manifest and the icon.

STEP 2: Open Notepad, TextEdit etc. And copy the following text into it:

{
"name": "Great App Name",
"description": "Pithy description (132 characters or less, no HTML)",
"version": "0.0.0.1",
"icons": {
"128": "icon_128.png"
},
"app": {
"urls": [
"http://mysubdomain.example.com/"
],
"launch": {
"web_url": "http://mysubdomain.example.com/"
}
}
}

Change the bold text to match your app.
Save this as 'manifest.json' NOTE: Please make sure you do not save it as manifest.json.txt or similar, it will not work

STEP 3: Place your PNG icon and Manifest file into your app's directory you made in step 1, this is very important, because your app won't compile correctly if you skip this.

STEP 4: Open Google Chrome, click the wrench icon, point to Tools > Extensions.
On the tab that opens, click the plus sign next to 'Developer mode' and then click 'Load unpacked extension...' In the dialog box, select the directory you made that contains the manifest and icon. The app's icon will then appear on then default new tab. Click this to test that the link opens your site.

STEP 5: If the app doesn't work, go back to the start and follow it exactly. If it works, it's time to compile it. You probably saw the 'Pack Extension' button in step 4, well now's the time to use it. Click it and click browse next to 'Extension Root Directory', choose your app's directory and click Ok

STEP 6: Make your new app public! It makes a 'crx' file which, when downloaded using Chrome, automatically installs and puts the icon on the default new tab page.

Remember, for a more in-depth tutorial, visit this link: Tutorial

Callum
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
  • happy

Posted 8 years ago

  • 3
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Callum! Thanks so much for sharing this with the Yola community! I am currently making my own app but don't know what to do for it right now. But this tutorial is awesome! I am sure lots of people will use this. Thanks so much Callum! :) You're on your way to becoming a champion! You are doing great! :)

Thanks,
Nathan
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Thanks Nathan!!! :D :D :D
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem Callum! :)
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks for sharing this Callum, it's always a treat to have a technical tutorial translated to be understood more easily!
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Thanks Laura! :)