我如何在Chrome浏览器中获取当前TAB的URL和标题,并在用户单击我的扩展程序图标时显示它

时间:2019-01-23 19:27:33

标签: google-chrome-extension

我正在构建扩展程序,我希望扩展程序可以按以下方式工作: 每当用户访问任何网站时,我的扩展程序都应获取该网站的网址和标题,并在用户单击扩展程序图标时将其显示

这是我的代码

(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());
});
});

当用户点击扩展程序图标时,他应该看到一条消息,显示他/她正在访问的当前网页的网址和标题。

1 个答案:

答案 0 :(得分:0)

在您的内容脚本中,在函数中包含以下内容,然后调用它以返回选项卡URL ...

function return_tab_url(){

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

在devtools中的tabURL处放置一个断点,以观察结果或使用警报进行调试。希望这会有所帮助。