Chrome 背景页面问题

Question

我正在构建一个 Chrome 扩展程序，我是这样设计的：

我有一个：

• popup.html（browserAction 弹出窗口）；
• popup.js（包含在 popup.html 中）；
• background.html（后台脚本）；
• background.js（包含在 background.js 中）；

它应该如何工作：后台页面（和相关的js）执行并创建一个HTML表格。

单击浏览器操作弹出图标后，我从后台页面 DOM 中检索该表（通过 getBackgroundPage）并将其附加到 popup.html 中。

会发生什么：我第一次单击按钮时，一切正常。

第二次，popup.html 不再显示表格（没有表格是追加的）：所以，我发现 background.html 仍然存在，但里面没有更多表格。

backgroundPage 会发生什么？

相关代码：

// reference to the background page window
    var w = chrome.extension.getBackgroundPage();

    console.log(w);

    // the background page week table
    var newWeek = w.document.getElementById("week");

    console.log(newWeek);

    // the popup week table
    var oldWeek = document.getElementById("week");

    // replace popup table with background table (first time it works, second time newWeek is null)
    oldWeek.parentNode.replaceChild(newWeek,oldWeek);

Answer 1

您实际上是在将表格从背景页面 DOM 树移动到弹出 DOM 树。当弹出窗口关闭时，表格将丢失。您可以尝试添加.cloneNode，以便获得表格的副本：

var newWeek = w.document.getElementById("week").cloneNode(true);