博客搜索引擎优化教程(编写一个简单的chrome插件（教程）(教程)(图))
优采云 发布时间: 2022-02-17 00:20博客搜索引擎优化教程(编写一个简单的chrome插件（教程）(教程)(图))
搜索引擎快速导航
使用方法：下载crx扩展文件，拖入chrome应用管理界面
github地址：
写一个简单的chrome插件（教程）
成就效果：
简单理解：一个chrome扩展就是一个web应用，一个小小的网站，只是chrome上的一个快捷方式
所需知识（仅限初级）：
html
css
javascript
所需工具：chrome浏览器（本次使用的版本为69）第一步：初始化项目
项目文件说明：
chrome-search-tool/
├── manifest.json # 配置文件
├── popup.html # 弹出窗口
├── icon.png # 扩展图标
└── images # 静态资源文件(如images、css、js等)
第二步：编写配置文件
manifest.json
{
"name": "searchTool",
"manifest_version":2,
"version": "0.0.1",
"description": "便于搜索的chrome插件",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "搜索集合工具",
"default_popup": "popup.html"
}
}
参数说明：
name插件名称版本插件版本号manifest_version指定manifest文件格式的版本，2为OK描述插件描述图标插件图标，PNG格式，需要准备三个图标文件：
16x16（扩展信息栏）
48x48（扩展管理页面）
128x128（安装过程中使用）default_locale国际化支持，支持哪种语言浏览器，虽然官方推荐，但是我没有用第三步：写弹窗
popup.html
.main{
width: 100px;
height: 200px;
font-size: 18px;
text-align: center;
}
a{
text-decoration: none;
}
.title{
width: 100%;
font-size: 20px;
background-color: #E8E8E8;
}
img{
width: 18px;
height: 18px;
}
.links{
margin-top: 5px;
}
.links a{
width: 100%;
display: block;
margin: 4px 0;
color: black;
line-height: 25px;
}
.links a:hover{
background-color: red;
color: white;
}
.links img{
line-height: 25px;
}
.footer a{
font-size: 12px;
color: grey;
}
搜索导航
其实就是html + css + javascript
注意：如果有中文乱码，记得在文件顶部加上。这个方法和html编码一样，没什么特别的。
第 4 步：配置图标
图标.png
百度图片可以找到正方形图片，最好是png格式的
对于简单的尺寸裁剪，你可以去这个网址：
第 5 步：打包并安装扩展程序
打开 Chrome -> 更多工具 -> 扩展 -> 打开“开发者模式”
有两种方法：
加载解压后的扩展-> 将文件夹chrome-search-tool拖进去（多用于调试，修改文件后可以刷新） 打包扩展-> 选择打包后的扩展文件夹路径-> 生成crx扩展文件 -> 拖入 chrome
学会写一个简单的插件后，剩下的就是自己扩展，实现自己的小功能
参考文献文章：
写一个简单的chrome插件
