CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionpopup
Dave
Dave

Reputation: 17

Chrome Extension: Unhide Popup Text on URL String Match

I'm completely new to coding Chrome Extensions, and I'm not very experienced with JS, but I'm hoping someone can help. I'm trying to create an extension that triggers a pop-up on click that displays a different block of text depending on the webpage the user is on where most pages use a default text block, but certain sites display a custom block of text.

I've been able to get the popup to work without issue, but I'm having trouble with the structure and coding needed to check if the URL contains the url fragment I want to use to compare. I'm attempting to use a single popup.html file and using Divs and CSS to just show the particular text that I want the popup to display, rather than trying to reference multiple popup.html type files. I've read a ton of articles but can't find something that seems to be doing what I want that I can use as a learning reference. I'm starting with a CSS that sets the display to 'none' initially with the intent to expose just the given text that is relevant.

This if my first time attempting a Chrome Extension, and despite a lot of searching and reading I can't seem to pull it together. I suspect part of my problem is that my processes are out of order and I'm trying to expose a given block of text before I set them all to not display, and that action should be taken instead in a popup.js file I reference from popup.html, but I can't seem to figure out how to know and compare the url properly. At present when I click the button the popup appears, formatted to the correct width, but the contents are always blank. Here's what I have so far:

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

UPDATE: The code first proposed by wOxxOm worked perfectly, but in addition to the instructions provided, I had to rename my Div ID's to start at Test0 instead of Test1. Otherwise the below popup.js worked flawlessly:

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

Upvotes: 1

Views: 1273

Answers (1)

woxxom
woxxom

Reputation: 73626

The popup is a separate page not related to the background page where the background script runs. The popup page (with its own scripts) is recreated every time the popup is shown so instead of chrome.tabs.onUpdated in the background script you'll simply get the tab's URL using chrome.tabs.query in a popup.js script and switch the element's visibility inside the callback since the API is asynchronous.

  1. remove "background" section from manifest.json
  2. remove the background script file
  3. replace "tabs", "<all_urls>" with "activeTab" in manifest.json, more info.
  4. add <script src="popup.js"></script> before the closing </body> in popup.html
  5. create popup.js file like this:
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';
});

To debug and inspect the popup, open it by clicking the icon, then right-click inside and click "inspect".

Upvotes: 2

Related Questions