Chrome Extension Development

How I built and published my own Chrome Extensions using JSON and JavaScript.

Overview

Over the weekend I decided to solve a small problem I had when using the Google Chrome web browser.

Problem – Some pages don’t have clickable links to middle mouse button into a new tab when I want to do something else.

Reason – I like to open a new tab in the Chrome web browser whenever I research or have an idea, normally I do this with the middle mouse button to click a link on the page such as the “home” button/ image link.

Solution – Open up a new tab of the current page whenever you right click anywhere on a page and select it from the context menu.

My example

Google Chrome Web Store page – Open page in new tab

Github repo – https://github.com/IanEarnest/OpenPageInNewTab

Helpful links – https://developer.chrome.com/docs/extensions/mv3/manifest/

Setup

Create a folder with 2 files and 4 pictures

File 1 – manifest.json

File 2 – background.js

Pictures – .png files – 16×16, 32×32, 48×48, 128×128

-Code

{
“manifest_version”: 3,
“name”: “Open page in new tab”,
“version”: “1.0”,

“description”: “Add a context menu item to load a new tab of the current page URL.”,
“icons”: {
“16”: “icon16.png”,
“32”: “icon32.png”,
“48”: “icon48.png”,
“128”: “icon128.png”
},
“background”: {
“service_worker”: “background.js”
},
“permissions”: [
“contextMenus”
]
}

//When installed, add context menu item “-Open page in new tab”
chrome.runtime.onInstalled.addListener(newMenuItem);

//Clicked “-Open page in new tab”
chrome.contextMenus.onClicked.addListener(newTab);

function newMenuItem() {
chrome.contextMenus.create({
id: “MY_CONTEXT_MENU”,
title: “-Open page in new tab”,
type: “normal”,
contexts:[“all”]
});
}

function newTab(info, tab) {
chrome.tabs.create({
index: tab.index + 1,
url: tab.url //requires “tabs”
});
}

if (chrome.extension.lastError) {
console.log(“Got expected error: ” + chrome.extension.lastError.message);
}

Run extension

Go to Extensions management – chrome://extensions

Toggle the enable developer mode option

Click the load unpacked (navigate to folder)

You should now be able to right click on a normal website to show your context menu item

Publish

Register as a dev (pay 5 euros) – https://chrome.google.com/webstore/devconsole

Follow the steps for filling in the forms, including pictures, video and descriptions, etc.

Upload your folder as a .zip file

Wait for publish review

All done, try downloading the extension as a user once it has finished the review.