Получить URL-адрес при нажатии на значок расширения и отобразить во всплывающем окне - PullRequest
Новая
       6

Получить URL-адрес при нажатии на значок расширения и отобразить во всплывающем окне

0 голосов
/ 12 мая 2018

Я пытаюсь получить текущий URL-адрес вкладки во всплывающем окне, когда пользователь нажимает на значок расширения.

До сих пор я пытался content-scripts установить внутренний html тега, записанного в popup.html. Но это дает мне противоречивое поведение. Тоже попробовал

chrome.browserAction.onClicked.addListener

но это не работает, когда мы используем всплывающие окна.

Итак, как лучше всего захватить URL-адрес, отобразить его во всплывающем окне и заставить его работать всякий раз, когда пользователь нажимает на значок?

Вот файл 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"]
    }
  ]
}

Я написал следующий код в 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>

Исходный код 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);
    });
}

1 Ответ

0 голосов
/ 12 мая 2018

Я попробовал подобный код без 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);
    });

Это сработало для меня, я надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...