谷歌浏览器可以说是深受许多朋友的喜爱，如今微软的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就可以了。代码如下，就是一个输入框和一个按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哔哩哔哩视频搜索小工具</title>
</head>
<body>
<div style="width: 230px;">
<input type="text" ,placeholder="请输入搜索视频" style="display: inline-block;border-radius: 8px;outline: medium;"
id="content">
<button type="submit" style="display: inline-block;background-color: #FB7299;border-radius: 10px;color: white;outline: medium;"
id="btn_search">搜索</button>
</div>
<script type="text/javascript" charset="utf-8" src='popup.js'></script>
</body>
</html>
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();
}
步骤就是这么简单，感兴趣的朋友可以稍微了解下谷歌扩展插件的自己实现一下
