单击扩展名图标获取网址，然后在弹出窗口中显示

Question

I am trying to fetch the current tab url in the popup display when an user clicks on the extension icon. 当用户单击扩展程序图标时，我试图在弹出窗口中获取当前的标签URL。

Till now I have tried content-scripts to set the inner html of a tag written in the popup.html. 到目前为止，我已经尝试过使用content-scripts来设置popup.html中编写的标记的内部html。 But it is giving me an inconsistent behaviour. 但这给了我不一致的行为。 Also I tried 我也尝试过

chrome.browserAction.onClicked.addListener

but it doesn't work when we are using popups. 但是当我们使用弹出窗口时它不起作用。

So what is best way to capture the url and display it in popup and get it work whenever the user clicks on the icon? 那么，什么是捕获URL并在弹出窗口中显示该URL并使其在用户单击该图标时正常工作的最佳方法？

Here is the manifest.json I am using: 这是我正在使用的manifest.json：

{
  "name": "temp app",
  "description" : "temp app",
  "version": "1.0",
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  },
  "browser_action" : {
    "default_popup": "popup.html",
    "default_icon": "hello_extensions.png",
    "default_title": "default app"
  },
  "permissions" : [
    "storage",
    "contextMenus",
    "tabs",
    "<all_urls>"
  ],
  "background" : {
    "scripts" : ["background.js"],
    "persistent" : false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ]
}

I wrote the below code in popup.html: 我在popup.html中编写了以下代码：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js_src/script7.js"></script>
    <script type="text/javascript" src="js_src/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div>
      <span id="cu" class="cu">Default</span>
      <button id="cub" class="cub" >Get URL</button>
    </div>
  </body>
</html>

Source code of script7.js: script7.js的源代码：

document.getElementById('cub').onclick = function() {
    // this method is not working while clicking the button
    alert('Method called');
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        $('#cu').html(tabs[0].url);
    });
}

window.onload = function() {
    // window.onload giving problem when i clicking multiple time continuously on the icon
    // also I doubt this is the best way to implement it
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
        $('#cu').html(tabs[0].url);
    });
}

Answer 1

I tried a code like this without JQuery, script7.js: 我尝试了这样的代码，但没有JQuery，script7.js：

    //wait for the DOM to be Loaded
    window.addEventListener("DOMContentLoaded", function() {
        function getCurrUrl(){
            chrome.tabs.query({active: true, currentWindow: true}, function(arrayOfTabs) {
                //the active tab y the only one of the arrayOfTabs at index = 0
                var activeTab = arrayOfTabs[0];
                var activeTabUrl = activeTab.url; 
                document.getElementById("cu").innerHTML = activeTabUrl;
            })
        }
        document.getElementById("cub").addEventListener("click", getCurrUrl);
    });

This worked for me, i hope it helps you. 这对我有用，希望对您有所帮助。

单击扩展名图标获取网址，然后在弹出窗口中显示

问题描述

1 个解决方案

解决方案1
0 2018-05-12 14:46:45

单击扩展名图标获取网址，然后在弹出窗口中显示

问题描述

1 个解决方案

解决方案1 0 2018-05-12 14:46:45

解决方案1
0 2018-05-12 14:46:45