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.
Version 1.1 fixed a couple of bugs, and also introduced a third item type and filtering capabilities within the editor and selector forms.
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.
NOTE: Google Chrome has changed the way in which packaged extensions can be installed when they are not served by the Chrome Web Store. This is to reduce the risk of drive installs of dodgy extensions. To use the packaged extension from my website, click the link, then switch to the Extensions Page from the Tools Menu, then drag the file from the download bar at the bottom of the browser onto the Extensions Page. You will see a Drop to Install message appear.
What About this Extension?
This extension is very similar, 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 it operates and triggers the events and interacts with the users page.
To start with, let's take a look at the manifest file for this extension:
{
"name": "CodeProject Template Items",
"version": "1.1",
"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: