Getting Start chrome-extension demo

写一个小小的chrome扩展demo~

准备工作

了解一下插件chrome-extension：

在应用商店里的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件。大体文件结构如下：

manifest.json是整个插件的功能及文件配置清单，非常重要。
static目录是放置整个插件的静态资源文件的，包括css、js、图片等等资源
template目录是放置整个插件的功能页面模板的。
_locales目录是放置整个插件的国际化语言脚本的。

一般来说，清单文件manifest.json文件是必须的，且必须放在插件开发目录的根目录上。其他的目录都可以自定义。对于像我这样的新手来说，我只要准备这几个文件就好：

清单文件（manifest.json）
HTML文件
JS文件
图片文件

上手操作

首先编辑清单文件manifest.json：

{

    "manifest_version": 2, //固定的

    "name": "Hello Md_cow", //插件名称

    "version": "1.0", //插件使用的版本

    "description": "Md_cow tell you today is 520.", //插件的描述

    "browser_action": { //插件加载后生成图标

        "default_icon": "cow.png",//图标的图片

        "default_title": "水牛有话说", //鼠标移到图标显示的文字

        "default_popup": "hello.html" //单击图标执行的文件

}

然后是hello.html

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>

        body {

            width: 150px;                //设置一下窗口宽度，不然会很窄

        }

    </style>

</head>

    <body>

      <h2>原谅宸：</h2>

      <div>

        <p>今天是520！</p>

        <p>怎么没有学妹和我表白？</p>

        <p>不开心！！！</p>

    </div>

    </body>

</html>

cow.png图标:

我们目前用到的文件就是这些（比较简陋），把它们统一放到一个文件夹下：

然后，我们找到chrome浏览器右上角的菜单->更多工具->扩展程序：

记得打开开发者模式：

然后我们点击加载已解压的扩展程序，选择我们的文件夹：

导入成功，我们可以看到图标显示在右上角，点击，出现文本：

成功！

参考资料

Getting Start chrome-extension demo的更多相关文章

Chrome Extension 扩展程序小白入门
Chrome Extension 扩展程序前请说明:本文适用于之前从来没有接触过chrome extension扩展程序的同学~ 编写demo 创建项目文件夹chrome_ext_demo,在项目根 ...
Chrome Extension 检查视图（无效）处理方法
最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...
chrome extension overview
目录什么是扩展............................................................................................ ...
打包Egret游戏为Chrome extension
今天,本来是打算做一个Chrome扩展去爬取网站base64编码图片的. 在跟着图灵社区<Chrome扩展及应用开发>敲demo代码的过程中,发现chrome的扩展的结构理论上可以兼容所有 ...
Google Chrome Native Messaging开发实录（二）Chrome Extension扩展
接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码. ...
一起来做Chrome Extension《搭个架子》
CEF - A simple Chrome Extension development falsework CEF是一个简单的Chrome Extension开发脚手架,它有如下功能: 模块化的结构, ...
chrome extension demos
chrome extension demos demo https://github.com/hartleybrody/buzzkill/blob/master/bootstrap.js https: ...
开发Chrome Extension截取你微博的帐号密码
Google允许开发者对Chrome浏览器做扩展,所以有了之前火爆的12306抢票软件,我也用它抢过票,一直很好奇它怎么注入js到12306上面的.这周有空研究了下Chrome Extension, ...
Chrome Extension 实战
想起个问题,线上项目js要有bug,怎么进行调试修改. ------------- 想起来,方法应该是,拦截线上的js的请求,转到本地代码上进行调试... ------------- 网上看到 Chr ...
解决chrome extension无法下载的问题
由于GFW把谷歌应用商店给屏蔽了,下载chrome扩展变得很困难. 我使用的是版本30.0.1599.101 m. 那么你需要做的第一个处理是,修改host文件,保证chrome应用商店可以登录.如下 ...

随机推荐

如何将水晶报表(Crystal Report)导入葡萄城报表
当从旧的报表平台迁移到葡萄城报表工具时,意味着有大量的报表设计工作要重复去做,如果有一款工具能够在这些工具之间进行自由转换,就能省去报表开发几乎一半的工作量. 葡萄城报表为兼容其他报表控件,提供了简单 ...
Android Monkey的使用
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/71750907 本文出自[赵彦军的博客] 什么是 Monkey Monkey 是一个 ...
70部MAYA灯光材质渲染教程合集
MAYA灯光材质渲染教程合集教程格式:MP4和flv 两种格式使用版本:教程不是一年出的教程,各个版本都有 (教程软件为英文版) 清晰度:可以看清软件上的文字语言:部分中文字幕,其他英文(通过看 ...
在PHP中避免一些代码中的坏味道
做PHP开发已经有快一年的时间了,在这一年的时间中,学习了很多生产环境中的技巧,学习了很多东西,期间也阅读了一些优秀的源码和关于代码的书,对写代码这一块有了一定的思考,也看过很多别人写的好的代码和坏的 ...
Ionic 命令
在WebStorm的设置中设置下面的命令后, 可以通过工具 -->External Tools 中选中来执行指定脚本 C:\Windows\System32\WindowsPowerShell ...
python数据类型之间的转换
1,字符串转整型,前提条件是该字符串为纯数字. a = '1' a = int(a) 2,整型转字符串 a= 1 a = str(a) 3,整型转浮点型 a = 1 a = float(a) 4,浮点 ...
linux 设备驱动加载的先后顺序
Linux驱动先注册总线,总线上可以先挂device,也可以先挂driver,那么究竟怎么控制先后的顺序呢. 1.初始化宏 Linux系统使用两种方式去加载系统中的模块:动态和静态. 静态加载:将所有 ...
SA387Gr91
SA387Gr91 在DTCMS中,我做了一个SA387Gr91的网站,挺好看的.
自己写的开源MVC-easyMVC分享
简介基本风格是按照spring mvc做的,在后期会加入一些新的特性,封装成易于自己项目使用的mvc框架. github地址: https://github.com/tangyanbo/easymv ...
PyQt5--QCheckBox
1 # -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: ''' import sys ...