搜索引擎快捷导航

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

github地址：https://github.com/mouday/chrome-search-tool

编写一个简单的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 插件名称
version 插件的版本号
manifest_version 指定清单文件格式的版本, 2就OK了
description 插件描述
icons 插件图标，PNG格式，需准备三个图标文件:
16x16（扩展信息栏）
48x48（扩展管理页面）
128x128（用在安装过程中）
default_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用

第三步：编写popup页面

popup.html

<meta charset="utf8">
<base target="_blank" />
<style>.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;}
</style>  <div class="main"><div class="title">搜索导航</div><div class="links"><a href="https://www.baidu.com/"><img src="data:images/baidu.ico" alt="">百度</a><a href="https://www.google.com.hk/"><img src="data:images/google.ico" alt="">谷歌</a><a href="https://cn.bing.com/"><img src="data:images/bing.ico" alt="">必应</a><a href="https://www.sogou.com/"><img src="data:images/sogou.ico" alt="">搜狗</a><a href="https://www.so.com/"><img src="data:images/so.ico" alt="">360</a></div> <div class="footer"><a href="https://www.pengshiyu.com/message.html">问题反馈</a></div></div>

其实就是html + css + javascript

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

第四步：配置图标

icon.png

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

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

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

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

有两个方法：

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

学会编写简单插件之后，剩下的就是自己动手扩展，实现自己的小功能了

参考文章:
编写一个简单的chrome插件

搜索引擎快捷导航：一个简单的chrome插件（教程）相关推荐

制作一个简单的chrome插件
开始既然是简单的插件,那么我们就只要一些必须有的. 首先创建一个文件夹,我的文件夹叫做ChromeExtensions,然后在文件夹中建立两个文件,分别是manifest.json和index.js ...
Android-实现一个简单的自动翻译插件
目录实现一个简单的自动翻译插件实现思路几个重要的实现方法 1.解析xml 2.写文件 3. 翻译使用实现一个简单的自动翻译插件最近在开发项目是要将Android相关的资源进行国际化,需要将 ...
制作一个简单的Chrome extensions并发布到应用商店
制作一个简单的Chrome extensions并发布到应用商店制作一个简单的Chrome extensions并发布到谷歌商店一个简单的ShowTime extension 注:工具推荐使用VS ...
eclipse maven项目 class类部署不到tomcat下_Springboot介绍以及用Eclipse搭建一个简单的Springboot项目教程
简述本文主要介绍Springboot以及用Eclipse搭建一个简单的Springboot项目. Springboot简介 Springboot是由Pivotal团队提供的全新框架,其设计目的是用来 ...
java qq ui界面_java swing 创建一个简单的QQ界面教程
记录自己用java swing做的第一个简易界面. LoginAction.java package com.QQUI0819; import javax.swing.*; import java.a ...
一个好用快捷的前端请求代理chrome插件-ReRes
简介前端日常开发过程中,本地调试阶段总会有对远程接口的调用需求,通常可能会有以下途径: 本地nginx进行反向代理使用http-proxy 修改host文件后端配合开启跨域但这些方法都会略显繁 ...
js实现一个简单的Chrome刷票插件
国庆想回家~无奈票价高,这几天都在"去哪儿"网关注低价机票.但是靠人工去看实在麻烦,因此我写了一个chrome插件(只支持chrome),可以按照一定频率刷票,当出现期望的机票时可 ...
推荐一个不错的 Chrome 插件，百变皮肤，还可以去广告
今天在这里给大家推荐一个非常棒,非常不错的 Chrome 插件,功能实在是强大又好玩,让你在浏览器中可以如孙悟空一样72变,再不济,如果你不会用,不会自定义写 CSS 样式,也能够做到如猪八戒般 36 ...
mysql制作搜索引擎_MySQL 实现一个简单版搜索引擎，真是绝了！
MySQL 实现一个简单版搜索引擎,真是绝了! 前言只有Innodb和myisam存储引擎能用全文索引(innodb支持全文索引是从mysql5.6开始的) char.varchar.text类型字段 ...

搜索引擎快捷导航：一个简单的chrome插件（教程）