Chrome Extension Building in Minutes

-

 

Posted by M.Shafiq

Building a Chrome Extension in Minutes

Ever wondered how you can build your own Chrome Extension? It's not as hard as you might think!

In this tutorial, we'll create a simple Chrome Extension that converts all the text on a webpage into comic sans. Why would you ever want to do that? Because some people just like to see the world burn.

Let's get started!

Setting up Our Manifest

First, let's create an empty folder to house the contents of our extension. The minimum necessary file to define your extension is your manifest, which tells Chrome the defining characteristics of your extension.

Create a file in your folder called manifest.json and fill it with the following fields:

{
"name": "Comic Sans transformer",
"description": "Transforms all text on a page into Comic Sans",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
}
}
view raw

Let's go over what the non-straightforward ones mean:

  • Manifest_version: You're most likely going to want to put 3, but in case you might need to have your manifest in a different format you can check out the other Manifest versions that Chrome accepts

  • Background: Here you can put scripts that run in the background of your extension

  • Permissions: These are the APIs that you are accessing with your extension. Here we are going to use storage, to store persistent data, activeTab, to check the active tab, and scripting, to run operations on our active tab

  • Action: Here you can put different types of components of your extension. For this example, we are just going to create a popup menu, and tell Chrome to grab the popup menu from popup.html

The Code

The first part of this is by no means necessary, but I think it's helpful to show you how persistent data storage and background scripts work. Let's create a file called background.js.

let color = "#fa9639"
// Run when the user first installs the extension
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({color}) // Use sync to store persistent data
console.log("Button Color Set")
})
view raw

Next, let's create our popup.html file. You can of course create a separate CSS file, but for simplicity's sake, we'll just use style tags.

<html>
<head>
<style>
button {
margin: 10px;
border-radius: 2px;
border: 1px solid black;
font-family: "Comic Sans MS";
}
</style>
</head>
<body>
<h1>Comic Sans Is King</h1>
<button id="changeFont">Swap Font</button>
<script src="popup.js"></script>
</body>
</html>
view raw

Finally, let's actually do the conversion to Comic Sans when the button is pressed. Create a popup.js file with the following code:

// Snag our button
let btn = document.getElementById("changeFont")
// Set our button's color to the color that we stored
chrome.storage.sync.get("color", ({color}) => {
btn.style.backgroundColor = color
})
// Run on click
btn.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({active: true, currentWindow:true}) // Find current tab
chrome.scripting.executeScript({ // Run the following script on our tab
target: {tabId: tab.id},
function: () => {
let elems = document.querySelectorAll("*"); // Grab every element in the dom
for (var i = 0;i < elems.length; i++){
elems[i].style.fontFamily = "Comic Sans MS";
}
}
})
})
view raw

And there you have it! The next step is loading it into Chrome.

Using Our Extension

Loading our extension into chrome couldn't be easier. Go to the extensions menu with the url:

chrome://extensions/

Make sure developer mode is enabled (can be done in the top right corner), and then press "Load unpacked".

Alt Text

From there, you can select the folder where all of our extension files are, and the extension will be loaded in!

We can now use it like so:

Alt Text

Uploading to the Chrome Store

Getting your app in the public Chrome store is a whole different ordeal, that Chrome documents very well. You can learn more about that here:
https://developer.chrome.com/docs/webstore/publish/

Alt Text


Comments

Post a Comment

If you have doubt Pl Let me know

Popular posts from this blog

Insert a Check Mark in Excel: 5 Methods

-
How to Insert a Check Mark in Excel: 5 Methods Learn how to insert a check mark (tick symbol) in Excel using 5 different methods. We all know the value of a good old-fashioned check mark, the widely known character for ticking boxes, confirming completion of tasks, and used in managing lists the world over. It's pretty easy to insert this character into word documents and word-based programs, but what about something like Excel, a data-based program? In this article, we will explore 5 different ways of inserting a check mark into this program, ranked easiest to hardest. 1. Copy & Paste This one is bang on simple. Just like you might for complex phrases or formulas, you can simply copy and paste (Command C + Command V on Mac, Ctrl C + Ctrl V on Windows) the check mark character into the cell you need to tick off. Simple copy and paste this character below: 2. Symbols Excel, just like word, has a list of symbols where all supported characters are listed, ready to click on and ins...
Read more

How to Make a Checklist in Excel-Checklist

-
Image
  Inserting a   checkbox in Excel   is easy. For example, use checkboxes to create a checklist or a dynamic chart. You can also insert a   check mark   symbol. Insert a Checkbox To  insert a checkbox , execute the following steps. 1. On the Developer tab, in the Controls group, click Insert. 2. Click Check Box in the Form Controls section. 3. For example, draw a checkbox in cell B2. 4. To remove "Check Box 1", right click the checkbox, click the text and delete it. Link a Checkbox To link a checkbox to a cell, execute the following steps. 1. Right click the checkbox and click Format Control. 2. Link the checkbox to cell C2. 3. Test the checkbox. 4. Hide column C. 5. For example, enter a simple IF function. 6. Uncheck the checkbox. Note: read on for some cool examples. Create a Checklist To create a checklist, execute the following steps. 1. Draw a checkbox in cell B2. 2. Click on the lower right corner of cell B2 and drag it down to cell...
Read more