Chrome 扩展弹出 Dom 更改未更新

Question

我已经构建了一个 chrome 扩展，它只是在弹出窗口中显示一些 HTML。我使用基础框架来显示表格和 jQuery 来操作 DOM

JQuery 和 Foundation 都下载到扩展并包含在 HTML 中。

当我在弹出窗口已经打开的情况下尝试更新表格时，我没有看到弹出窗口中的更改（例如 $('p').text("new 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>

编辑截屏视频：http: //youtu.be/7xMwisRWHJE 您可以看到 1. 悬停效果仅适用于前两个表和 2. jQuery 命令更改元素面板中的节点，但不在弹出窗口本身中

清单文件

    {
      "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://*/*"
      ]
    }