I am building a Chrome extension that injects a small overlay in to all websites using a content script. At this point all the injected elements do is sit in the bottom left corner. It has two buttons the top one produces another element and the button one doesn't do anything. The extra element has a button that closes itself, and a text box.
This is my first major JavaScript/Chrome extension project, so my main concerns are:
Don't violate chrome extension rules that will caused deprecated code or the like
Given that I am inserting new code into a website I want to make sure that this is as efficient as possible as to minimize strain on Chrome.
Basic Injection
Injection after '+' pressed
Manifest.json
{
"name": "injection",
"description": "samples at code injection",
"version": "1",
"manifest_version": 2,
"content_scripts": [
{
"matches": [ "<all_urls>"],
"css":["style.css"],
"js":["jquery-2.1.0.min.js", "index.js"]
}
],
"permissions": [ "<all_urls>", "storage" ]
}
index.js
$(function(){
//$(".add_button").click(add_timeline_element);
function add_timeline_element(){
var text_input = $('<input />', {
type: "text",
class: "t_text_area"
});
var button = $('<button />', {
text: '-',
class: "t_intect_button",
click: function() {$(this).parent().remove();}
});
var timeline_element = $('<td />', {
class: "timeline_element"
});
timeline_element.append(button);
timeline_element.append(text_input);
$(".t_inject_row").append(timeline_element);
}
function minimize_t_inject_container(){
$(".add_button").toggle();
}
function create_twitter_bar(){
var table_container = $("<table />", {
class: "t_inject_container"
});
var row = $("<tr />", {
class: "t_inject_row"
});
var menu = $("<td />", {
class: "menu"
});
var add_element_button = $("<button />", {
text: '+',
class: "add_button t_intect_button",
click: function() {add_timeline_element();}
});
var minimize_button = $("<button />", {
text: 'm',
click: function() {minimize_t_inject_container();},
class: "minimize_button t_intect_button"
});
menu.append(add_element_button);
menu.append(minimize_button);
row.append(menu);
table_container.append(row);
$('body').append(table_container);
}
create_twitter_bar();
var scroll_point = 0;
var done_scrolling;
var counting = "false";
var time_counter = 0.00;
var consecutive_scrolls = 0.00;
var scroll_ending = function () {
console.log("done scrolling");
clearInterval(counting);
counting = "false";
time_counter = 0.00;
}
$(document).scroll(function() {
var new_scroll_point = $(document).scrollTop();
var scroll_delta = scroll_point - new_scroll_point;
if(scroll_delta < 0){
scroll_delta = scroll_delta * (-1);
}
scroll_point = new_scroll_point;
if(counting=="false"){
counting = setInterval(function(){
time_counter += 0.1;
}, 100);
} else{
var scroll_over_time = scroll_delta/time_counter;
console.log("scrolling over time:"+ scroll_over_time);
clearTimeout(done_scrolling);
done_scrolling = setTimeout(scroll_ending, 150);
if(scroll_over_time > 400 && scroll_over_time < 3000){
$(".add_button").hide();
}
}
});
});
style.css
/*----------------*/
/*----Main Page---*/
/*----------------*/
.t_inject_container
{
position:fixed;
bottom:0px;
left:0px;
z-index: 999;
background-color:grey;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.menu {
background-color:lightblue;
border-radius:5px;
}
.t_intect_button {
background-color:blue;
display:block;
height: 50px;
width: 50px;
margin: 5px;
font-size: 20px;
color: white;
border: 0px;
border-radius:7px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
border-radius:5px;
}
/*-----------------*/
/*Timeline Element*/
/*----------------*/
.timeline_element {
background-color:red;
border-radius:5px;
}
.t_text_area {
height: 50px;
width: 100px;
}
Here is a working JSFiddle.
The 'm' button on the main menu has been shrunk down, and now works. It minimizes and resizes the menu. I don't think this can be tested in the jsfiddle, but if you scroll quickly it will also minimize the menu.
The following is what the DOM looks like (copied from the JSFiddle using Chrome's Web Inspector):
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by easilyBaffled</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
/*----------------*/
/*----Main Page---*/
/*----------------*/
// ... PLUS OTHER CSS AS SHOWN IN SOURCE CODE BELOW ...
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(function(){
//$(".add_button").click(add_timeline_element);
// ... PLUS OTHER JAVASCRIPT AS SHOWN IN SOURCE CODE BELOW ...
});
});
});//]]>
</script>
</head>
<body>
<table class="t_inject_container"><tbody><tr class="t_inject_row"><td class="menu"><button class="add_button t_intect_button">+</button><button class="minimize_button t_intect_button">m</button></td></tr></tbody></table></body></html>