14

I am experienced in HTML and JavaScript but have never made a (real) Chrome Extension (other than the "Hello World' tutorial).

What I want to do is make an extension that adds functionality to viewing images. Basically I want a pieice of JavaScript to load when you go to a .jpg, .png, ect. page.

I couldn't get much out of the "Hello World" tutorial or the Docs and I've looked at code from XML Tree, but I'm having trouble understanding it.

I don't know where to go from here.

P̲̳x͓L̳
  • 3,615
  • 3
  • 29
  • 37
Eric
  • 2,886
  • 3
  • 20
  • 19

2 Answers2

57

Since you're experienced in JavaScript and HTML, tell you what the best source is?

http://developer.chrome.com/extensions/getstarted.html

Documentation

The above link (Chrome Extension Documentation) is so simple to read once you get a hang of it. For example, I didn't know JavaScript when I created my first Chrome Extension (Reload all tabs). I recommend you to read the docs (will only take you an hour), and follow the steps that you need.

  1. Make sure you understand the different UI's you can tap to
    1. Browser Actions: You use browser actions to put icons in the main Chrome toolbar.
    2. Context Menus: You use context menus to add items to Chromes context menu.
    3. Desktop Notifications: Use desktop notifications to notify users that something is important.
    4. Option Pages: If you want an options page, this is your guy!
    5. Page Actions: If you want to override certain pages (New Tab, History, Bookmark Manager)
  2. Make sure you realize there are many browser interactions that you can tap into:
    1. Bookmarks: Access to your bookmarks
    2. Cookies: Access to Cookies
    3. History: Access to History
    4. Management: Access to Extension Management
    5. Tabs: Access to your Tabs
    6. Windows: Access to your Windows (which has Tabs).
  3. Make sure you understand the difference between Background Pages and Content Scripts, and their limitations.
  4. Make sure you realize there are some neat functions in the Chrome.* API.
  5. Make sure you understand permissions.
  6. Many more

145 Chrome Questions I answered on Stackoverflow

If you want more examples, I have answered many questions regarding Chrome Extensions that might help you get started (145+ Questions Answered), for example, here are some of the more recent ones:

  1. Content Script Skeleton
  2. Send data from Background Page to Content Script
  3. Communication with the embedding page, Simple fetching of the pages JS variable
  4. Taking Screenshots in Chrome
  5. Walkthrough building an extension
  6. Executing JavaScript when a user clicks on a browser action.
  7. How to capture selected text and send it to a web service
  8. Walkthrough how to create an extension to access Disqus Comment Box
  9. Walkthrough how to highlight the DIV that the mouse if hovering over
  10. Walkthrough how to move to the top of the page extension
  11. Walkthrough how to create a bubble overlay when you select text.
  12. etc and 120 more answers for Chrome Extensions, the above is what I copied from the results on the first page. So a search in Google will get you many results.

Real open source extension I created

If you want to see real source code of the extensions I have written (some are super small, some are super big):

Resources

If you still want more resources, you can:

  1. Read the documentation.
  2. Read the Official Chromium Extension Mailing list
  3. The unofficial Internet Relay Chatroom #chromium-extensions on irc.freenode.net
  4. Google (Will bring you to Stackoverflow, or Quora)

I hope this helped!

daaawx
  • 3,273
  • 2
  • 17
  • 16
Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
0

well it’s not that tough to create a chrome extension ,anyone who has a basic understanding of HTML,CSS,Javascript can actually make one!

If you want to make a extension I have wrote an article on Medium it might be useful here's the link

Also I have attached my code on github here’s the link

Keep Learning!

Brij
  • 33
  • 1
  • 6