Chrome谷歌JS插件编写快速入门，实现某站视频5倍速，可旋转，可下载

最新推荐文章于 2024-08-20 16:09:46 发布

甲粒子

最新推荐文章于 2024-08-20 16:09:46 发布

阅读量1.2k

点赞数

分类专栏：前端大杂烩文章标签： javascript chrome 音视频

本文链接：https://blog.csdn.net/weixin_46361305/article/details/121803863

版权

前端大杂烩专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS插件编写

一、快速入门

介绍：

用于哔哩哔哩，实现5倍数，可从0.25升到5.25（循环），可以旋转视频，可以下载部分视频

效果：

在这里插入图片描述

1、结构

在这里插入图片描述

2、manifest.json

{
    "manifest_version": 2, //必须为2
    "name": "bbli", //插件名
    "description": "zhe ci yi ding",//描述
    "version": "1.0",//版本
    "permissions": [
      "tabs",
      "https://*/*",
      "http://*/*"
    ],
    "icons": {//图标
        "16": "/icon/16.png",
        "32": "/icon/32.png",
        "48": "/icon/48.png",
        "64": "/icon/64.png"
    },
    "content_scripts": [//这里是注入指定页面的代码配置，可以配置匹配的页面，注入的内容，启用的时间等等。
      {
        "matches": ["http://*/*","https://*/*"],
        "js": ["/js/JQuery2.1.4.js","/js/bbli.js"]
      }
    ],
    "page_action": {
      "default_name": "Hello bbli",
      "default_icon": "/icon/48.png",
      "default_popup": "/popup.html"
    }
}

参考

{
    "name": "bbli",
    "manifest_version": 2,
    "version": "0.1",
    "description": "help mr.zhang rename and download car video",
    "icons": {
        "16": "icon.png",
        "40": "icon.png",
        "128": "icon.png"
    },
    "author": "zhaogaz",
    "content_scripts": [{//这里是注入指定页面的代码配置，可以配置匹配的页面，注入的内容，启用的时间等等。
        "matches": [
            "https://wap.che.360.cn/*";, "http://v.xiaoyi.com/*";, "http://camera.leautolink.com/*";, "https://qsurl.goluk.cn/*";, "https://cdn.static.ddpai.com/*";
        ],
        "js": [
            "jquery-3.2.1.min.js", "content_js.js"
        ],
        "css": [
            "bootstrap.css", "content.css"
        ],
        "run_at": "document_start"
    }],
    "options_page": "options.html",//这里是配置页面的配置。
    "permissions": [
        "downloads",
        "storage",
        "<all_urls>"
    ],
    "background": {//这里是后台常驻的脚本配置，之后会说是怎么回事。
        "scripts": ["jquery-3.2.1.min.js", "bg.js"],
        "persistent": false
    }
}

3、popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bbli</title>
</head>
<body>
    <div>
        <p >这次一定!</p>
        <button onclick=""></button>
    </div>
</body>
</html>

4、js:功能定制

1、使用了jQuery

在这里插入图片描述

2、自定义功能js：bbli.js

console.log("hello bbli")
let v1=document.getElementsByTagName("video")[0]; 
let v2=document.getElementsByTagName("bwp-video")[0];

if(v1!=undefined){
    console.log(v1.src.replace("blob:",""))
    //window.open(v1.src.replace("blob:",""));
}else if(v2!=undefined){
    console.log(v2)
}
//console.log(v1.src)
window.addEventListener("load",f)
function f(){
        //var sendbar=document.getElementsByClassName("bilibili-player-video-sendbar");
        //$(".bilibili-player-video-sendbar").append("<button>这是按钮</button>");
        setTimeout(function(){
            $(".rigth-btn").append("<button id='diybtn' style='z-index: 13;\
            height: 30px;\
            width: 60px;\
            min-width: 60px;\
            line-height: 30px;\
            text-align: center;\
            -webkit-box-sizing: border-box;\
            box-sizing: border-box;\
            border-radius: 0 2px 2px 0;\
            background-color: var(--bpx-primary-color,#00a1d6);\
            color:white;\
            margin-left:20px;'\
            \
             >倍速</button>");
        
            $(".rigth-btn").append("<button id='diybtn2' style='z-index: 13;\
            height: 30px;\
            width: 60px;\
            min-width: 60px;\
            line-height: 30px;\
            text-align: center;\
            -webkit-box-sizing: border-box;\
            box-sizing: border-box;\
            border-radius: 0 2px 2px 0;\
            background-color: green;\
            color:white;\
            margin-left:20px;'\
            \
             >翻转</button>");
            $(".video-info").css("height","116px");
            //viewbox_report
            $("#viewbox_report").append("<button id='diybtn3' style='z-index: 13;\
            height: 30px;\
            width: 60px;\
            min-width: 60px;\
            line-height: 30px;\
            text-align: center;\
            -webkit-box-sizing: border-box;\
            box-sizing: border-box;\
            border-radius: 0 2px 2px 0;\
            background-color: orange;\
            color:white;\
            padding-bottom:30px;'\
            \
             >下载</button>");



            //bilibili-player-video-popup
            document.getElementById("bilibili-player")
            document.getElementsByClassName("bilibili-player-video-popup");
            let video=document.getElementsByTagName("video")[0]; 
            if(video==undefined){
                video=document.querySelector("bwp-video");
                console.log("bwp-video")
            }
            console.log(video)
            // video.addEventListener("playing",function(){
              //   console.log("视频播放中...")
             //})
            var btn=document.getElementById("diybtn");
            var btn2=document.getElementById("diybtn2");
            var btn3=document.getElementById("diybtn3");
            //console.log(btn);
            if(btn!=null){
                btn.addEventListener("click",function(){
                    console.log("按钮点击")
                    let rate=1;
                    if(isNaN(video.playbackRate)){
                        console.log("非数字进入")
                        document.querySelector("bwp-video").playbackRate=1;
                    }else{
                        let vv=video.playbackRate;
                        if(vv>5)
                            video.playbackRate=0.25;
                        else{
                            video.playbackRate=vv+0.25;
                        }
                        
                        $("#diybtn").html(""+video.playbackRate);
                    
                    }
                    console.log(video.playbackRate)
    
                })
            }
            if(btn2!=null){   
                var i=1;
                btn2.addEventListener("click",function(){
                    console.log(video)
                    video.style="transform:rotate("+(i++) * 90+"deg)";
                    //video2.setAttribute("style","transform:rotate(90deg)");
                    //video2.style.transform="rotate(90deg)";
                    //video2.css("transform","rotate(90deg)");
                })
            }
            if(btn3!=null){   
                btn3.addEventListener("click",function(){
                    let url=window.location.href;
                    url=url.replace("bilibili","ibilibili");
                    //console.log(url)
                    window.open(url)
                })
            }
        },5000)
    
}