Monday, 20 November 2017

// // Leave a Comment

How To Make A Chrome Extension From Scratch

Creating A Chrome Extension To Show Notification

If you are a chrome user then you must have seen some cool chrome extension which are very useful in your daily life but every wondered, how they are built? Are you curious to know? If yes, then this post is for you to get started on how to write your own chrome extension.

Here we will be building a chrome extension to show a popup which will have a button and on the click of which it will show a notification.

The basic structure of our application looks like following:

  • Manifest file (manifest.json)It is the main component of chrome extension. It includes information about versioning, permissions, and other useful metadata for extension. It should be placed in the root of project folder.
  • popup page ( popup.html)This page will open up a popup on clicking the extension icon. The popup will have a button clicking on which will show a notification.
  • popup javascript file (popup.js)The javascript file which contains the logic of showing notification on the click of button in popup.
  • Favicon image (appychip.png)An Image to be displayed on the chrome extension bar
manifest.json

{
 "name": "myextension",
 "description": "Extension to show notification",
 "version": "1.0",
 "manifest_version":2,

 "content_security_policy":"script-src 'self'; object-src 'self'",

 "browser_action": {
  "default_popup": "popup.html",
  "default_icon": "appychip.png"
 },
 "permissions": ["notifications", "tabs"]
}

popup.html

<!-- popup.html -->

<html>
 <head>
 <script src="popup.js"></script>
 </head>
 <body>
  Hey there!!!
  <input type="button" id="show" value="show notification"/>
 </body>
</html>

popup.js


// popup.js

document.addEventListener('DOMContentLoaded', function() {
    var show = document.getElementById('show');
    
    // onClick's logic below:
    show.addEventListener('click', function() {

 // Let's check if the browser supports notifications
 if (!("Notification" in window)) {
   alert("This browser does not support desktop notification");
 }

 // Let's check if the user is okay to get some notification
 else if (Notification.permission === "granted") {
   // If it's okay let's create a notification
   var notification = new Notification("Hi there!");
 }

 // Otherwise, we need to ask the user for permission
 // Note, Chrome does not implement the permission static property
 // So we have to check for NOT 'denied' instead of 'default'
 else if (Notification.permission !== 'denied') {
   Notification.requestPermission(function (permission) {

       // Whatever the user answers, we make sure we store the information
       if(!('permission' in Notification)) {
         Notification.permission = permission;
       }

       // If the user is okay, let's create a notification
       if (permission === "granted") {
         var notification = new Notification("Hi there!");
       }
   });
 }

    });
});


appychip.png

Steps To Install Extension:


  • Visit chrome://extensions in your chrome browser and click on "load unpacked extension"


  • Select project directory of chrome extension and the extension must be visible now as shown below:


  • Open a new tab (preferably with url example.com). The favicon must be visible by now chrome extension bar.


  • Click on the favicon. This will open a popup which will have button and clicking on which will display notification.



This is how the notification looks. You can beatify the popup and notification and also do some cool stuff like accessing API to fetch data and display it.


Read More

Saturday, 18 November 2017

// // Leave a Comment

Multi Line Commenting in Vim

Comment and Uncomment Multiple lines in Vim

As we know, Vim is very powerful command line editor. Lets learn how to comment/uncomment multiple lines in one go using Vim shortcuts.

To comment the multiple lines:

  1. Press Control+v to activate Visual Block mode.
  2. Select the lines, you want to comment by pressing up and down keys. (It will look like one word selected on each line, but it does not matter)
  3. Now press Shift+i that is capital i to enter in INSERT mode.
  4. Now type the comment character according the code language for example (#, %)
  5. Now press esc. The comment character will appear on each line, you selected.
Hurray! we learnt multi line commenting in Vim. Lets learn multi line uncommenting in Vim now.

To uncomment the multiple lines:

  1. Press Control+v to activate Visual Block mode.
  2. Select the character, you want to remove to uncomment the lines, by pressing up and down keys.
  3. Press d button to delete that character.
Awesome! We uncommented the multiple lines in one go.

Keep Learning, Keep Sharing!
Read More

Monday, 13 November 2017

// // Leave a Comment

error authorizing context: authorization token required | unauthorized: HTTP Basic: Access denied | gitlab

Docker login succeed but Docker push giving error "unauthorized: HTTP Basic: Access denied"


If you are getting the following error while pushing docker image to gitlab registry then try to check the ".crt" file and ".key" file in "gitlab.rb".

Error while pushing image:

unauthorized: HTTP Basic: Access denied

Error in Gitlab (/var/log/gitlab/registry/current)

level=warning msg="error authorizing context: authorization token required" environment=production go.version=go1.8.1

check if you have the following things correctly in /etc/gitlab/gitlab.rb file


# Change the external_url to the address your users will type in their browser
external_url 'https://myrepo.xyz.com'
nginx['redirect_http_to_https'] = true
registry_external_url 'https://registry.xyz.com'
registry_nginx['ssl_certificate'] = "/etc/gitlab/ssl/registry.xyz.com.crt"
registry_nginx['ssl_certificate_key'] = "/etc/gitlab/ssl/registry.xyz.com.key"

Make sure the .crt file and .key file exists on the path specified here in gitlab.rb if not make the changes and restart gitlab with - "sudo gitlab-ctl restart"
Read More

Sunday, 12 November 2017

// // Leave a Comment

Set Title To Display Bcash Price On Koinex

How To Set Title of Koinex to Display BCASH current price


You must be watching BCash price as its going really crazy these days. But every time you need to switch to koinex website to see BCash current price.
Rahul Sagore created a javascript snippet which you can run in your developer console and the BCash price would come up on the title bar.


Here is where to put the snippet


Here is the snippet:

Read More

Saturday, 11 November 2017

// // Leave a Comment

Permission Denied While Connecting To Docker Daemon | Jenkins Job To Build Docker Image

Add Jenkins User To Docker Group

Solved : Warning: failed to get default registry endpoint from daemon (Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock:

Full Error Message:

Warning: failed to get default registry endpoint from daemon (Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.30/info: dial unix /var/run/docker.sock: connect: permission denied). Using system default: https://index.docker.io/v1/ Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post http://%2Fvar%2Frun%2Fdocker.sock/v1.30/images/create?fromImage=node&tag=boron: dial unix /var/run/docker.sock: connect: permission denied


Solution: Add jenkins user to docker group by running the following set of commands:
Read More

Saturday, 4 November 2017

// // Leave a Comment

Ack (search tool) Installation On Mac

How To Install ack on Mac with Brew

Ack is a search tool similar to grep, but optimized for programmers. It is designed for programmers with large heterogeneous trees of source code. It is written purely in portable Perl 5 and takes advantage of the power of Perl's regular expressions.

To know about ack more read here: https://beyondgrep.com/

Steps for Installing Ack:
  • Get your terminal open
  • Install homebrew

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null
  • Install ack using brew

    brew install ack
ack is ready to use now!
Read More
// // Leave a Comment

Advancecomp Installation On Mac

How To Install advancecomp on Mac with Brew

AdvanceCOMP is a collection of recompression utility tool for .ZIP archives, .PNG snapshots, .MNG video clips and .GZ files. The main aim of this tool is to recompress your rom, snapshot and clip collection of emulated games.

Following are the main features:
  • Recompress ZIP, GZ, PNG and MNG files using the Deflate 7-Zip implementation.
  • Recompress MNG files using Delta and Move optimization.
You can learn more about it here: http://www.advancemame.it/comp-readme.html

Three easy step to install AdvanceCOMP:
  • Open Your Terminal
  • Get Homebrew Installed

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null
  • Install advancecomp using brew
    brew install advancecomp
advancecomp is ready to use now!
Read More