javascript - In the context menu, how does Chrome know if text is a URL? -

i'm in middle of making chrome extension adds 'shorten url' button context menu. first time i've ever done code related, i'm doing ok.

at moment i've got button coming whenever highlight text (using selectiontext). want come if text 'text' url (i.e. plain text that's url, not link).

i know possible, because google it. if highlight , right-click on text 'search google for' button comes up, if highlight , right-click plain text url 'go to' button comes up.

how can in extension?

thank you.

edit:

i've tried working in extension using timothée boucher's advice, must doing wrong (see comment below).

here's i've got far:

background.js

function shortenurl1(info) {     var searchstring = info.pageurl;     chrome.tabs.create({         url: "http://is.gd/create.php?url=" + searchstring     }) }  chrome.contextmenus.create({     title: "shorten url (with is.gd)",     contexts: ["page"],     onclick: shortenurl1 });  chrome.runtime.onmessage.addlistener(     function (request, sender, sendresponse) {         if (request.action === 'addcontextmenu') {             function shortenurl2(info) {                 var searchstring = info.selectiontext;                 chrome.tabs.create({                     url: "http://is.gd/create.php?url=" + searchstring                 })             }              chrome.contextmenus.create({                 title: "shorten url (with is.gd)",                 contexts: ["selection"],                 onclick: shortenurl2             })         } else if (request.action === 'removecontextmenu') {             chrome.contextmenus.remove({                 title: "shorten url (with is.gd)"             })         }     } );  function shortenurl3(info) {     var searchstring = info.linkurl;     chrome.tabs.create({         url: "http://is.gd/create.php?url=" + searchstring     }) }  chrome.contextmenus.create({     title: "shorten url (with is.gd)",     contexts: ["link"],     onclick: shortenurl3 }); 

contentscript.js

document.onmouseup = function() {     var selectedtext = window.getselection().tostring();     // regex should work basic cases doesn't follow     // rfc strictly constitutes url. full regex left exercise ;-)     if (/((([a-za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[a-za-z0-9.-]+|(?:www.|[-    ;:&=\+\$,\w]+@)[a-za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:    [\w]*))?)/.test(selectedtext)) {         // send message background page add context menu         chrome.extension.sendmessage({action: 'addcontextmenu', url: selectedtext});     } else {         // send message background page remove context menu         chrome.extension.sendmessage({action: 'removecontextmenu'});     } }; 

manifest.json

{     "background": {         "scripts": ["background.js"]     },     "content_scripts": [{         "run_at": "document_idle",         "js": ["contentscript.js"],         "matches": ["<all_urls>"]     }],     "description": "shortens urls using is.gd.",     "icons": {         "16": "icon16.png",         "48": "icon48.png"     },     "name": "is.gd context menu",     "permissions": ["contextmenus", "tabs", "clipboardwrite"],     "version": "1.0",     "manifest_version": 2 } 

as far know when create context menu in advance (e.g. when extension loaded) purpose, it'll either/or. meaning you'll selected text or not @ all. you'll have add , remove dynamically.

you can following:

1. in content script, add listener on document.onmouseup.
2. when it's called, check content of selected text.
3. if matches regular expression url, have background page add context menu, otherwise remove context menu.
4. there no step 4.

so in content script, have that:

document.onmouseup = function() {     var selectedtext = window.getselection().tostring();     // regex should work basic cases doesn't follow     // rfc strictly constitutes url. full regex left exercise ;-)     if (/^\s*https?:\/\/[a-za-z0-9$-_.+!*'(),]+\s*$/.test(selectedtext)) {         // send message background page add context menu         chrome.extension.sendmessage({action: 'addcontextmenu', url: selectedtext});     } else {         // send message background page remove context menu         chrome.extension.sendmessage({action: 'removecontextmenu'});     } }; 

and in background script, listen messages , create , remove context menu accordingly.

chrome.runtime.onmessage.addlistener(     function(request, sender, sendresponse) {         if (request.action === 'addcontextmenu') {             // code add context menu             // can access url in 'request.url'         } else if (request.action === 'removecontextmenu') {             // remove context menu         }     } ); 

see this page information on message passing.

nb: might able create menu content script haven't tried.