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:
-
drag
-
extension
-
into
-
browser
The hard part -
Go to the "extensions page and:
Lets try it out:
