This is Part 3 of the series - Building Chrome Extensions From Scratch. In this part, we are gonna continue from where we left off in the previous part.
As a quick recap, in Part 2, we covered
- How to add a popup page to an extension.
- How to add a background page to an extension.
- How to communicate between extensions using the chrome extensions API.
In this part of the series, we will try to explore the other files that you are most likely to use when building a chrome extension.
Configuration
When you have an extension, you may not want it to be active for all the web pages. You may instead want it to be active only for a particular website, or a URL pattern to be precise. In order to achieve that, chrome extensions give you two options.
- Page Actions
- Browser Actions
You set up an extension as a page action, when you want the extension icon to be visible at the rightmost end of the address bar but only when it satisfies a particular condition. For instance, assume that you want the Mr0 icon to be visible only when we open a wikipedia page. A page action appears in the address bar of the browser instead of the toolbar. Lets try to make our extension a page action.
Here's what our new manifest file would look like
manifest.json
{
"name": "Mr0",
"version": "1.0",
"background_page": "background.html",
"permissions": ["tabs"], //We will talk about this later
"page_action": {
"default_icon": "images/icon19.jpg",
"default_popup": "popup.html"
}
}
In order to change the visibility of the extension icon, we would need find a means to be notified when the url in the tabs change, i.e. when the user selects a different tab. The listener would have to be placed in the background page because it is the only page in the extension that is alive in the browser all througout. Here's what you could write in the extension page.
background.html
The code is pretty simple. As you might have noticed in the previous snippet, we added a new key in the manifest file - "permissions". This is necessary if you want to grant your extension access to the chrome tabs javascript extension API. If you don't do that, your javascript code in the extension page for registering an handler for the onUpdated event will result in an error.
Now if you reload your extension and you open a wiki page in the tab, you will observe that the extension icon appears in the address bar whenever you open a wikipedia page. If you open any other page, the extension icon will automatically disappear.
Browser Actions
'Browser actions' is what we have been using all along in all the previous parts of the series. When you set up an extension as a browser action, the extension icon will be visible in the toolbar, no matter what tab or what page you are on. All throughout the series, we have kept the Mr0 extension to have a browser action instead of a page action because I wanted to see the icon in the browser toolbar. However you may choose to do it differently depending upon your requirement.
There is however a small difference between a browser action and a page action. If you have a browser action, you can add a badge to the extension. You cannot do the same for a page action. Wondering what a badge is? Well, a badge is nothing but tiny piece of text that you can display over your icon in the toolbar. You can do this in the background page for the extension by simply adding the following line of code
chrome.browserAction.setBadgeText({text:'Mr0'});
Content Scripts
Content scripts are the scripts that you specify in the manifest file, which get included on all the pages for which the extension is configured to run. For example, if you create a simple content script in your extension that logs a message such as 'hi' on the console of the web page, you will be able to see the message printed on each web page that the extension is configured to run on. Lets try it out with our Mr0 example.
In order to do this, all that you need to do is to create a simple javascript file and maybe call it myScript.js and place it directly under the root directory of your extension. We are just gonna add a simple line to it.
console.log("Bingo");
Now, in your manifest.mf file, you need to mention this script as a content script. Here's how our manifest.mf would look like after the change
{
"name": "Mr0",
"version": "1.0",
"background_page": "background.html",
"permissions": ["tabs"],
"content_scripts": [
{
"matches": ["http://*.wikipedia.org/*"],
"js": ["myScript.js"]
}
],
"page_action": {
"default_icon": "images/icon19.jpg",
"default_popup": "popup.html"
}
}
If you take a close look, you would have noticed that I had to use another property - "matches" inside the content_scripts array so that the content script will be injected only into the pages that match the given url pattern. There can be any match pattern and you can refer to the documentation here for more details.
Now when you open any wikipedia page, and you press F12(Shortcut to open the chrome developer tools frame), check out the console and you will observe a cool message that says "Bingo". You can open any number of wikipedia pages, and the same message will be printed on the console of each of these pages.
What this actually indicates is that you can write custom javascript and execute it on each page independently. I used the word independently because your custom script will be executed such that although it will have access to the DOM structure of your page, it will not be able to access any other javascript that is executing on that page. This allows you to write your custom scripts without worrying about the clash of variable names.
Using the same feature, you can also include external libraries into your chrome extension. For example, you can add the jquery framework file into your extension. The version of jQuery that you make use of in your extension can be different from the version of jQuery being used by the client, and there wont be any clashes whatsoever.
You can add multiple content scripts separated by commas in the 'js' object. For example, the following piece of code will allow you to add the jQuery library into your extension and make it available for use in all your custom scripts.
"content_scripts": [
{
"matches": ["http://*.wikipedia.org/*"],
"js": ["jquery.js","myScript.js"]
}
]
This code assumes that you have a file called 'jquery.js' directly under the root directory of your chrome extension.
Now that you have a javascript framework and the ability to access the DOM of a page via your content script, you can do pretty much anything that is possible with the DOM of your page with ease.
There are several other configuration parameters that will come in handy when you create your chrome extensions. However the examples in this series should be sufficient to get you up and running from scratch in no time.
Happy Programming :)
Signing Off
Ryan
No comments:
Post a Comment