用javascript修改html_Javascript_Google Chrome Extension

用javascript修改html

javascript google-chrome-extension

用javascript修改html,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我正在为自己开发一个小扩展。目标很简单，单击扩展，输入youtube链接，然后在扩展弹出窗口中播放视频这是我的HTML <body> Youtube Link: <input type="text" id="link" name="firstname"> <button type="button" id="do-link"> Go ! </button> <script src="popup.js"></

我正在为自己开发一个小扩展。目标很简单，单击扩展，输入youtube链接，然后在扩展弹出窗口中播放视频

这是我的HTML

<body>
    Youtube Link: <input type="text" id="link" name="firstname">
    <button type="button" id="do-link"> Go ! </button>
    <script src="popup.js"></script>
    <p id="write">Here your link</p>
    <iframe id="ytplayer" title="YouTube video player" class="youtube-player" type="text/html" 
    width="640" height="390" src="https://www.youtube.com/watch?v=DTqTs15Hc9w"
    frameborder="0" allowFullScreen></iframe>
</body>

这基本上就是在控制台中打印文本框中的内容。并显示KSI视频（或者，如果你放了链接，你想看哪个视频。我想知道是否有一种简单的方法可以用用户在文本框中写的链接替换youtube链接？

只需在单击函数中用

替换iframe src即可。

你可以更改iframe的src，但你需要使用youtube中的嵌入url，然后不仅仅是Youtube页面的IFRAME，否则会出现跨域错误

另外，从Youtube URL，您需要获取视频ID并在嵌入SRC中使用它

编辑您的代码：

HTML

这是一个工作版本（小提琴）：

额外：用于解析。

@theMarceloR:*拒绝在帧中显示“”，因为它将“X-frame-Options”设置为“SAMEORIGIN”**现在在我的控制台日志中看到了这一点是的，这是我在其他帖子中看到的，这只是我自己的扩展，所以我不必使用解析器，但这是一个非常好的主意，我只是在js中使用了replace（）函数

var a;
function link() {
    a = document.getElementById('link').value;
    document.getElementById('ytplayer').src = a;
    console.log(a);
}
document.getElementById('do-link').onclick = link;

`Youtube Link: <input type="text" id="link" name="firstname">
<button type="button" id="do-link"> Go ! </button>
<script src="popup.js"></script>
<p id="write">Here your link</p>
<iframe id="iframe_id" width="640" height="390" src="//www.youtube.com/embed/u1vhQOOZUF4" frameborder="0" allowfullscreen></iframe>`

var a;
function link() {
    a = document.getElementById('link').value;
    var videoid = youtube_parser(a);
    var new_link = "https://www.youtube.com/embed/" + videoid;

    document.getElementById('write').innerHTML = new_link;
    document.getElementById('iframe_id').src = new_link;
    console.log(new_link);
}
document.getElementById('do-link').onclick = link;

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match&&match[7].length==11){
        return match[7];
    }else{
        alert("Url incorrecta");
    }
}