Блог

Главная - Вопросы по программированию - Не удается получить элементы из внешнего html-файла в сценарий содержимого

Не удается получить элементы из внешнего html-файла в сценарий содержимого

#javascript #html #google-chrome-extension

Вопрос:

Расширяю расширение Chrome, и я пытаюсь захватить элемент из внешнего HTML — файла и манипулировать им. Этот HTML-файл был добавлен web_accessories в файл manifest.json, но всякий раз, когда я пытаюсь, ничего не происходит, есть ли что-то, что я упускаю или делаю неправильно?

Где я пытаюсь получить элемент

 // Load in HTML file
                fetch(chrome.runtime.getURL("findfont.html"))
                  .then(r => r.text())
                  .then(html => {
                    showModal();
                    const fontName = document.querySelector('.font-name');
                    fontName.innerText = "red";
                });

полный Content.js

 let toggleIsOn = false;
const elementIsReady = "special-flag";

// Receiving message from popup.js
chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {
      toggleIsOn = request.switchStatus === "on";
      registerEventHandlers();
  }
);

function registerEventHandlers() {
  const allText = document.querySelectorAll('h1, h2, h3, h4, h5, p, li, td, caption, span');

    for (let i = 0; i < allText.length; i  ) {
        const element = allText[i];
        if (!element.hasAttribute(elementIsReady)) {
            element.addEventListener('mouseover', async () => {
              if (!toggleIsOn){
                element.style.cursor = null;
                return;
              } 
                
              const colors = ['#ffadad', '#ffd6a5', '#fdffb6', '#caffbf', '#bdb2ff', '#9fdfff'];

              element.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
              element.style.cursor = "pointer";
            });

            element.addEventListener('mouseout', async () => {
              if (!toggleIsOn) return;
              element.style.backgroundColor = null;
            });

            element.addEventListener('click', async (e) => {
              if (!toggleIsOn) return;

              const showModal = async () => {
                const modal = document.createElement('dialog');
              
                modal.setAttribute(
                  "style",`
                  border: none;
                  border-radius:20px;
                  background-color:#fafafa;
                  opacity:1;
                  animation:fadeMe 0.4s;
                  position:absolute;
                  z-index:10000000000000;
                  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                  `);
              
                  modal.innerHTML = 
                  `
                  <iframe id="popup-content" scrolling="no" style="height:155px; width:347px; z-index:10000000000000; animation:fadeMe 0.4s;" frameBorder="0">
                    
                  </iframe>
                  `;
            
                  modal.style.top = e.pageY "px";
                  modal.style.left = e.pageX "px";
              
                  document.body.appendChild(modal);
                  const dialog = document.querySelector("dialog");
                  dialog.show();
            
                  document.body.addEventListener('click', () => {
                    document.body.removeChild(modal);
                    dialog.close();
                  });
              
                  const iframe = document.getElementById("popup-content");
                  iframe.src = chrome.extension.getURL("findfont.html")
              }
            
                // Load in HTML file
                fetch(chrome.runtime.getURL("findfont.html"))
                  .then(r => r.text())
                  .then(html => {
                    showModal();
                    const fontName = document.querySelector('.font-name');
                    fontName.innerText = "text";
                });
            });

            element.setAttribute(elementIsReady, true);
        }
    }
}

Внешний HTML-файл

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="content.css">
    <title>Find Font Modal</title>
</head>
<body id="dontChange">
    <div class="modal-div" id="modal">
        <div>
            <div class="font-name">Font Name</div>
            <div class="foundry-name">The Foundry Name</div>
        </div>
        <div class="line"></div>

        <div class="buttons">
            <button class="tryfont-btn" id="tryfont">Try out this Font</button>
        </div>
    </div>

    <script src="findfont.js"></script>
</body>
</html>

Комментарии:

1. При вызове этой выборки: fetch(chrome.runtime.getURL("findfont.html")) он ищет html-файл в каталоге расширений относительно корня расширения, например, предположим, что идентификатор расширения xyz -это URL-адрес, который вы получите chrome-extension://xyz/findfont.html . (1) Это то место, где должен находиться/должен находиться HTML-файл, или он внешний, как на каком-то сервере? (2) возвращает ли выборка 200? вы можете связать улов в цепочку после вкладки «Затем проверить или проверить сеть».

2. Хорошо, 1) Нет, по крайней мере, я так не думаю. HTML-файл не находится ни в какой папке и не размещен извне, он находится в корневом каталоге со всеми другими файлами, и 2) Да, выборка возвращает 200

Метки: