Friday, February 1, 2013

Tuesday, January 29, 2013

Some Handy Code

Good Code for A Link

<span style="font: 18px sans-serif; display: block; margin: 100px 0 0 150px;"><a style="color:#06F;" >Some Text</a> (Some more text)</span>

Thursday, January 24, 2013

input type=range customization

http://jsfiddle.net/_Sud/cEy9n/

css

input[type=range] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
height:10px;
border-radius:50px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;/*
background-color: #666;
opacity: 0.5;
width: 10px;
height: 26px;*/
width:15px;
height:15px;
border-radius:50px;
color:#fff;
box-shadow:1px 1px 2px #000;
background:#cccbbb;
opacity:0.95;
}
input[type="range"]::-webkit-slider-thumb:hover{
color:#aaa;
opacity:1;
-webkit-transform: scale(1.2,1.2);
}

HTML

<input type="range" min="0" max="100">

Code to place a content relative to size

<!doctype html>
<html>
<head>
<style>
#root{
width:30px;
height:30px;
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;
}
#handler{
display:block;
width:15px;
height:15px;
border-radius:50px;
color:#fff;
box-shadow:1px 1px 2px #000;
background:#cccbbb;
opacity:0.95;
}
#handler:hover{
color:#eee;
opacity:1;
-webkit-transform: scale(1.2,1.2);
}
body{
padding:0px;
margin:0px;
}
</style>
<script>
function triggerState(){
console.log("Clicked");
}
</script>
</head>
<body>
<div id="root">
<div id="handler" onclick="javascript:triggerState()">
</div>
</div>
</body>
</html>

This code places div relative to size of parent and positions in center

Wednesday, January 23, 2013

Safari Extensions

safari.extension.bars returns all bar window objects for a Safari Window.
safari.extension.baseURI returns the id of safari extension per session

safari.application.activeBrowserWindow returns the reference to active window

The user can hide the extension bar using the View menu, but the extension bar page still loads every time a window is opened and any JavaScript still executes—only the display is suppressed by the View menu.

openTab() will open a new Tab

openBrowserWindow() will open a new Window.

Tuesday, January 22, 2013

Download .CRX Code

https://clients2.google.com/service/update2/crx?response=redirect&x=id%3D<EXTENSIONID>%26uc

Friday, January 18, 2013

Google subdomain access in content scripts

The reason is that this opens you up to being injected where you don't expect, which can lead to security problems. In your above code, it would run onhttp://google.phisher.org for example. Even if you changed your code to explicitly test for known registry-controlled domains (.com, .co.uk, .jp, etc.), you'd still have a problem in that most companies (including Google) don't actually own companyname.* for every RCD that's out there. Further, in the cases where the company doesn't own that domain, the domain is often being used for phishing/malware, etc. So the only way to do this is to know ahead of time the explicit list of RCDs that are controlled by the company, which can be a pain to figure out unfortunately.

it is the reason you can not do *://*.google.*/ in match pattern

Tuesday, January 15, 2013

TODO

Git Hub triggers to chrome extension.
Email Updates count

Thursday, January 10, 2013

loadVideoById

<!doctype html>
<html>
<head>
<title>This is a Nice Title</title>
<script async src="https://www.youtube.com/iframe_api"></script>
<script src="script.js"></script>
</head>
<body>
<iframe id="player" src="http://www.youtube.com/embed/7z2hIPJkc5w?enablejsapi=1" style="width:400px;height:400px"></iframe>
</body>
</html>

var player;
function onYouTubeIframeAPIReady(){
player = new YT.Player("player",{events:{onReady:"ready",onStateChange:"change"}});
//player.cueVideoById({videoId:"http://www.youtube.com/watch?v=RNIjbYl8K4U", startSeconds:8, endSeconds:18, suggestedQuality:"hd1080"});
}
function ready(event){
//event.target.playVideo();
//player.loadVideoById({videoId:"RNIjbYl8K4U", startSeconds:4, endSeconds:10, suggestedQuality:"hd1080"});
player.cueVideoByUrl({mediaContentUrl:"http://www.youtube.com/v/RNIjbYl8K4U?version=3", startSeconds:8, endSeconds:18, suggestedQuality:"hd1080"});
event.target.playVideo();
}
function change(event){
if(event.data == YT.PlayerState.PLAYING){
setTimeout(stop,6000);
}
}
function stop(){
player.stopVideo();
//player.clearVideo();
}

Wednesday, January 9, 2013

Sample code

<!doctype html>
<html>
<head>
<title>This is a Nice Title</title>
<script async src="https://www.youtube.com/iframe_api"></script>
<script src="script.js"></script>
</head>
<body>
<iframe id="player" src="http://www.youtube.com/embed/KUbHep0bUWs?enablejsapi=1" style="width:400px;height:400px"></iframe>
</body>
</html>

var player;
function onYouTubeIframeAPIReady(){
player = new YT.Player("player",{events:{onReady:"ready",onStateChange:"change"}});
//player.cueVideoById({videoId:"KUbHep0bUWs", startSeconds:8, endSeconds:18, suggestedQuality:"hd1080"});
}
function ready(event){
event.target.playVideo();
//player.cueVideoById({videoId:"KUbHep0bUWs", startSeconds:4, endSeconds:10, suggestedQuality:"hd1080"});
//event.target.playVideo();
}
function change(event){
if(event.data == YT.PlayerState.PLAYING){
setTimeout(stop,6000);
}
}
function stop(){
player.stopVideo();
player.clearVideo();
}

player.cueVideoById

player.cueVideoById does some thing like shown here

it creates a cue from start and end time.

clearVideo() does above stuff, clears all remnants

script tag placement

Put Scripts at the Bottom

tag: javascript

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

In some situations it's not easy to move scripts to the bottom. If, for example, the script usesdocument.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

If there is a lot of JS, put it at the end of the document. Although this makes no difference on load time, the user will see the page sooner and can begin to read it while your js loads, as opposed to seeing nothing until your JS is downloaded (which is what happens when you put it in the head). It merely makes the download appear faster. This would also solve the problem mentioned above about the script executing on an unfinished document, although for that, an even better solution is to use window.onload().

Yes, it does affect the performance of the web page.

The problem with JavaScript is that is blocks the execution/loading of the rest of the page. If you have something that takes a long time in your JavaScript then it will prevent the rest of the page from loading:

See these examples:

Script at top, blocks whole page: http://jsfiddle.net/jonathon/wcQqn/
Script in the middle, blocks bottom: http://jsfiddle.net/jonathon/wcQqn/1
Script at bottom, blocks nothing: http://jsfiddle.net/jonathon/wcQqn/3/

You can see the effect the alert has on the rendering of the rest of the page. Any JavaScript that you put into the top of your page will have the same effect. In general, it is better to put anything critical to the layout of your page (i.e. menu plugins or something). Anything that requires a user interaction (popup handlers) or doesn't involve the user at all (Google Analytics) should go to the bottom of the page.

You can get lazy loaders that will inject your script tags into your code. Since the code isn't on the HTML, you can be sure that your whole page has rendered correctly and that the JS you're including will not block anything.

Which is best depends on the relative ~~importance~~ priority (which has to be determined on a case-by-case basis) of having the JS running Vs. having the HTML rendering.

script aync

The async support as specified by google is achieved using two parts:

using script on your page (the script is supplied by google) to write out a <script> tag to the DOM.
that script has async="true" attribute to signal to compatible browsers that it can continue rendering the page.

The first part works on browsers without support for <script async.. tags, allowing them to load async with a "hack" (although a pretty solid one), and also allows rendering the page without waiting for ga.js to be retrieved.

Iframe Youtube Player API

For this iframe API to run The end user must be using a browser that supports the HTML5 postMessage feature. Most modern browsers support postMessage, though Internet Explorer 7 does not support it.

You obtain the reference by creating a YT.Player object

Friday, January 4, 2013

document_start

When you inject your content script, within the manifest you can state the "run_at" parameter to be "document_start", the files are injected after any files from css, but before any other DOM is constructed or any other script is run. More information can be found here.

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"],
      "run_at": "document_start"
    }
  ],
  ...
}

*Edited, added an example. One of the mutations event types could be used.

Example

manifest.json

{
  "name": "Content Script test",
  "version": "0.1",
  "description": "Content Script test",
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["cs.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

cs.js

document.addEventListener('DOMSubtreeModified', OnSubtreeModified, false);

function OnSubtreeModified(event) {
  console.log('Hello from extension!');
  document.removeEventListener('DOMSubtreeModified', OnSubtreeModified, false);
}

test.html (on the web somewhere)

<html>
<head>
  <script>
    alert('Hello from Web!');
  </script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Results

You will two alerts, in the order:

Hello from web!
Hello from extension!

sudharsh