Auto logout chrome extension for Gmail

           50 comments   

Hello Friends, In the last article we learned to create a sample chrome extension. Here we are going to create auto logout Gmail script as an extension.

In case you want to learn how to create a sample extension please visit this link. So here we are not going to learn the basics of extension. Lets go through the code.

Step 1 - Create a manifest.json file. It should contain a valid json content –
e.g –
{
  "manifest_version": 2,
  "name": "Logout from Gmail",
  "description": "Auto logout from Gmail after 5 minute.",
  "version": "1.0",
  "author": "Saurabh Singh",
  "browser_action": {
    "default_title":"You will be logged out in 5 minute.",
    "default_icon": "icon.png",
    "default_popup": "popup.html"  },
  "content_scripts":[
    {
      "matches" : ["https://mail.google.com/*"],
      "js" : ["Gmail.js"]
    }],
  "permissions": [
    "activeTab",
    "idle",
    "storage",
    "tabCapture",
    "tabs",
    "https://mail.google.com/*"  ]
}


Step 2- In content Script we mentioned a js file which will be loaded after adding extension at chrome. Let’s see the code.
var timer = window.setInterval(logout, 500000);
function Validate(object){
   if(typeof object === 'undefined')
   {


      return true;
   }   return false;
}
function logout() {
   var signoutButton = document.getElementById("gb_71");
   if (!Validate(signoutButton)) {
      alert("Time is up. You will be logged out");
      signoutButton.click();
   }
   clearTimeout(timer);
}
Step 3 – Create an icon file icon.png and place it at the same folder structure.
<html>
<head>
    <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;
        }
    </style>
    </head>
<body>
<h4>Auto Logout from Gmail</h4></body>
</html>

We are good with our Auto log out facebook extension. In case you want to download the code please ClickMe.

Auto logout chrome extension for facebook

           3 comments   

Hello Friends, In the last article we learned to create a sample chrome extension. Here we are going to create autologout  facebook script as an extension.

In case you want to learn how to create a sample extension please visit this link. So here we are not going to learn the basics of extension. Lets go throught he code.

Step 1 - Create a manifest.json file. It should contain a valid json content –
e.g – 
{
  "manifest_version": 2,
  "name": "Logout from FB",
  "description": "Auto logout from fb after 5 minute.",
  "version": "1.0",
  "author": "Saurabh Singh",
  "browser_action": {
    "default_title":"You will be logged out in 5 minute.",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "content_scripts":[
    {
      "matches" : ["https://www.facebook.com/*"],
      "js" : ["facebook.js"]
    }],
  "permissions": [
    "activeTab",
    "idle",
    "storage",
    "tabCapture",
    "tabs",
    "https://www.facebook.com/*"
  ]
}
Step 2- In content Script we mentioned a js file which will be loaded after adding extension at chrome. Let’s see the code.
 
var timer = window.setInterval(logoutfromFB, 500000);

function Validate(object){
   if(typeof object === 'undefined')
   {
      return true;
   }
   return false;
}

function logoutfromFB(){
    //this opens the main logout menu
   var openLogoutMenu = document.getElementById("userNavigationLabel");
   if(!Validate(openLogoutMenu))
      openLogoutMenu.click();
   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

   /* I am using mutation observer as using it in chrome only we can listen web and mozzila mutaion observer as well. */

   var observer = new MutationObserver(function(mutations){
      //_w0d - logout button form class of facebook
      var logoutFormClass = document.getElementsByClassName("_w0d")[0];
      if(!Validate(logoutFormClass))
      {
         alert("Time is up. You will be logged out");
         observer.disconnect();
         logoutFormClass.submit();
      }
   });
   observer.observe(document, {
      attributes: true,
      childList: true,
      subtree: true
   });
   clearTimeout(timer);
}
Step 3 – Create an icon file icon.png and place it at the same folder structure.
Step 4 – Create a popup.html file which will contain the UI you want to open it.
html>

<html>
<head>
    <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;
        }
    </style>
    
</head>
<body>
<h4>Auto Logout from facebook</h4>
</body>
</html>
</html> 


We are good with our Auto log out facebook extension. In case you want to download the code please ClickMe.

How to create a chrome extension ?

           2 comments   

Hello Friends, in this article we will learn to create a chrome extension.

Step 1 - Create a manifest.json file. It should contain a valid json content –
e.g –
{
  "manifest_version": 2,
  "name": "Logout from FB",
  "description": "Auto logout from fb after 1 minute.",
  "version": "1.0",
  "author": "Saurabh Singh",
}
In json file, make sure you have defiined these three properties – manifest_version, version and name. These are the required properties. The value of the manifest_version should be the integer 2

Content Scripts – If  you need to access DOM of the browser page and this section will execute with ever page load.
e-g –
"content_scripts":[
  {
    "matches" : ["https://www.google.com/*"],
    "js" : ["script.js"]
  }],
 
How to write the UI for your extension –
So you have couple of options for writing it Browser Action and Page Action. So lets talk about Browser Action.

Browser-action –  After setting the browser action for your extension. Icon will be placed at the right corner of address bar like below image.


After clicking on the icon a popup will be shown. This will be controlled by your html UI. Lets see the content of browser action –
"browser_action": {
  "default_title":"You will be logged out in 1 minute.",
  "default_icon": "icon.png",
  "default_popup": "popup.html"
},


 default_icon - is the property which shows the icon at the
right corner of address bar.
default_popup – represents the html pop up which will shown after clicking the image.








default_title – this is used to see the tool-tip.

Page-action – This is almost similar with BrowserAction the only difference is the icon will be displayed inside the address bar like the bookmark image. Checkout the below image.






Let’s see the content of PageAction –
"page_action": {
  "default_title":"You will be logged out in 1 minute.",
  "default_icon": "icon.png",
  "default_popup": "popup.html"
},

So we are all set with our first chrome extension. Our manifest.json file will look like this– 
{
  "manifest_version": 2,
  "name": "Logout from FB",
  "description": "Auto logout from fb after 1 minute.",
  "version": "1.0",
  "author": "Saurabh Singh",

  "browser_action": {
    "default_title":"You will be logged out in 1 minute.",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "content_scripts":[
    {
      "matches" : ["https://www.facebook.com/*"],
      "js" : ["facebook.js"]
    }],
}

Step2 – Create an icon file icon.png and place it at the same folder structure.
Step3 – Create a popup.html file which will contain the UI you want to open it.
Here is the sample html file – 
html>

<html>
<head>
    <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;
        }
    </style>
</head>
<body>
<h4>I am the UI click me.</h4>
</body>
</html>

We are good with our first chrome extension. In case you want to download the code here is the link - Download Me !!

Happy Coding !!

How to create a WCF Service using Visual Studio 2015

           4 comments   

Hello Everyone, In this article we will talk about how can we create a new WCF Service in few seconds.
Open a new instance of visual studio and choose a pre installed WCF service library template.









This will create a default Service library project and this will contain these files inside that.
  • IService1.cs
  • Service1.cs
  • App.Config
we need to add a reference to the System.ServiceModel.Web from framework libraries.












Open App.Config file from the solution and check whether it contains contract and end point information. Like below -

<services>
      <service name="RestServiceTest.Service1">
        <host>
          <baseAddresses>
            <add baseAddress = "http://localhost:8733/Service1/" />
          </baseAddresses>
        </host>
      
        <endpoint address="" binding="basicHttpBinding" contract="RestServiceTest.IService1">
         
          <identity>
            <dns value="localhost"/>
          </identity>
        </endpoint>
       
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
      </service>
    </services>
You can change the base address, binding and contract if you are not aware about these then not a problem you can visit this article - WCF Basics

 IService1.cs -  This contains and Service Contract and Data Contract. You can change it anytime. IService1 is the contract of your service so name of this interface and in the app.config file should be same.

[ServiceContract]
    public interface IService1
    {
        [OperationContract]
        string GetData(int value);

        [OperationContract]
        CompositeType GetDataUsingDataContract(CompositeType composite);

        // TODO: Add your service operations here
    }
In Above code Composite type is a data contract.
[DataContract]
    public class CompositeType
    {
        bool boolValue = true;
        string stringValue = "Hello ";

        [DataMember]
        public bool BoolValue
        {
            get { return boolValue; }
            set { boolValue = value; }
        }

        [DataMember]
        public string StringValue
        {
            get { return stringValue; }
            set { stringValue = value; }
        }
    }
Service1.cs - It's a implementer class of the service and this is the base address of the service as well. Make sure you implement all the interface methods. like below-
public class Service1 : IService1
    {
        public string GetData(int value)
        {
            return string.Format("You entered: {0}", value);
        }

        public CompositeType GetDataUsingDataContract(CompositeType composite)
        {
            if (composite == null)
            {
                throw new ArgumentNullException("composite");
            }
            if (composite.BoolValue)
            {
                composite.StringValue += "Suffix";
            }
            return composite;
        }
    }
Now we are done with the service rebuild the project and click on the run button. This will host the service. Visual studio will take care of this. When you run this service a WCF test client will be launched. Like below -











If you do not see your service projects it means that there is some problem with your port. IF you are getting below  error -
HTTP could not register URL http://localhost:8733/Service1. Your process does not have access rights to this namespace (see http://go.microsoft.com/fwlink/?LinkId=70353 for details).

It means that you do not have administrator rights to this port. There are couple of solutions for this -
·         Either you give yourself administrator rights to this port

·         You can open a command line with administrator rights and  run this command -netsh http add urlacl url=http://+:8733/Service1 user=mylocaluser
If you get any error running this command like Create SDDL failed then try to change the user from mylocaluser to Everyone like below -
netsh http add urlacl url=http://+:8733/Service1 user=Everyone

If it shows url reservation successfully added then it means  we are done. Now run the visual studio project then you will be able to see the service projects inside WCF test client.
Now hit the browser with the base address mentioned in the app.config. It will show  the service methods like below - 


About The Author

Unknown
View my complete profile

Total Pageviews

Popular Posts

Blog Archive

copyright @ TechGiant 2015. Powered by Blogger.

Disclaimer

This is my personal blog and i write articles on .Net, WPF, C#, OOPS, Threading and other .Net technologies. This is not related to any of my employer and organizations. This is the result of my personal interest.

Followers