Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Is there any Chrome extension, by which I would be alerted by auto highlight when my keyword is found on a page?

I do not want to use crtl+f every time.

share|improve this question

migrated from webmasters.stackexchange.com Aug 28 '12 at 8:21

This question came from our site for pro webmasters.

2 Answers 2

Here's another user script which doesn't need jQuery, supports case-insensitive regexp matching and actually highlights the specific words you want to match:

// ==UserScript==
// @name           Keyword Highlight 2
// @author         Ilmari Karonen
// @namespace      http://superuser.com/questions/467276
// @include        http://*
// ==/UserScript==

// Edit this regexp to match what you want highlighted; don't forget the "g" flag!
var r = /Chrome/ig;

// This span will be used to wrap the highlighted text:
var span = document.createElement( 'span' );
span.style.backgroundColor = 'yellow';

// Pre-create some other handy objects for later:
var text = document.createTextNode( '' );
var frag = document.createDocumentFragment();

// Walk the document body node by node:
var e = document.getElementsByTagName( 'body' )[0];
while ( e ) {
    // If it's a text node, match it against the regexp:
    if ( e.nodeType == Node.TEXT_NODE ) {
        var t = e.textContent, i = 0, m;
        while ( (m = r.exec( t )) !== null ) {
            // Copy any text before the match into the fragment:
            text.textContent = t.substring( i, m.index );
            frag.appendChild( text.cloneNode( true ) );
            // Wrap the match in a span and copy it into the fragment:
            span.textContent = m[0];
            frag.appendChild( span.cloneNode( true ) );
            // Keep track of the current match position:
            i = m.index + m[0].length;
        }
        if ( i > 0 ) {
            // Remove the matched text from e and re-insert it before it:
            e.textContent = t.substring( i );
            e.parentNode.insertBefore( frag, e );
            // Reset frag to a new empty fragment:
            frag = frag.cloneNode( false );
        }
    }
    // Advance to next node in DOM (bugfix: skip textarea content):
    var n = e.firstChild;
    if ( /^(head|title|script|style|textarea)$/i.test( e.tagName ) ) n = null;
    while (!n && e) {
        n = e.nextSibling;
        e = e.parentNode;
    }
    e = n;
}

Obligatory screenshot:

Screenshot

share|improve this answer

You could use a user script like the following:

// ==UserScript==
// @name           Keyword Info
// @namespace      SuperUser 467276
// @include       http://*
// ==/UserScript==

function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "//code.jquery.com/jquery-latest.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "jQuery.noConflict();(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}


function main() {
  jQuery('*:contains("chrome")').each(function(){
     if(jQuery(this).children().length < 1) 
          jQuery(this).css("background-color", "yellow") });
}

addJQuery(main);

This will highlight all elements (not just the matching text, as HTML doesn't work like that) that directly contain case-sensitive matches for the search string, chrome in the example.

This solution uses the jQuery inclusion code from this Stack Overflow question. There might be problems with sites already including jQuery; you might be more successful with other solutions.

Screenshot:

Screenshot with the highlighting of some elements on the question page

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.