How can I get the URL and Title of current TAB in my chrome browser and show it when the users clicks on my extension icon

Question

I am building an extension, I want my extension to work as follows : When ever the user visits any website my extension should fetch the url and title of that website and display it whenever the user clicks on the extension icon

this is my code

(manifest.json)
 {
"manifest_version": 2,

"name": "My Launcher",
"description": "Quick launch lol Media",
"version": "1.0.0",
"icons": { "128": "icon_128.png" },
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
},
"permissions": ["activeTab"],
"background": {
    "scripts": ["popup.js"],
    "persistent": false
}
}


(popup.html)
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src="popup.js">
    </script>
    <script src="jquery-3.3.1.min">
    </script>
</head>
<body>
    <h2 id="greet">Hello world!!!</h2>
</body>

</html>


(popup.js)
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    tabs[0].url;     //url
    tabs[0].title;   //title
    $('#greet').text((tab[0].url).val());
});
});

When the user clicks on the extension icon he should see a message displaying the url and title of the current webpage he/she is visiting.

chrome.tabs.query({currentWindow: true, active: true}, tabs => { greet.textContent = tabs[0].url }) — wOxxOm, Jan 23 '19 at 19:33
Start using devtools debugger where you can set breakpoints inside your code, execute it step by step and inspect the variables, state, DOM. The popup has [its own separate devtools](https://stackoverflow.com/a/38920982). — wOxxOm, Jan 24 '19 at 17:26

score 0 · Answer 1 · answered Jan 29 '19 at 00:20

In your content script include the following in a function and then call it to return the tab URL...

function return_tab_url(){

  chrome.tabs.query({
     active: true,
     currentWindow: true
  }, function (tabs) {
     var tabURL = tabs[0].url;
     //returns https://...
     return tabURL;
   });            
}

Put a breakpoint at tabURL in devtools to observe the result or use alert to debug. Hope this helps.

How can I get the URL and Title of current TAB in my chrome browser and show it when the users clicks on my extension icon

1 Answers1