写一个小小的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的更多相关文章

  1. Chrome Extension 扩展程序 小白入门

    Chrome Extension 扩展程序 前请说明:本文适用于之前从来没有接触过chrome extension扩展程序的同学~ 编写demo 创建项目文件夹chrome_ext_demo,在项目根 ...

  2. Chrome Extension 检查视图（无效）处理方法

    最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...

  3. chrome extension overview

    目录 什么是扩展............................................................................................ ...

  4. 打包Egret游戏为Chrome extension

    今天,本来是打算做一个Chrome扩展去爬取网站base64编码图片的. 在跟着图灵社区<Chrome扩展及应用开发>敲demo代码的过程中,发现chrome的扩展的结构理论上可以兼容所有 ...

  5. Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

    接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码. ...

  6. 一起来做Chrome Extension《搭个架子》

    CEF - A simple Chrome Extension development falsework CEF是一个简单的Chrome Extension开发脚手架,它有如下功能: 模块化的结构, ...

  7. chrome extension demos

    chrome extension demos demo https://github.com/hartleybrody/buzzkill/blob/master/bootstrap.js https: ...

  8. 开发Chrome Extension截取你微博的帐号密码

    Google允许开发者对Chrome浏览器做扩展,所以有了之前火爆的12306抢票软件,我 也用它抢过票,一直很好奇它怎么注入js到12306上面的.这周有空研究了下Chrome Extension, ...

  9. Chrome Extension 实战

    想起个问题,线上项目js要有bug,怎么进行调试修改. ------------- 想起来,方法应该是,拦截线上的js的请求,转到本地代码上进行调试... ------------- 网上看到 Chr ...

  10. 解决chrome extension无法下载的问题

    由于GFW把谷歌应用商店给屏蔽了,下载chrome扩展变得很困难. 我使用的是版本30.0.1599.101 m. 那么你需要做的第一个处理是,修改host文件,保证chrome应用商店可以登录.如下 ...

随机推荐

  1. 完美的nginx图片防盗链设置详解

    一般,我们做好防盗链之后其他网站盗链的本站图片就会全部失效无法显示,但是您如果通过浏览器直接输入图片地址,仍然会显示图片,仍然可以右键图片另存为下载文件!依然可以下载?这样就不是彻底的防盗链了! [r ...

  2. 排错-windows平台下访问oracle em出现空白的解决方法

    排错-windows平台下访问oracle em出现空白的解决方法 by:授客 QQ:1033553122 问题描述 IE浏览器本地访问oem,出现空白页面,就左上角有一行字符 http://loca ...

  3. Android应用程序进程启动过程（后篇）

    前言 在前篇中我们讲到了Android应用程序进程启动过程,这一篇我们来讲遗留的知识点:在应用程序进程创建过程中会启动Binder线程池以及在应用程序进程启动后会创建消息循环. 1.Binder线程池 ...

  4. Expo大作战(十三)--expo如何自定义状态了statusBar以及expo中如何处理脱机缓存加载 offline support

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  5. Android 开源库和项目 3

    Android 开源库和项目 Android 开源库和项目 2 1.Matisse Android 图片选择器 -- 知乎开源 github 地址:https://github.com/zhihu/M ...

  6. windows10移动热点打开后手机不能上网

    电脑的win10操作系统自带有移动热点功能,可以共享上网,类似于手机的热点功能.今天在共享时遇到一些问题,现在解决了分享一下. 如果本身电脑无法上网,即wlan上网功能无效,有可能是驱动不兼容,可以在 ...

  7. Huawei华为交换机 consolep密码和vty密码配置telnet,ssh

    以登录用户界面的认证方式为密码认证,密码为Huawei@123为例,配置如下. <HUAWEI> system-view [HUAWEI] user- [HUAWEI-ui-console ...

  8. No module named 'MySQLdb' Python3 + Django 2.0.3 + mysql 无法连接

    问题概览: 学习Django连接mysql数据库的时候遇到了问题 首先安装mysql(Python 3不支持MySQL-python): pip install pymysql 进入编辑 settin ...

  9. 安全之路 —— 利用SVCHost.exe系统服务实现后门自启动

    简介 在Windows系统中有一个系统服务控制器,叫做SVCHost.exe,它可以用来管理系统的多组服务.它与普通的服务控制不同的是它采用dll导出的ServiceMain主函数实现服务运行,详细原 ...

  10. Docker 使用入门，创建一个Nginx服务器

    运行环境: MAC Docker 版本: Docker version 17.12.0-ce, build c97c6d6 一.启动Nginx 服务器 启动Nginx 服务器,并进入模拟终端 dock ...