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

最新推荐文章于 2024-08-07 14:59:28 发布

彭世瑜

最新推荐文章于 2024-08-07 14:59:28 发布

阅读量8.9k

点赞数 5

分类专栏：其他

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/82885948

版权

其他专栏收录该内容

22 篇文章 2 订阅

订阅专栏

搜索引擎快捷导航

使用方法：下载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="images/baidu.ico" alt="">百度</a>
        <a href="https://www.google.com.hk/"><img src="images/google.ico" alt="">谷歌</a>
        <a href="https://cn.bing.com/"><img src="images/bing.ico" alt="">必应</a>
        <a href="https://www.sogou.com/"><img src="images/sogou.ico" alt="">搜狗</a>
        <a href="https://www.so.com/"><img src="images/so.ico" alt="">360</a>
    </div> 
    <div class="footer">
        <a href="https://www.pengshiyu.com/message.html">问题反馈</a>
    </div>

</div>