Chrome 扩展：在 URL 字符串匹配时取消隐藏弹出文本

Question

我对编码 Chrome 扩展完全陌生，我对 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 00 </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';
});

Answer 1

弹窗是一个单独的页面，与运行后台脚本的后台页面无关。每次显示弹出窗口时都会重新创建弹出页面（带有自己的脚本），因此您只需使用 chrome.tabs.query 在 popup.js 脚本并切换元素的可见性 在回调中 因为 API 是异步的。

从 manifest.json
删除后台脚本文件
将 "tabs", "<all_urls>" 替换为 "activeTab" in manifest.json, more info.
在popup.html

</body>

<script src="popup.js"></script>

像这样创建 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';
});

要调试和检查弹出窗口，请单击图标将其打开，然后在内部右键单击并单击 "inspect"。

Chrome 扩展：在 URL 字符串匹配时取消隐藏弹出文本

Chrome Extension: Unhide Popup Text on URL String Match

javascript

google-chrome

popup

google-chrome-extension