Skip to content

Instantly share code, notes, and snippets.

@lmccart
Last active Nov 25, 2021
Embed
What would you like to do?
browser extension examples
/////////////////////////////////////////////////////////////////////////
//// MANIFEST
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
/////////////////////////////////////////////////////////////////////////
//// HTML
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Get URL Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
-->
<script src=" jquery-2.2.0.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="status">blah blah blah</div>
<img id="image-result" hidden>
</body>
</html>
/////////////////////////////////////////////////////////////////////////
//// BASIC POPUP
$(document).ready(function() {
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function(tabs) {
// chrome.tabs.query invokes the callback with a list of tabs that match the
// query. When the popup is opened, there is certainly a window and at least
// one tab, so we can safely assume that |tabs| is a non-empty array.
// A window can only have one active tab at a time, so the array consists of
// exactly one tab.
var tab = tabs[0];
// A tab is a plain object that provides information about the tab.
// See https://developer.chrome.com/extensions/tabs#type-Tab
var url = tab.url;
$('#status').text('url = '+url);
});
});
/////////////////////////////////////////////////////////////////////////
//// p5 POPUP
var title = '';
function setup() {
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function(tabs) {
// chrome.tabs.query invokes the callback with a list of tabs that match the
// query. When the popup is opened, there is certainly a window and at least
// one tab, so we can safely assume that |tabs| is a non-empty array.
// A window can only have one active tab at a time, so the array consists of
// exactly one tab.
var tab = tabs[0];
// console.log(tab)
// A tab is a plain object that provides information about the tab.
// See https://developer.chrome.com/extensions/tabs#type-Tab
var url = tab.url;
title = tab.title;
});
}
function draw() {
background(random(255), 0, 255);
text(title, 10, 10);
}
/////////////////////////////////////////////////////////////////////////
//// WEATHER POPUP
var x, y;
var temp = 0;
var angle = 0;
var windmag = 0;
var bg = 255;
function setup() {
createCanvas(300, 100);
var url = 'http://api.openweathermap.org/data/2.5/weather?q=New%20York,NY&units=imperial&APPID=7bbbb47522848e8b9c26ba35c226c734';
loadJSON(url, gotWeather);
textSize(20);
noStroke();
x = width/2;
y = height/2;
}
function gotWeather(weather) {
temp = weather.main.temp;
angle = radians(Number(weather.wind.deg));
windmag = Number(weather.wind.speed);
bg = map(temp, 0, 100, 0, 255);
}
function draw() {
background(bg);
fill(255);
text(temp, 10, 30);
x += windmag * cos(angle);
y += windmag * sin(angle);
if (x > width + 10) x = 0;
else if (x < -10) x = width;
if (y > height + 10) y = 0;
else if (y < -10) y = height;
fill(0);
ellipse(x, y, 20, 20);
}
/////////////////////////////////////////////////////////////////////////
//// BASIC PAGE ACTION - CURSOR
{
"manifest_version": 2,
"name": "Basic Cursor",
"description": "Replace the cursor with glitter.",
"version": "1.0",
"content_scripts": [
{
"matches": [
"https://tisch.nyu.edu/itp/*",
"<all_urls>"
],
"js": [
"jquery.js",
"content_script.js"
]
}
],
"web_accessible_resources": [
"glitter_cursor.gif"
]
}
$(document).ready(function(){
//change cursor
$("body").css("cursor", "url('"+chrome.extension.getURL('glitter_cursor.gif')+"'), default");
});
/////////////////////////////////////////////////////////////////////////
//// BASIC PAGE ACTION - REPLACE
//------------------DOC READY-------------------//
var new_lines = [];
$(document).ready(function(){
// load new sentences from text file
new_lines = loadStrings("data/new_lines.txt");
changeText();
});
function changeText() {
$('a, p').each(function(){
$(this).html(getRandom(new_lines))
//$(this).hide();
});
}
//seperates .txt into arrays based on line returns
function loadStrings(file) {
var result;
$.ajax({
type: "GET",
url: chrome.extension.getURL(file),
async: false,
success: function(data){
result = data;
}
});
return result.split("\n");
}
//returns random value in array
function getRandom(array){
var index = Math.floor(Math.random()*array.length);
var value = array[index];
return value;
}
/////////////////////////////////////////////////////////////////////////
//// BASIC PAGE ACTION - POPUP + PAGE
{
"name": "Gmail emo labor",
"version": "2.0",
"manifest_version": 2,
"description": "Gmail emo labor",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"web_accessible_resources": [
"manifest.json",
"data/new_lines.txt"
]
}
//------------------DOC READY-------------------//
// When the popup HTML has loaded
$( document ).ready(function() {
// inject jquery
chrome.tabs.executeScript(null, {file:"jquery.js"});
// inject custom js
chrome.tabs.executeScript(null, {file:"inject.js"});
});
console.log("changeText");
// load the file into an array
var new_lines = loadStrings("data/new_lines.txt");
$('.js-tweet-text').each(function(){
// grab the text from the element on the page to manipulate
var text = $(this).html();
console.log(text)
// replace periods with exclamation points
text = text.replace(/\. /g, "!!! ");
// replace every fourth tweet
if (Math.random() < 0.25) {
var random_string = getRandom(new_lines);
text = random_string;
}
// put the modified text back into the element on the page
$(this).html(text);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment