Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

290
Vistas
Want to create a google chrome extension to highlight text, when we use chrome to view local html files

I have checked all the available extensions and found no single extension that fulfills my requirements. I have saved the web page in Html format and view it using chrome. But when I tried to highlight text from extensions, all extensions failed to do it. I just want to highlight text directly in chrome. Yawas, Simple Highlighter, as well as most other highlighters, don't highlight on local pages.

So I have combined few code lines to do it myself. I have created context_script.js, manifest.js, and popup.html. In its current form, the code works like this: http://jsfiddle.net/LPnN2/12/ The problem is getting it to work with an extension.

I have also created a function to assign a keyboard shortcut key to highlight text.

context_script.js

function dockeyUp(e) {
    if (e.ctrlKey == true && e.key == 'z') {
        highlight('yellow');
    }
}
document.addEventListener('Keyup', dockeyUp, false);

function makeEditableAndHighlight(colour) {
    sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

manifest.js

{
    "manifest_version": 2,
  
    "name": "Highlight Text",
    "description": "Highlight Important Text from Webpage",
    "version": "1.0.0",
    "icons": { "128": "icon_128.png" },
    "content_scripts": 
    [ 
      {
        "matches" : [ "<all_urls>" ],
      "js": [ "context_script.js"]
      } 
    ],
    "browser_action": 
    {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "permissions": ["activeTab"]
  }

I am not getting any error with this code but nothing happens when I press the keyboard shortcut key. Is there any other possible solution to this problem?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda