关键词：
编写一个chrome插件，你需要准备好一个好看的图片作为扩展程序的图标。准备好图标后，我们就要开始设计插件了。
1、chrome扩展需要的文件
可以这么理解，chrome扩展程序就是一个web应用，所以我们实际是要写html代码。而chrome插件需要的文件就包括配置文件(manifest.json)、扩展图标(icon.png 可以是任意的名字，在配置文件中会使用到)、popup弹出窗口html文件(popup.html)以及其他静态资源文件(如images、css、js等)。如下图，我建立了一个jubar的文件用作chrome扩展文件夹。
2、Browser Actions（扩展图标）
只要chrome启用了某个chrome扩展程序，对应地将该程序的扩展图片显示在地址栏的右侧。
3、popup弹出窗口
接下来，就是编写popup弹出窗口了。
4、编写配置文件manifest.json
"name": "Jubar",
"manifest_version":2,
"version": "4.0.1",
"description": "Gather your friends and family",
"browser_action":
"default_icon": "icon.png" ,
"default_title": "Jubar",
"default_popup": "popup.html"
必须属性：
name、version、manifest_version
1、name 插件名称；
2、version 插件的版本号；
3、manifest_version 指定清单文件格式的版本，在Chrome18之后，应该都是2，所以这个值直接设定为2就OK了；
推荐属性：
description、icons、default_locale
1、description 插件描述，简单介绍插件用途；
2、icons 插件图标，需准备16*16（扩展信息栏）、48*48（扩展管理页面）、128*128（用在安装过程中）的三个图标文件，建议为PNG格式，因为PNG对透明的支持最好；
3、default_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用；
其他属性
browser_action代表扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。我们这里定义的popup页面为popup.html。
6、打包扩展程序
1、打开Chrome –> 更多工具 –> 扩展程序
2、打开“开发者模式”
chrome插件编写之新版helloworld(代码片段)
编写chrome插件之前，需要熟悉一下相应的chrome插件开发环境。从编写helloworld开始，参考阅读官方的教程，是一个不错的选择。这里主要是基于chrome的官方教程，稍稍做了一些修改和扩充，总结成了如下的几个部分。 ... 查看详情
为 flowplayer 编写简单的 flash 插件
】为flowplayer编写简单的flash插件【英文标题】：Writingsimpleflashpluginforflowplayer【发布时间】：2011-02-1705:48:28【问题描述】：我正在尝试为flashplayerflowplayer编写一个简单的插件（可以找到为flowplayer编写插件的文档here）。我是Flash新... 查看详情
开发一个简单的chrome插件-解析本地markdown文件(代码片段)
...境1.软件环境首先，需要使用到的软件和工具环境如下：一个最新的chrome浏览器编辑器vscode2.使用的js库代码高亮库：prismjshttps://prismjs.com/download.htmlmarkdown解析库：marked.min.jshttps://github.com/markedjs/marked搭建工程创建一个md-reader目录... 查看详情
node.js插件编写-通过nan编写简单插件入门(代码片段)
上一篇文章我们介绍了通过Node-Api的方式编写一个插件,并且导出一个函数hello,这篇文章我们介绍另一种插件开发方式NAN,NAN是出现在Node-Api之前的一种插件开发方式,采用的也是C++的封装。读本文内容仍然需要有C/C++开发基础,如没... 查看详情
制作一个简单的百度网盘在线视频加速的chrome插件(代码片段)
原理：在百度云视频的播放页面的控制台中输入以下语句，就可以将视频播放速度改为1.5倍videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(1.5);使用插件将上面js代码注入到页面中就可以实现上面的效果。源码：https:/... 查看详情
简单的轻量级的jq插件的编写
插件开发，我们一般运用面向对象的思维方式例如定义一个对象varHaorooms=function(el,opt){this.$element=el,this.defaults={‘color‘:‘red‘,‘fontSize‘:‘12px‘,‘textDecoration‘:‘none‘},this.options=$.extend({},this.defaults,opt)}//定义haoroo 查看详情
怎么从零编写一个v3版本的chrome浏览器插件实现csdn博客网站的暗黑和明亮主题切换?(代码片段)
整体效果流沙插件主题切换演示：https://live.csdn.net/v/228888源码https://github.com/kaimo313/quicksand实现步骤1、新建manifest.json文件新建一个chrome文件夹，在文件夹里新建manifest.json文件，在文件里输入下面代码，给插件取名... 查看详情
node.js插件编写-通过nan编写简单插件入门(代码片段)
上一篇文章我们介绍了通过Node-Api的方式编写一个插件,并且导出一个函数hello,这篇文章我们介绍另一种插件开发方式NAN,NAN是出现在Node-Api之前的一种插件开发方式,采用的也是C++的封装。读本文内容仍然需要有C/C++开... 查看详情
编写谷歌浏览器插件入门(代码片段)
概述学习目标：如何开发一个简单的浏览器插件。学习前提：HTML、CSS、JavaScript基础官方文档：http://chrome.cenchy.com入门其实跟着官方的说明文档就能很快入门，而且是中文文档。第一步，在电脑本地的任意位置... 查看详情
编写jquery插件
...,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器,因此,成为开发插件的首选. 查看详情
简单chrome插件如何做到月收入5000美金-人物志第15篇
...球人物志系列之第15篇官网：http://www.indiemakerstart.comThomas一个没有技术的人，利用自己擅长的能力，把危机变成了自己的机会，可以说这篇文章里有很多值得我们学习和借鉴的点。那些简单却有用的原则，从自己祖母那发现小市... 查看详情
编写chrome扩展程序
Chrome的扩展程序很多，也很容易入门，可以来简单实现一下看看 官方文档 或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含：一个manifest清单文件html文件js文件其他文件等&nbs... 查看详情
如何编写一个webpack的插件原理及实践(代码片段)
...理解Compiler对象和Compilation对象三：插件中常用的API四：编写插件实战回到顶部一：webpack插件的基本原理webpack构建工具大家应该不陌生了，那么下面我们来简单的了解下什么是webpack的插件。比如我现在写了一个插件叫"kongzhi-plugi... 查看详情
一个简单的吃鸡背包编写——1(代码片段)
好久都没写博客。是时候来更新一篇一直想写的一个demo，前段时间网易出一个荒野行动。听说还是unity做的，所以自己没事做的时候就来写的玩玩。由于是个人开发所以网络端用的是一个PhotonView插件来实现简单的联网同... 查看详情
如何编写jquery插件
...使用或熟悉了不少其插件。如果要将能力上升一个台阶，编写一个属于自己的插件是个不错的选择。本教程可能不是最精品的 查看详情
简单编写一个二维码
参考网址：http://code.ciaoca.com/javascript/qrcode/1、下载qrcode.js插件 2、导入插件： 3、js路径： 4、方法：<script type="text/javascript">//二维码方法functioncode(){ New QRCode(document.getElementByI 查看详情
node.js插件编写-通过node-api编写简单插件入门(代码片段)
在编写Node插件之前我们首先要了解一下node.js插件的编写方式,我们今天采用的是三种方式之一的Node-Api进行编写,采用C++实现,根据下面步骤你也可以编写自己的插件。但是编写插件需要有C/C++基础,如果没有基础那么建议忽略本文... 查看详情
markdown简单使用
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown格式可以在编辑器中使用，有许多网站平台也支持，如简书、github。 常见的Markdown编辑器：*smark(... 查看详情