Расширение Chrome: отображение всплывающего текста в строке соответствия URL - PullRequest
Новая
       37

Расширение Chrome: отображение всплывающего текста в строке соответствия URL

0 голосов
/ 06 ноября 2019

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

Мне удалось заставить всплывающее окно работать без проблем, но у меня возникли проблемы со структурой и кодированием, необходимыми для проверки, содержит ли URL-адрес фрагмент URL, который я хочу использовать для сравнения. Я пытаюсь использовать один файл popup.html и использую Divs и CSS, чтобы просто показать конкретный текст, который я хочу, чтобы всплывающее окно отображало, вместо того, чтобы ссылаться на несколько файлов типа popup.html. Я прочитал массу статей, но не могу найти то, что, кажется, делает то, что я хочу, и которое я могу использовать в качестве учебного пособия. Я начинаю с CSS, который изначально отображает «none» с намерением предоставить только соответствующий текст.

Это если я впервые пробую расширение Chrome, и, несмотря на большой поиск и чтение, я не могу собрать его вместе. Я подозреваю, что часть моей проблемы заключается в том, что мои процессы вышли из строя, и я пытаюсь выставить определенный блок текста, прежде чем установить их все, чтобы они не отображались, и что вместо этого нужно выполнить действие в файле popup.js, на который я ссылаюсьиз popup.html, но я не могу понять, как правильно узнать и сравнить URL. В настоящее время, когда я нажимаю кнопку, появляется всплывающее окно, отформатированное до правильной ширины, но содержимое всегда пустое. Вот что у меня есть:

manifest.json 

  {
    "manifest_version": 2,
    "version": "1.0",
    "name": "Varibale Popup Test",
    "description": "Variable message popup",
    "permissions": [
        "tabs", 
        "<all_urls>"
     ],
    "background": {
        "scripts": ["background.js"]
     },
    "browser_action":
    {
    "default_icon": "images/get_started128.png",
    "default_popup": "popup.html"
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }

  }

background.js 

chrome.tabs.onUpdated.addListener( function( tabId,  changeInfo,  tab) {
       chrome.extension.getBackgroundPage().console.log(tab.url);
    if (tab.url.indexOf ("url1.com") > -1) {            {
        document.getElementById('#Test1').style.display = block;
        }

    else if (tab.url.indexOf('url2') > -1) {            {
        document.getElementById('#Test2').style.display = block;
        }

    else
            {
    document.getElementById('#Test3').style.display = block;
    }

});

popup.html 

<!DOCTYPE html>
<html>
<head>
       <title>Verbal TPA under $5000 </title>
       <link rel="stylesheet" type="text/css" href="popup.css">

</head>
<body>
        <div id="Test1" class="dynamic-content">
    Test1 Text
    </div>
        <div id="Test2" class="dynamic-content">
    Test2 Text
    </div>
        <div id="Test3" class="dynamic-content">
    Test3 Text
    </div>


</body>
</html>

popup.css 

body {
    min-width: 780px;
    max-height: 300px;
    font-size: 20px;
}

.dynamic-content {
    display:none;
}

ОБНОВЛЕНИЕ: код, впервые предложенный wOxxOm, работал отлично, но в дополнение к предоставленным инструкциям мне пришлось переименовать свои Div ID, чтобы начать с Test0 вместо Test1. В противном случае приведенный ниже popup.js работал без нареканий: 

const testUrls = [
  'url1.com',
  'url2.com',
];
chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  const i = testUrls.findIndex(u => tab.url.includes(u));
  document.getElementById(`Test${i < 0 ? 3 : i}`).style.display = 'block';
});

1 Ответ

0 голосов
/ 06 ноября 2019

Всплывающее окно - это отдельная страница, не связанная с фоновой страницей, на которой выполняется фоновый скрипт. Всплывающая страница (со своими собственными сценариями) воссоздается каждый раз, когда отображается всплывающее окно, поэтому вместо chrome.tabs.onUpdated в фоновом сценарии вы просто получите URL вкладки с помощью chrome.tabs.query в сценарии popup.js ипереключить видимость элемента внутри функции обратного вызова , поскольку API является асинхронным.

  1. удалить раздел "background" из manifest.json
  2. удалить файл фонового скрипта
  3. заменить "tabs", "<all_urls>" на "activeTab" в manifest.json, дополнительную информацию .
  4. добавить <script src="popup.js"></script> перед закрытием </body> в popup.html
  5. создать файл popup.js следующим образом: 
const testUrls = [
  'url1.com',
  'url2.com',
];
chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  const i = testUrls.findIndex(u => tab.url.includes(u)) + 1;
  const id = `Test${i || testUrls.length + 1}`;
  document.getElementById(id).style.display = 'block';
});

Чтобы отладить и проверить всплывающее окно, откройте его, щелкнув значок, затем щелкните правой кнопкой мыши внутри и нажмите «проверить».

...