Chrome Extension – Get Current Or Active Tab Id And URL

Chrome Extension – Get Current Or Active Tab Id And URL

Here’s a quick code snippet on how you can get your current tab details when developing a chrome plugin or extension.

To get current tab id,

var tabId = chrome.tabs.getSelected(null, function(tab) {
    var tabId = tab.id;
    
    return tabId;
});

To get current tab url,

var tabUrl = chrome.tabs.getSelected(null, function(tab) {
    var tabUrl = tab.url;
    
    return tabUrl;
});

That’s all. Let me know if you need any assistance in the comments.

Enjoyed the content ? Share it with your friends !

Javascript Block Source Code Inspection

Javascript Block Source Code Inspection

You may not want users to look at your html, css, or javascript codes. Hence you are here at this page.

You should take not however that, as html/css/javascript is rendered on the client-side, there is no complete way of blocking the user from viewing your code. You can, however, block out the newbies who are attempting this (which would probably account for over 90% of them). Also, know that blocking source code inspection may mean that your site is less user-friendly and may end up irritating legitimate users.

I have prepared a jsfiddle should you wish to test the code. Now, onto the actual code …

Blocking Right Clicks

To block a specific element (and its children) from being right clickable,

// block a specific element (and all its children) from being right-clicked
// use it like so : disable_rightclick("container_id");
function disable_rightclick(element_id)
{
    var elem = document.getElementById(element_id);
    elem.oncontextmenu = function() {return false;};
}

To block the entire page from being right clickable,

document.oncontextmenu = function() {return false;};

 

Blocking Hotkeys

The commonly used hotkeys for source code inspections are

  • Right Click -> Inspect Element (Hotkey: CTRL + SHIFT + I)
  • Right Click -> View Page Source (Hotkey: CTRL + U)

To block the above hotkeys, put the following codes on your page

document.onkeydown = function(e) {
    if(e.keyCode == 123) {
        return false;
    }
    if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){
        return false;
    }
    if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){
        return false;
    }
    if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
        return false;
    }

    if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){
        return false;
    }      
}

CONCLUSION

Hopefully with these, you are able to block off users will ill-intent. Do remember that you will be sacrificing usability for security and you should determine for yourself if the trade-off is worth it or not.

Enjoyed the content ? Share it with your friends !

CefSharp block popup windows

CefSharp block popup windows

Recently I had to use CefSharp for a project of mine and needed to block popup windows. There are not a lot of up-to-date answers or solutions for issues pertaining to CefSharp, so I thought I should just share mine.

You will need to implement your own class which inherits or extends the ILifeSpanHandler interface

public class BrowserLifeSpanHandler : ILifeSpanHandler
 {
     public bool OnBeforePopup(IWebBrowser browserControl, IBrowser browser, IFrame frame, string targetUrl, string targetFrameName,
         WindowOpenDisposition targetDisposition, bool userGesture, IPopupFeatures popupFeatures, IWindowInfo windowInfo,
         IBrowserSettings browserSettings, ref bool noJavascriptAccess, out IWebBrowser newBrowser)
     {
         MessageBox.Show("Popup detected. Target url : " + targetUrl);
         newBrowser = null;
         return true;
     }

     public void OnAfterCreated(IWebBrowser browserControl, IBrowser browser)
     {
         //
     }

     public bool DoClose(IWebBrowser browserControl, IBrowser browser)
     {
         return false;
     }

     public void OnBeforeClose(IWebBrowser browserControl, IBrowser browser)
     {
         //nothing
     }
 }

And in your browser instance, set the LifeSpanHandler member to your own handler

BrowserLifeSpanHandler blsh = new BrowserLifeSpanHandler();
browser.LifeSpanHandler = blsh;

 

Enjoyed the content ? Share it with your friends !

CefSharp handle alerts, confirms, and prompts

CefSharp Handle alerts, confirms, and prompts

I recently needed to make use of CefSharp library to implement my own Chrome-based browser and had to hook or handle javascript alerts, confirms and prompts. This was how I did it, in case any of you find yourself needing it.

You will need to implement your own class which extends the IJsDialogHandler interface

public class JsHandler : IJsDialogHandler
{
    public void OnDialogClosed(IWebBrowser browserControl, IBrowser browser)
    {
        throw new NotImplementedException();
    }

    public bool OnJSAlert(IWebBrowser browser, string url, string message)
    {
        MessageBox.Show("Alert Detected. Url : " + url + " \n message : " + message);
        return false;
    }

    public bool OnJSBeforeUnload(IWebBrowser browserControl, IBrowser browser, string message, bool isReload, IJsDialogCallback callback)
    {
        throw new NotImplementedException();
    }

    public bool OnJSConfirm(IWebBrowser browser, string url, string message, out bool retval)
    {
        MessageBox.Show("Confirm Detected. Url : " + url + " \n message : " + message);
        retval = false;
        return false;
    }

    public bool OnJSDialog(IWebBrowser browserControl, IBrowser browser, string originUrl, CefJsDialogType dialogType, string messageText, string defaultPromptText, IJsDialogCallback callback, ref bool suppressMessage)
    {
        throw new NotImplementedException();
    }

    public bool OnJSPrompt(IWebBrowser browser, string url, string message, string defaultValue, out bool retval, out string result)
    {
        MessageBox.Show("Prompt Detected. Url : " + url + " \n message : " + message);
        retval = false;
        result = "";
        return false;
    }

    public void OnResetDialogState(IWebBrowser browserControl, IBrowser browser)
    {
        throw new NotImplementedException();
    }
}

And then in your ChromiumWebBrowser instance,

JsHandler jh = new JsHandler();
browser.JsDialogHandler = jh;

 

 

Enjoyed the content ? Share it with your friends !

Javascript solution to showing spoiler

Javascript solution to showing spoiler

Sometimes, you might find yourself needing to hide content that are spoilers manually. This is especially so when you don’t wish for your site to be bloated by libraries or plugins. This is a quick solution to solve that, although i admit it is not the most elegant.

It does not require jQuery or any other library. It only makes use of simple css and javascript.

<style>
.hidespoiler{
    display:none;
}
.showspoiler {
    display:block;
}
</style>

<span onclick="toggleSpoiler(this);">Toggle Spoiler<span class="hidespoiler">Spoiler Content</span></span>
<script>
function toggleSpoiler(spoilerElement) {
    spoilerElement = spoilerElement.children[0];
    spoilerElement.toggleClass('showspoiler');
    spoilerElement.toggleClass('hidespoiler');
}
</script>

 

Enjoyed the content ? Share it with your friends !