搜索引擎快捷导航一个简单的chrome插件

素颜马尾好姑娘i 2022-05-09 01:54 196阅读 0赞

使用方法 ：下载crx扩展名文件，拖入chrome应用管理界面即可

github地址：[https://github.com/mouday/chrome-search-tool][https_github.com_mouday_chrome-search-tool]

1.  实现效果：

[![search-tool-show.png][]][search-tool-show.png 1]

1.  简单理解：chrome扩展程序就是一个web应用，小型网站，只不过是在chrome上多了个快捷方式
2.  必备知识(初级即可)：

html
    css
    javascript

1.  必备工具: 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"
      }  
    }

参数说明:

1.  name 插件名称
2.  version 插件的版本号
3.  manifest\_version 指定清单文件格式的版本, 2就OK了
4.  description 插件描述
5.  icons 插件图标，PNG格式， 需准备三个图标文件: 16x16（扩展信息栏） 48x48（扩展管理页面） 128x128（用在安装过程中）
6.  default\_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用

# 第三步：编写popup页面 #

其实就是html + css + javascript

备注：如果出现中文乱码，记得在文件顶部加入`<meta charset="utf8">`，此方法和html编码是一样的，没有什么特别之处

# 第四步：配置图标 #

可以百度图片上找一张方块图片，最好找png格式的

对于简单的尺寸大小的裁剪，可以到这个网址处理：[http://www.gaitubao.com/][http_www.gaitubao.com]

# 第五步：打包安装扩展程序 #

打开Chrome –> 更多工具 –> 扩展程序 -> 打开“开发者模式”

有两个方法：

1.  加载已解压的扩展程序 -> 将文件夹`chrome-search-tool` 拖入就行（多用于调试，修改文件后刷新即可）
2.  打包扩展程序 -> 选择打包扩展程序文件夹的路径 -> 生成crx扩展名的文件 -> 拖入chrome

[![extensions.png][]][extensions.png 1]

[https_github.com_mouday_chrome-search-tool]: https://github.com/mouday/chrome-search-tool
[search-tool-show.png]: /images/20220509/8af3be831b8443e3840ed5799aea3e0f.png
[search-tool-show.png 1]: https://github.com/mouday/chrome-search-tool/blob/master/images/search-tool-show.png
[http_www.gaitubao.com]: http://www.gaitubao.com/
[extensions.png]: https://github.com/mouday/chrome-search-tool/raw/master/images/extensions.png
[extensions.png 1]: https://github.com/mouday/chrome-search-tool/blob/master/images/extensions.png