How to debug keyboard event with DevTools?

I try to debug webapp which handle keyboard keys. are there in Chrome Devtools possibility to detect events connected to specific key?

Handle events for elements have preventDefault, stopPropagation or return false

I am building a chrome extension and facing some event related problem.

My extension is to capture all the user’s action on the browser, like user’s click, type and etc.

I am using document to bind my events, for e.g.

document.addEventListener("click", function(event){

On some element, a click event is already added with a return false; statement, for e.g.

ele.addEventListener("click", function(){
    // some stuff

    return false;

Is there any way I can have my callback executed too, also for the cases where an event.stopPropagation(), event.preventDefault() added too.

Your help is appreciated and thanks in advance.

Get defaultsuggestion in Chrome Extension

I am trying to get the default suggestion from chrome and use it if it is in URL format. This is what I have but I feel like I am using the wrong API because I don’t want to trigger it through a keyword I would rather it be done passively.

chrome.omnibox.onInputStarted.addListener(function callback){

chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function 
  var start_url = tabs[0].url;
chrome.omnibox.onInputCancelled.addListener(function callback){


the last event listener would simple return to the start URL.

I just need to know which API could do this passively.

Load a url from an event into a qtip using ajax

I have a chrome extension which must display the preview of the link in a tool-tip. Right now I can display the url using the text but when it is passed into the ajax part I have no idea how to pass the url as either the event or as an element.Right now it displays the same page on which the browser is in. Being a newbie into java script, and jQuery it would be of great help to me.

$('body').on('mouseenter', 'a', function(e) {
    var o = this;
let url = this.url;
    if ( o.href != '#' ) {
        chrome.extension.sendRequest('show', function(r) {
            var uri = $.url.parse(o.href),
                text = uri.source.replace(, '' + + '');
            // Check if is a tooltip or not
            if (r.istooltip) {
                position = {
                    my: 'top left',
                    target: 'mouse',
                    viewport: $(window),
                    adjust: {
                        y: +25
            } else {
                position = {
                    my: r.position,
                    at: r.position,
                    target: $(window),
                    adjust: {
                        y: ( r.position === 'left bottom' ? -20 : 0 )
            // Is the target a new window?
            if ( $(o).attr('target') == '_blank' ) text = '' + text;
            // Show the qtip
                overwrite: false,
     text: function(event, api) {
                    url:'e.url') // Use href attribute as URL
                .then(function(content) {
                    // Set the tooltip content upon successful retrieval
                    api.set('content.text', content);
                }, function(xhr, status, error) {
                    // Upon failure... set the tooltip content to error
                    api.set('content.text', status + ': ' + error);

                return 'Loading...'; // Set some initial text

                show: {
                    event: e.type,
                    ready: true,
                    delay: r.time
                hide: {
                    fixed: true
                position: position,
                style: {
                    classes: 'qtip-dark',
                    tip: {
                        corner: false
            }, e);
}).on('mouseleave', 'a', function(e){

Thanks in advance.

Handling keyup event with message passing in chrome extension

I am new to chrome extension development. I am trying to create an extension consist of a text field and a button. If user enters some text in text-field, then exact thing should automatically get entered login-id field of HTML page.

Here are my files..


    Email Extension

Enter email id:


 document.addEventListener('DOMContentLoaded', function() {
    var btnElement = document.getElementById("btnClear");
    var txtElement = document.getElementById("txtEmail");
    // onClick's logic below:
    btnElement.addEventListener('click', function() {

    txtElement.addEventListener('keyup', function() {

    function clearField() {
        txtElement.value = "";

    function changeEmail() {
        var emailId = txtElement.value;
        chrome.runtime.sendMessage({msg:emailId}, function(response) {


  "manifest_version": 2,

  "name": "Email Extension",
  "description": "This extension allows the user to enter Email id for login.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click to Enter user id"

  "permissions": [

  "content_scripts": [
      "matches": ["http://*/*", "https://*/*"],
      "js": ["myscript.js"]


    function(request, sender, sendResponse){
        var email = document.getElementById("login_username");
        email.value = request.msg;

Its just showing “written” on console. Not displaying request, sender content at console, also not entering anything in login_username

Can anybody please help to figure out where I am going wrong?