Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

286
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda