无法从 Chrome 扩展程序将子项附加到页面答案

【问题标题】：Can't append a child to page from a Chrome extension无法从 Chrome 扩展程序将子项附加到页面
【发布时间】：2014-02-25 12:01:33
【问题描述】：

这是简化的代码，它在 appendChild 行之后停止工作：

$preview = {
    designImg: '',
    thePage: null,
    designPreviewer: null,
    init: function(){
        var divNode = $('<div>').attr('id','layoutVsDesign').html('test');
        document.body.appendChild( divNode );
        alert('I never happen');
        this.designPreviewer = document.body.find('#designPreviewer');
    }
};

$(document).ready(function(){
    $preview.init();
});

知道我错过了什么吗？

我也试过了：

chrome.extension.getBackgroundPage().appendChild()

结果几乎相同

-编辑-

使用content scripts:

有效（接受一个字符串）：

chrome.tabs.executeScript({
   code: 'document.body.style.display = "none"'
});

但是

chrome.tabs.executeScript({
   code: 'document.body.appendChild("<div>tttttttesttt</div>")'
});

或

chrome.tabs.executeScript({
   code: 'document.body.appendChild(node[0])'
});

不行，如何将节点传递给code参数？

【问题讨论】：

标签： javascript google-chrome dom google-chrome-extension appendchild

【解决方案1】：

您正在将html 方法的返回值分配给divNode

您可以在 jQuery documentation 上找到，html 方法用作 setter 返回 jQuery 对象以允许链式调用。

因此，您尝试将 jQuery 对象附加到 DOM 节点，这是无效的。

你要做的是：

var divNode = $('<div>').attr('id','layoutVsDesign').html('test');        
$("body").append( divNode ); //append a jQuery object using jQuery method

否则：

var divNode = $('<div>').attr('id','layoutVsDesign').html('test');        
document.body.appendChild( divNode[0] ); //append a DOM node with DOM method

【讨论】：

您好，这可行，但是它将节点附加到扩展弹出窗口，我想将它附加到 chrome 中的当前页面，这可能吗？
我认为你可以使用content scripts
嘿！就是这样，请检查问题的编辑，谢谢！
node[0] 属于你的扩展，而不是当前页面。你可以做 chrome.tabs.executeScript({ code: 'document.body.innerHTML+="
"' })
使用 divNode.html() 获取 jQuery 对象的 html 作为字符串，并使用它来构建您在页面中注入的代码

【解决方案2】：

如果发布的 JS 在内容脚本中运行，则不需要 jQuery domload 事件。内容脚本通常在 dom 加载后运行。（您可以在清单中更改它，但不应该这样做。）

没有 jQuery，您的 init() 将如下所示：

// Create div
var divNode = document.createElement('div');
divNode.id = 'layoutVsDesign';
divNode.innerHTML = 'test';

// Append to open page doc
document.body.appendChild(divNode);

var thatDiv = document.querySelector('#layoutVsDesign');
alert(thatDiv);
this.designPreviewer = thatDiv;

您可以在脚本底部运行 init()，而不是在事件处理程序中。

如果它作为内容脚本运行，则不需要背景页面或executeScript()。

顺便说一句，您的原始代码有一个 jQuery 错误：document.body.find 不会是一个函数。

【讨论】：