Javascript 如何编写从clyp.it嵌入小部件的用户脚本

我想在不离开网站的情况下录制音频并与他人分享。该代码的工作原理如下：

但它在我想要的网站www.zhihu.com上不起作用 该按钮停留在页面底部，单击后小部件不会加载

代码如下：

    (function() {
    'use strict';

    // Your code here...

    /*--- Create a button in a container div.  It will be styled and
    positioned with CSS.
*/ 
var zNode       = document.createElement ('div');
zNode.setAttribute ('id', 'myContainer');
zNode.style.position = 'fixed';
zNode.style.top = 50;
zNode.style.right = 50;
zNode.innerHTML = '<button id="myButton" type="button">use clyp to send voice message</button>';
document.body.appendChild(zNode);

//--- Activate the newly added button.
document.getElementById ("myButton").addEventListener('click',function(){

    var iframe       = document.createElement ('iframe');
    iframe.src = "https://clyp.it/recording-widget";
    iframe.style.width = 400;
    iframe.style.height = 400;
    document.getElementById ("myContainer").appendChild (iframe);
});


})();

（函数（）{
"严格使用",；
//你的代码在这里。。。
/*---在容器div中创建一个按钮。它将被设置样式并
定位与CSS。
*/ 
var zNode=document.createElement（'div'）；
zNode.setAttribute（'id'，'myContainer'）；
zNode.style.position='fixed'；
zNode.style.top=50；
zNode.style.right=50；
zNode.innerHTML='使用clyp发送语音消息'；
document.body.appendChild（zNode）；
//---激活新添加的按钮。
document.getElementById（“myButton”）.addEventListener（“单击”，函数）（）{
var iframe=document.createElement（'iframe'）；
iframe.src=”https://clyp.it/recording-widget";
iframe.style.width=400；
iframe.style.height=400；
document.getElementById（“myContainer”）.appendChild（iframe）；
});
})();

尝试使用嵌入式记录器谢谢您的回复。这个小部件看起来很棒。它在codepen上运行良好。但当我试图使用tampermonkey将其添加到现有网页时，它是不可见的。有什么是我忽略的吗？我使用document.createElement（'iframe'）然后使用document.body.appendChild（）来添加。很抱歉，我不知道如何在评论中添加代码。很抱歉，我无法帮助您创建该网站（因为我不懂中文）。尝试检查控制台是否有任何错误。它不会引入新错误。我能找到附在身体底部的div。但是单击它不会在页面上显示任何内容。在源代码的元素之间插入我的div似乎有效。但单击按钮后iframe不可见。也许我应该把div放在更好的地方？