Google Chrome Extension - CodeProject Template Items

Introduction

If you are a regular user of CodeProject, or maybe an article moderator, mentor, or even spend your time answering questions in the Q&A section, how many times have you found yourself posting the same thing? How many times have you found yourself heading over to the FAQ list to copy the link to the Article FAQ? Once, twice, ten times? What about going to find a previous post you have made to copy that and use again to save typing it all again?

That is how this utility and article was born. I thought there must be a better way, considered keeping a text file, but discounted that idea, and thought hang on, I'll make another Chrome extension. I've done it once already, so it should be fairly easy to repeat the success of that.

The utility allows the user to create template items that are stored within the browser context, and at the click of a button insert a selected template item straight into your forum message or answer. You can even just keep small snippets e.g. a link and be able to quickly add that to your message/answer.
Topics Covered

In this article the main items we will look at are;

    Chrome Background pages and PageActions
    Chrome Script injection and execution within Browser page context from within Extension context
    Some JQuery for handling object cloning, item identification

Chrome Extensions - What are they?

Extensions are add-ons for Google Chrome browser, and rather than repeat myself, hop over to my last Chrome Extension Article, where the basics are explained and links to the Chrome Extension and JQuery developer pages can be found. The article can be found here; Chrome Extension - CodeProject Reputation Watcher. If you have never looked at extensions before, I suggest you read this first, as it covers some key extension creation information, such as extension structure, manifest files, packaging and deployment.
What about this extension?

This extension is very similiar, the same ideas around the javascript files, JQuery references etc. are all the same. This extension is different from the previous one in the way to operates and triggers the events and intgeracts with the users page.

To start with, lets take a look at the manifest file for this extension;

{
  "name": "CodeProject Template Items",
  "version": "1.0",
  "description": "Chrome Extension to provide CodeProject template items.",
  "icons":{"48":"images/bob48.png", "128":"images/bob128.png"},    //Define any icon sizes and the files that you want to use with them. 48/128 etc.
  "background_page": "cptemplates.html",
  "page_action": {
    "default_icon": "images/bob.png",                           // image to show in the address bar
    "default_title": "CodeProject: Insert Template Items",      // text to show in the tooltip
    "default_popup": "selector.html"                            // template selector page
  },
  "options_page": "editor.html",            // Page to handle the options for the extension, used to edit the templates
  "permissions": [
    "tabs", "http://*.codeproject.com/"            
  ]
  "update_url": "http://www.dave-auld.net/ChromeExtensions/CPTemplatesChromeExt/updates.xml"        // Auto Update location
}

Read more: Codeproject
QR:

Posted via email from Jasper-Net