Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

282
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!