Chrome Extension Popup Dom Изменения не обновляются - PullRequest
Новая
       8

Chrome Extension Popup Dom Изменения не обновляются

0 голосов
/ 26 августа 2018

Я создал расширение Chrome, которое просто отображает некоторый HTML во всплывающем окне. Я использую основу Foundation для отображения таблиц и JQuery для управления DOM

JQuery и Foundation загружаются в расширение и включаются в HTML.

Когда я пытаюсь обновить таблицы, когда всплывающее окно уже открыто, я не вижу изменений во всплывающем окне (например, $ ('p'). Text ("новый текст")) - но в Элементах В разделе инструментов Chrome Dev текст был изменен.

Также мой CSS-эффект наведения на строки таблицы отображается только в двух верхних из трех таблиц.

Это нормально? У меня нет этих проблем при просмотре файла popup.html на отдельной вкладке.

Как часто обновляется DOM? Как я могу контролировать, когда это происходит?

Вот мой popup.html: 

<script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../js/what-input.js"></script>
<script type="text/javascript" src="../../js/foundation.min.js"></script>

<link href="../../css/foundation.min.css" rel="stylesheet">

<table class="hover unstriped">
        <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
        </thead>
        <tbody>
                <tr>
                        <td>1</td>
                        <td>Content</td>
                        <td>Content Goes Here</td>
                        <td>Content Goes Here</td>
                    </tr>
        </tbody>
    </table>

<table class="hover unstriped">
        <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Content</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        </tbody>
    </table>

<table class="hover unstriped">
        <thead>
        <tr>
            <th width="200">Table Header</th>
            <th>Table Header</th>
            <th width="150">Table Header</th>
            <th width="150">Table Header</th>
        </tr>
        </thead>
        <tbody>
                <tr>
                        <td>1</td>
                        <td>Content</td>
                        <td>Content Goes Here</td>
                        <td>Content Goes Here</td>
                    </tr>
        </tr>
        </tbody>
    </table>

    <p id="test">new message</p>

EDIT Скринкаст: http://youtu.be/7xMwisRWHJE Вы можете видеть 1. Эффект наведения работает только на первых двух таблицах и 2. Команда jQuery изменяет узел на панели «Элементы», но не в самом всплывающем окне

manifest.json 

    {
      "name": "CHANGE THIS : Extension boilerplate",
      "version": "0.0.1",
      "manifest_version": 2,
      "description": "This extension was created with the awesome extensionizr.com",
      "homepage_url": "http://extensionizr.com",
      "icons": {
        "16": "icons/icon16.png",
        "48": "icons/icon48.png",
        "128": "icons/icon128.png"
      },
      "browser_action": {
        "default_title": "browser action demo",
        "default_popup": "src/browser_action/popup.html"
      },
      "default_locale": "en",
      "permissions": [
        "https://*/*"
      ]
    }
...