Creating chrome extensions for dummies

By: Elad Silberring

About Me

What is a chrome extension?

Lets start!

 1) Learn basic css/js/html (will not go through this today)

 2) Have an idea

 3) Create manifest file

 4) Create the UI

 5) js functionality

What should I do?

  • Something fun

 

  • Usable

 

  • Solves a problem

 

  • Less is more

Manifest file

{
    // Comments are accepted in the manifest, even though it is JSON.
    "manifest_version": 3,
    "name": "Anchorimator",
    "description": "This extension will emphasize any links on page and animate them on hover",
    "version": "0.0.1",
    "icons": {
        "16": "logo/logo-16.png",
        "48": "logo/logo-48.png",
        "128": "logo/logo-128.png"
    },
    "options_page": "settings/settings.html",
    "action": {
        "default_title": "Anchorimator Boss Page",
        "default_popup": "popup/popup.html"
    },
    "permissions": ["activeTab", "storage"],
    "host_permissions": [
        "*://*/*"
    ],
    "background": {
        "service_worker": "service-worker.js"
    },
    "content_scripts": [{
        "js": ["foreground.js"],
        "matches": ["https://en.wikipedia.org/*"]
    }]
}

* Don't forget to add "icon.png" icon ( download from google )

UI

<!DOCTYPE html>
<!-- popup.html -->
<html>
  <head>
    <title>Anchorimator</title>
	<style>
		body{
			background:url("cork-wallet.png");
			font-family: Comic Sans MS;
		}
		h1,h2{
			text-align:center;
			opacity:0.9;
		}
		button{
			background: #73a5ff;
			width: 100%;
			border: none;
			padding: 10px;
			border-radius: 5px;
			color: #fff;
			font-weight: 400;
			font-size: 18px;
			letter-spacing: 1px;
		}
		button:hover{cursor:pointer}
		
		@keyframes bounce {
		  from, 20%, 53%, 80%, to {
			animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			transform: translate3d(0,0,0);
		  }

		  40%, 43% {
			animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			transform: translate3d(0, -30px, 0);
		  }

		  70% {
			animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
			transform: translate3d(0, -15px, 0);
		  }

		  90% {
			transform: translate3d(0,-4px,0);
		  }
		}

	</style>
  </head>
  <body>
    <h1>Anchorimator</h1>
	<h2> We are LIVE! </h2>
  </body>
</html>

Functionality

// #foreground.js
// This script gets injected into any opened page
// whose URL matches the pattern defined in the manifest
// (see "content_script" key).
// Several foreground scripts can be declared
// and injected into the same or different pages.
// #foreground.js


let addStyle = (styleString) => {
    const style = document.createElement('style');
    style.textContent = styleString;
    document.head.append(style);
  }

let animation = '@keyframes bounce{20%,53%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(.755,.050,.855,.060);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.050,.855,.060);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}';
addStyle(animation);

let style = {
    "display": "inline-block",
    "background":"#73a5ff",
    "animation-name": "bounce",
    "animation-duration": "2s",
    "animation-iteration-count": "infinite",
    "border-radius":"5px"
}
let styleString = ''
for (let [key, value] of Object.entries(style)) {
    styleString += `${key}:${value};`
}

let anchors = document.querySelectorAll('#content a')
anchors.forEach( $elem => {
    let text = $elem.innerText;
    if ( text.length < 16 && text.length > 5 ){
        $elem.style.cssText = styleString;
    }
})

Settings Page

<!DOCTYPE html>
<!-- settings.html -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="settings.css">
    <title>Chrome Addon v3: Settings</title>
    <style>
        label{
            min-width: 35px;
            display: inline-block;
            min-width: 35px;
        }
    </style>
</head>
<body>
    This is the <span class="special-text">settings</span> page for the addon.
    Here we can do for example. <br>
    <h1>Anchorimator Length Range:</h1>
    <label for="max">MAX</label> <input type="number" name="max"><br>
    <label for="min">MIN </label> <input type="number" name="min">
    <br><button style="margin: 40px;" type="submit">Submit New Range</button>

</body>
</html>

USEFULL LINKS

  • https://developer.chrome.com/docs/extensions/reference/
  • https://github.com/SimGus/chrome-extension-v3-starter

Deploying: 

  1. drag

  2. extension

  3. into

  4. browser

The hard part -

Go to the "extensions page and:

Lets try it out:

wikipedia link

Questions?

Chrome Extensions manifest v3

By Elad Silberring

Made with Slides.com

Chrome Extensions manifest v3

  • 384

More from Elad Silberring