开发Chrome插件很简单,只要会web开发(html+javascript+css)那么这个就是能驾轻就熟,只需要了解一下插件具体的运行环境及要求就OK了.

1.先创建一个html文件,名字随便取,如index.html,内容如下

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        Hello world!

    </body>

</html>

2.在创建一个名为manifest.json文件,这个名字一个字不能错.这个文件是插件的必须文件,可以理解为启动配置文件.内容如下

{

  "manifest_version": 2,

  "name": "Holle world",

  "version": "0.0.1",

  "browser_action": {

    "default_icon":"s.png",

    "default_title":"Holle world",

    "default_popup":"index.html"

  }

}

3.在创建一个图标文件.s.png

4.把这3个文件放到同一个文件夹中.(ChromePlugin)

5.打开Chrome浏览器,选择工具->扩展程序->开发者模式->加载正在开发的扩展程序->选择刚才文件夹(chromeplugin),好了一个简单的Chrome插件就做好了,效果图如下

下面解释一下这个(manifest.json)配置文件,其实里面的东西看名字都一目了然,只是有点要注意一下.

"manifest_version":2 这句是后来的Chrome版本才有的,之前版本的插件没有这个配置,现在如果少了这句会报错.较早的教程里面都没有这句话.

Could not load extension from 'E:\WebSite\GooglePlugin'. The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.

"default_popup"：用来指定点击小图标后弹出的小窗口中默认显示的是哪个html，这个弹出的小窗口就叫做“popup”

"default_title":用于指示当鼠标悬停于图标上的提示文字.

Goolg Chrome 插件开发--Hello world的更多相关文章

  1. chrome插件开发-消息机制中的bug与解决方案

    序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...

  2. Chrome插件开发入门（二）——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  3. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  4. Chrome插件开发，美化网页上的文件列表。chrome-extension，background

    上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...

  5. Chrome插件开发，美化网页上的文件列表。chrome-extension，content-scripts

    趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发 ...

  6. [Chrome插件开发]001.入门

    Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...

  7. chrome插件开发学习（一）

    两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...

  8. [No000080]右键解锁增强Chrome插件开发，破除防复制

    昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/q ...

  9. Chrome插件开发

    参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/370 ...

随机推荐

  1. 编写测试类，了解ArrayList的方法

    这篇文章主要介绍了C#中动态数组用法,实例分析了C#中ArrayList实现动态数组的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了C#中动态数组用法.分享给大家供大家参考.具体分析如下 ...

  2. PF_RING 实验

    前提:pf_ring.ko 运行在模式2    收包实验:        使用两台机器同时对装PF_RING的机器进行发包,此机器的网卡流量达到14M的效果.如下所示:     上图为PF_RING自 ...

  3. 使用shell从DB2数据库导出数据

    使用shell脚本根据输入的用户名,数据库名,密码从DB2数据库导出数据 (1)a.sh脚本如下 #!/usr/bin/bash read -p "please input your DBN ...

  4. 多线程报表生成其中报表以pdf形式保存

    设计思路采用生产者消费者模式,生产者生产报表消费者消费报表生成pdf文件其中报表以html形式存储在线程安全列表中．使用到技术有:多线程协作,线程池,线程安全,html 生成pdf. 一．生产者生成h ...

  5. 教你怎么安装MongoDB

    以下命令以root用户运行:#sudo apt-key adv --keyserver keyserver.ubuntu.com --recv 7F0CEB10#echo 'deb http://do ...

  6. EntityFramwork(2Database First) 源地址https://msdn.microsoft.com/zh-cn/data/jj193542

    必备条件 要完成本演练,需要安装 Visual Studio 2010 或 Visual Studio 2012. 如果使用的是 Visual Studio 2010,还需要安装 NuGet.     ...

  7. FPGA开发心得

    创新源于模仿,另一个意思就是,我们需要站在巨人的肩膀上起航. 至芯科技培训注重于“按图施工”,在没有达到这种境界的时候,我们需要有我们自己的思想 我的思想: always 时钟分频 数据接收 上升沿和 ...

  8. Java实现Internet地址获取

    Java实现Internet地址获取 代码内容 输入域名输出IPV4地址 输入IP地址输出域名 支持命令行输入 支持交互式输入 代码实现 /* nslookup.java */ import java ...

  9. [shell基础]——cut命令

    cut命令常见选项

  10. [无人值守安装操作系统]_FTP+TFTP+DHCP+Kickstart+PXE_中遇到的错误

    本篇记录的是实验  http://www.cnblogs.com/snsdzjlz320/p/5629127.html  过程出现的问题 问题一: PXE-E11:ARP timeout TFTP c ...