Chrome扩展弹出窗口Dom更改未更新

Question

我建立了一个Chrome扩展程序，该扩展程序仅在弹出窗口中显示一些HTML。我使用基础框架来显示表，并使用jQuery操作DOM

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

[当我尝试在弹出窗口已经打开的情况下更新表时，我没有看到弹出窗口的更改（例如$（'p'）。text（“ new text”）））-但是在Elements部分Chrome开发工具的文本已更改。

此外，我对表行的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命令更改了Elements面板中的节点，但没有更改弹出窗口本身中的节点

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

Answer 1

对我来说同样的问题。我不明白这在过去1年零5个月内没有解决。也许是由于：-chrome扩展名不适合与严肃的面向数据的页面一起使用-背景和弹出窗口持久性