Question

我想在页面上添加HTML，点击某个复选框（现在它是Reddit的'Remember Me'复选框，但将来我希望它可以使用更多复选框）。我制作了这个内容脚本，但我不知道它是否对打开的chrome选项卡做了任何事情。

\\content_script.js
$(document).ready(function() {  
    var inputTable = document.getElementByTagName('input');
    for(var i=0; i<inputTable.length; i++){
        if((inputTable[i].getAttribute('type')=='checkbox') && (inputTable[i].getAttribute('name')=='rem')){
                var rememberMe = inputTable[i];
        }
    }
    document.addEventListener('DOMContentLoaded', function () {
                rememberMe.addEventListener('change', changeHandler);
    });
}
function changeHandler(){
    if(rememberMe.checked){
        var remTrack = chrome.extension.getURL ("rememberme.htm");
        document.body.insertBefore (remTrack, document.body.firstChild);
    }
    else{
    }
}

rememberme.htm 是我要添加的html，其中包含我想要播放的mp3（如果页面不一定在HTML5中，这会有效吗？）。

<!DOCTYPE html>
<html><head>
    <title>Remember Me</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="style.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<audio autoplay loop>
  <source src="remember.mp3" type="audio/mpeg">
</audio>
</body></html>

从我一直在阅读的内容看起来我应该让内容脚本调用我希望打开chrome标签运行的任何javascript，但我不知道如何在打开HTML时将HTML插入铬标签。任何帮助都表示赞赏，如果页面不在HTML5中，标签将无效，那么在javascript中播放mp3的最简单方法是什么？

Answer 1

Reddit是我最喜欢的页面，我想Redditors应该粘在一起，所以这里是你的脚本重构。

在点击“记住我”按钮后，它将美国海军乐队播放的“上帝拯救女王”的曲目添加到Reddit主页。指定音频源时，您需要在轨道所在的位置给出一个URL，就像图像一样。你也不需要添加头部和身体，以及你获取html的方式是错误的，你实际上只获得了一个url而不是扩展名的html。

window.onload =  main();

function main() {
    var elem = document.getElementById('rem-login-main'); 
    elem = addEventListener('change',changeHandler);
}

function changeHandler () {
    var yourAudio = document.createElement('audio');
    yourAudio.src = "http://upload.wikimedia.org/wikipedia/commons/d/de/United_States_Navy_Band_-_God_Save_the_Queen.ogg";
    yourAudio.controls = true;
    yourAudio.autoplay = true;
    var parentNode = document.getElementById('header');
    parentNode.insertBefore(yourAudio);
}

要测试它，请转到Reddit，单击F12，打开chrome浏览器devtools控制台，在devtools中转到选项卡源，找到选项卡片段，右键单击，创建新片段，复制粘贴此代码，保存它，单击播放按钮对（当你将鼠标悬停在它上面时，它表示'运行片段'）。如果你想使它成为扩展，你需要manifest.json。

希望它有效，如果你觉得有用，就不要记得赞成或接受答案。

选中某个复选框时添加HTML

1 个答案: