第一步：初始化项目

每个应用（扩展）都应该包含下面的文件：

  • 一个manifest文件
  • 一个或多个html文件（除非这个应用是一个皮肤）
  • 可选的一个或多个javascript文件
  • 可选的任何需要的其他文件，例如图片

在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是.crx的压缩文件中。本项目使用Chrome Developer Dashboard,上传应用（扩展），可以自动生成.crx文件。

第二部：编写配置文件 

manifest.json   清单文件必须的字段只有：name和version。

{  
	"name":"searchTool",
	"manifest_verson":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跳转页面

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<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>

 

 参考：http://open.chrome.360.cn/extension_dev/manifest.html

图片大小修改网站：http://www.gaitubao.com/