自制简单谷歌插件——哔哩哔哩视频搜索小工具

谷歌浏览器可以说是深受许多朋友的喜爱，如今微软的edge也推出了chromium内核的新版本。个人觉得，谷歌浏览器深受喜欢的其中一个原因就是有丰富优秀的谷歌插件，例如油猴就是非常优秀的插件，上次我也和大家分享了我用油猴写的一个小脚本，没看过的朋友可以去瞧瞧=》9行代码制作一个简单的油猴插件。
看过这么多优秀的插件后，我自己也是忍不住想要来尝试一下，所以自己今天就做了一个简单的小插件——哔哩哔哩视频搜索小工具，先来瞧瞧效果吧！

image.png

image.png

image.png

可以用av号搜索，也可以输入自己想输入的搜索内容，和在哔哩哔哩官网内的搜索是一样的。那么我们来一起制作一下。
1.第一步，新建一个manifest.json文件，这是谷歌插件中一个必须的文件，谷歌它会去读取这个json文件，具体的所有配置可以自己去网上搜索下，有很多大佬分享的有，我这里就只给大家解释下我的代码：

{
    "name": "哔哩哔哩",     //扩展的名称
    "description": "哔哩哔哩视频搜索,让你快速搜索哔哩哔哩的视频",    //对扩展的描述，看我上面的图片就可以知道了
    "manifest_version": 2,
    "version": "1.0.0",
    "incognito": "split",
    "icons": {
        "16": "/logo.png",    //设置的图标，这里好像必须是png格式的照片，之前用jpg的显示不出来
        "48": "/logo.png",
        "128": "/logo.png"
    },
    "author": "傲寒道长",    //作者

    "browser_action": {
        "default_icon": {
            "19": "/logo.png",
            "38": "/logo.png"
        },
        "default_title": "哔哩哔哩视频搜索小工具",   //鼠标悬浮图标上时显示的标题
        "default_popup": "index.html"          //点击时弹出的小窗口对应的html页面

    }
}

我这里的配置很简单，那些大佬的配置就很长，这里补充说一下，自己获取到的crx扩展文件是可以解压，可以自己自行解压来查看里面的文件，能够学习到大佬们的代码。
2.第二步，我们来写我们的index.html，也就是点击后的那个小窗口，注意，在index.html里面写的js是无效的，这里规定不能够写内联js，所以我们要写的js要放在外部，index.html里面去调用外部的js就可以了。代码如下，就是一个输入框和一个按钮

    
    
    



    

        
        搜索
    
    

3.第三步，来写我们的popup.js,js要实现的主要代码其实就是点击button，然后获取输入框input的内容value，然后通过哔哩哔哩的搜索链接进行跳转，除此之外就是简单地对样式进行优化,代码如下。

function searchVideo() {

    var content = document.getElementById("content");
    console.log(content.value)
    if(!content.value){

        content.setAttribute("value","对不起，搜索不能为空")
        content.setAttribute("style","color:red;display: inline-block;border-radius: 8px;outline: medium;")

    }else{

        console.log("shuru")
        window.open("https://m.bilibili.com/search.html?keyword="+content.value,"_blank");     

    }

}

document.getElementById("content").onfocus = function(){

    content.setAttribute("value","")
    content.setAttribute("style","display: inline-block;border-radius: 8px;outline: medium;")

}

document.getElementById("btn_search").onclick=function () {
    searchVideo();
}

步骤就是这么简单，感兴趣的朋友可以稍微了解下谷歌扩展插件的自己实现一下