Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating Page Actions
Let's start by creating a page action. First we need to create a directory to store our files, including a special file (manifest.json) that tells Chrome what we intend to do in our application. In addition to general description and version information, manifest.json lists the permissions we're requesting and domains on which the extension will operate, and includes links to HTML files and icons.
The following snippet shows the contents of our manifest.json file:
{
"name" : "Font Resizer for Hacker News",
"version" : "0.1.4",
"manifest_version" : 2,
"description" : "Example of a content script extension",
"content_scripts": [
{
"matches" : ["http://news.ycombinator.com/*"],
"js" : ["hackernews.js"]
}
]
}
For this example, suppose we like reading Hacker News (HN), but we want to bump up the font size a little bit to make the text easier to read. Figure 1 shows the normal HN view, and Figure 2 shows our modified view.
)
Figure 1 Unmodified Hacker News page.
)
Figure 2 Hacker News with increased font size.
Using HTML5 CSS querySelectors, we can zero in on the exact elements where we need to make changes. Links and their associated text use the class title, so that's what we need to modify. In the following snippet, we've set the fontSize to 1.2em. The typographical unit em (not to be confused with the shorthand word for emphasis) allows you to scale fonts within a style sheet. If the base font size is 10 point, 1.2em bumps the font size up to 12 point. Using ems rather than hard-coding point sizes makes your extensions more robust. You could also use pixels (px) or points (pt), whichever you prefer.
// Find HN tabs and increase font sizes
var items = document.querySelectorAll('.title');
for (var j = 0; j < items.length; j++) {
var item = items[j];
item.style.fontSize = "1.2em";
}
Now that we have something capable of being tested, let's load our extension into the browser:
- In Chrome, click the wrench icon to open the Tools menu.
- Choose Tools > Extensions to open the Extensions dashboard.
- Make sure that Developer Mode is enabled. Then click the Load Unpacked Extension button.
- Navigate to the extension directory you created, locate your new extension, and click OK to load it.
Now, when you go to the Hacker News site with your new extension installed, your changes are applied.