How to Create a Chrome Extension in 10 Minutes Flat

manifest.json keys

The main manifest.json page includes a table describing browser support for manifest.json keys. Where there are caveats around support for a given key, this is indicated in the table with an asterisk “*” and in the reference page for the key, the caveats are explained.

These tables are generated from compatibility data stored as JSON files in GitHub.

Video

Best New Tab Chrome Extensions

  1. OneTab
  2. Momentum
  3. Blank New Tab Page
  4. Infinity New Tab
  5. Earth View
  6. Infinite New Tab
  7. New Tab Redirect
  8. Speed Dial

# Transition types and qualifiers

The webNavigation API’s onCommitted event has a transitionType and a transitionQualifiers property. The transition type is the same as used in the history API describing how the browser navigated to this particular URL. In addition, several transition qualifiers can be returned that further define the navigation.

The following transition qualifiers exist:

Transition qualifierDescription
“client_redirect”One or more redirects caused by JavaScript or meta refresh tags on the page happened during the navigation.
“server_redirect”One or more redirects caused by HTTP headers sent from the server happened during the navigation.
“forward_back”The user used the Forward or Back button to initiate the navigation.
“from_address_bar”The user initiated the navigation from the address bar (aka Omnibox).

# A note about tab IDs

Not all navigating tabs correspond to actual tabs in Chrome’s UI, e.g., a tab that is being pre-rendered. Such tabs are not accessible via the tabs API nor can you request information about them via webNavigation.getFrame or webNavigation.getAllFrames. Once such a tab is swapped in, an onTabReplaced event is fired and they become accessible via these APIs.

Create the manifest file for your Chrome extension

Create a new directory, taskTracker, and in it, create a file called manifest.json. Copy and paste the following lines in your manifest.json:

Logging the URL

jQuery isn’t necessary, but it makes everything easier. First, download a version of jQuery from the jQuery CDN and put it in your extension’s folder. I downloaded the latest minified version, jquery-2.1.3.min.js. To load it, add it to manifest.json before "content.js". Your whole manifest.json should look like this:

Now that we have jQuery, let’s use it to log the URL of the first external link on the page in content.js:

Note that we don’t need to use jQuery to check if the document has loaded. By default, Chrome injects content scripts after the DOM is complete.

Try it out – you should see the output in your console on every page you visit.

Opening a new tab

We can use the chrome.tabs API to open a new tab:

But chrome.tabs can only be used by background.js, so we’ll have to add some more message passing since background.js can open the tab, but can’t grab the URL. Here’s the idea:

  1. Listen for a click on the browser action in background.js. When it’s clicked, send a clicked_browser_action event to content.js.
  2. When content.js receives the event, it grabs the URL of the first link on the page. Then it sends open_new_tab back to background.js with the URL to open.
  3. background.js listens for open_new_tab and opens a new tab with the given URL when it receives the message.

Clicking on the browser action will trigger background.js, which will send a message to content.js, which will send a URL back to background.js, which will open a new tab with the given URL.

First, we need to tell content.js to send the URL to background.js. Change content.js to use this code:

Now we need to add some code to tell background.js to listen for that event:

Now when you click on the browser action icon, it opens a new tab with the first external URL on the page.

Step 2: Create the manifest file

Now that we have our basic project structure, we need to add the code to our manifest file to describe our plugin to Chrome.

Open up the manifest.json file and enter the following code:

Most of the fields in this JSON file are self-explanatory, so I won’t waste your time explaining everything, but take note of the browser_action section where we specify what the default icon is and what HTML page should be displayed when the Browser Action button is clicked.

You’ll also notice I’ve added a permissions section that specifies that we need to have permission to access the activeTab. This is required in order to enable us to get the URL of the current tab to pass on to GTmetrix.

Many of the APIs Chrome exposes for you to use with your extensions require you to specify any permissions you require.

What is a Chrome Extension?

Before we get started building our extension, it’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.

At a very basic level, a Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

In this tutorial, I’m going to show you how to create a basic Chrome extension called a Browser Action extension. This kind of extension puts a button in the Chrome toolbar that will show an HTML page when clicked and optionally execute some JavaScript.

Chrome extensions can also be created to work only on certain pages through the use of Page Actions, they can run code in the background using Background Pages, and they can even modify an existing page loaded in the browser using Content Scripts. But for this tutorial we are going to keep things simple.

If you are interested in learning more about Chrome extensions in general, check out Chrome’s extensions documentation.

Chrome Extensions for Blogging

Users: 10M+

Grammarly is my go-to app for reviewing blog posts for proper spelling, grammar, and word use. You can drop large pieces of text into the desktop application for review, or you can use the handy Chrome extension to call out any grammar errors you’re making while typing on the web.

Users: 3M+

Have you ever come across a word you’re not familiar with while doing research online? Instead of Googling it in a separate tab, quickly highlight the word and click on the Google Dictionary extension to get the definition.

Users: Not Published

For those times when you and your coworkers are working on computers with different operating systems, or want to collaborate on a live document together, check out Office Editing. This extension lets you easily drop Microsoft Office files into Google Drive to view and edit them without needing the software installed on your hard drive.

Users: 8

Sometimes it’s hard to free yourself of distractions to write productively, especially if you’re writing online. This new extension quickly opens a new tab for a clean and neutral text editor that auto-saves while you’re working if you need a break from where you normally write.

Users: 1M+

LanguageTool is a useful Chrome extension for checking the existing text on a website and checking the grammar of your work as you write. It works in Google Docs and any website where there’s an active text box. It also works for different languages, so if you’re aiming to write for different markets and regions, you’ll most definitely want to add this tool to your arsenal.

Users: 200K+

Wordtune is an AI-powered Chrome extension that provides several alternatives to what’s currently on the page. No matter what tool you’re using — whether it’s Google Docs, Outlook, or another text editor — you can highlight the sentence or phrase you’d like to rewrite, and Wordtune will provide several alternatives. After that, you only have to choose the one you like best.

Users: 200K+

ProWritingAid is another smart Chrome extension for checking the grammar, spelling, and clarity of your blog posts, web pages, and articles. Like the other tools on this list, it works with Google Docs and any text editor in your browser. It will catch any errors you make as you write and suggest corrections.

8. Readme

Users: 100K+

Readme is a text-to-speech reader that works right within your Chrome browser to increase accessibility as you write or read articles. It can also help you listen to your drafts out loud for proofreading purposes. Listening to your writing can be an excellent way to catch errors.

Users: 20K+

Helperbird is an accessibility Chrome extension that can help writers with dyslexia, blindness, or other disabilities work more efficiently. You can change the font of the page, change the font sizes, use a magnifier, and turn text into speech. You can also turn pages and articles into a plain-text “Reader Mode” for easier reading and scanning.

Users: 800K+

Do you list citations in your blog posts and articles? Use the MyBib Chrome extension to create citations right within the browser. Simply travel to the page, Tweet, article, or video you’d like to cite, select the format you’d like to cite it in, and then copy and paste. Alternatively, if you’re collecting various sources, save it to a “Project.” You’ll then be able to download all of your works cited in any format you prefer.

Bonus: It gives you an in-text citation, too. Absolutely brilliant.

Recent Posts

Thanks for rating this post!

We are always striving to improve our blog quality, and your feedback is valuable to us. How could this post serve you better?

Did not solve my problem

Solved my problem

Other

Protected by reCAPTCHA – Privacy – Terms

Tags

Leave a Reply

Your email address will not be published.