黄聪:如何使用Add-on SDK开发一个自己的火狐扩展
火狐开放了扩展的开发权限给程序员们,相信很多人都会希望自己做一些扩展来方便一些使用。
我最近做一些项目也需要开发一个火狐扩展,方便收集自己需要的数据,因此研究了几天怎么开发,现在已经差不多完成了,就顺便腾出时间来做个教程给大家看看吧。
------------------------------ 无可奈何的分割线 ------------------------------
原先我是找了几个网上的教程,没有使用SDK来开发,备受折磨。这个可以看看我之前的文章:
黄聪:二、如何通过URL获取其他网页源代码内容(火狐插件扩展开发教程)
这两个简简单单的扩展,因为没有SDK,导致花了我2天的时间,不过幸运的是,我找到了这个视频:
开发立刻变得无比的愉快,下面我就介绍一下怎么用一个SDK开发一个扩展,功能是改变一个页面的H1标签的字体颜色为红色。
------------------------------ 厚颜无耻的分割线 ------------------------------
1、使用Add-on SDK需要一个开发者帐号,我们登录https://addons.mozilla.org/zh-CN/firefox/users/register,先注册一个开发者帐号。
2、注册好之后,我们以开发者身份登录:https://builder.addons.mozilla.org/user/signin/
3、登录好之后,点击Create -> Add-on。如下图:
4、点击之后,我们就可以开始写我们的扩展啦!!!!先来看看SDK的界面:
5、我们先写主程序的代码,在main.js中输入如下代码:
//导入页面控制类page-mod
var pageMod = require("sdk/page-mod");
var self = require("sdk/self"); //下面是指只要加载了以 http://tieba.baidu.com/p/ 开头的URL,就加载 Data 资源文件夹中的 jquery-1.10.1.min.js 和 test.js 文件
pageMod.PageMod({
include: "http://tieba.baidu.com/p/*",
contentScriptFile: [self.data.url("jquery-1.10.1.min.js"),
self.data.url("test.js")]
});
6、因为我们需要jquery,因此需要导入一下,点击Data旁边的“+”号,然后输入远程jquery的链接http://code.jquery.com/jquery-1.10.1.min.js,然后点击Create Attachment,这样SDK会自动下载远程的jquery到本地并建立连接。如下图:
7、有了jquery,接下来就是我们的核心代码了,我们要用自己的js来控制H1的颜色。我们再次点击Data旁边的“+”号,在第二行输入test.js,然后点击Create Attachment,这样就有了一个test.js文件了,我们的核心代码将在这里写,代码如下:
$(document).ready(function(){
$("h1").attr("style","color:#F00;"); //页面加载完成,将h1的颜色改变为红色
});
8、最后,点击SDK工具栏上面的磁盘符号进行保存。
9、左上角的眼睛符号按钮,SDK就会自动保存并安装,安装完成会在右上角出现复选框:
10、最后看看我们的插件是否能正常使用了呢,我们随便打开一个百度贴吧的帖子吧,接着我们就会惊喜的发现标题在页面加载完成之后变成红色的了!好了,教程到此结束!
PS:火狐有挺健全的文档库了,虽然我觉得还不够,不过一些简单的开发足够了,链接在这里https://addons.mozilla.org/en-US/developers/docs/sdk/latest/
PPS:推荐一下自己的博客http://hcsem.com,虽然干货好像都是放到博客园的
PPPS:码字、码代码、码图很累呀有木有!!!各位看官觉得文章不错狠狠点击推荐按钮吧!!!!!!
黄聪:如何使用Add-on SDK开发一个自己的火狐扩展的更多相关文章
- 如何使用Add-on SDK开发一个自己的火狐扩展
黄聪:如何使用Add-on SDK开发一个自己的火狐扩展 火狐开放了扩展的开发权限给程序员们,相信很多人都会希望自己做一些扩展来方便一些使用. 我最近做一些项目也需要开发一个火狐扩展,方便收集自己需要 ...
- Android | 教你如何用华为HMS MLKit 图像分割 SDK开发一个证件照DIY小程序
Android | 教你如何用华为HMS MLKit 图像分割 SDK开发一个证件照DIY小程序 引子 上期给大家介绍了如何使用如何用华为HMS MLKit SDK 三十分钟在安卓上开发一个微笑抓 ...
- 开发一个小的php扩展
今天试了一下在php添加扩展,看了挺多资料,细节上不一致,其他大体是差不多的. 我们来开发一个叫ccvita_string的函数,他的主要作用是返回一段字符,对应的php代码可能如此: functio ...
- 黄聪:360浏览器、chrome开发扩展插件教程(3)关于本地存储数据
转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html HTML5中的localStorage localStorage与 ...
- 黄聪:360浏览器、chrome开发扩展插件教程(2)为html添加行为
转载:http://www.cnblogs.com/walkingp/archive/2011/04/02/2002668.html 上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的htm ...
- 黄聪:360浏览器、chrome开发扩展插件教程(1)开发Chrome Extenstion其实很简单
转载:http://www.cnblogs.com/walkingp/archive/2011/03/31/2001628.html Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是 ...
- 如何基于App SDK快速地开发一个IoT App?
一.背景及大纲介绍 在如今物联网DCM(Device.Connect.Manage)的大框架下,有一个应用层来分析和处理数据,是必备技能.但是,对于一个公司来说,因为研发能力或者研发时间的原因,可能很 ...
- 快速开发一个PHP扩展
快速开发一个PHP扩展 作者:heiyeluren时间:2008-12-5博客:http://blog.csdn.net/heiyeshuwu 本文通过非常快速的方式讲解了如何制作一个PHP 5.2 ...
- 黄聪:《跟黄聪学WordPress主题开发》
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
随机推荐
- 重温MVC基础入门
重温MVC基础入门 简介 本文主要是作者回顾MVC基础的文章,整合个人认为基础且重点的信息,通过简单实践进行复习. 相关代码地址:https://github.com/OtherRuan/Revi ...
- 6个变态的C语言程序
转载自 陈浩 coolshell.cn 下面的六个程序片段主要完成这些事情: 输出Hello, World 混乱C语言的源代码 下面的所有程序都可以在GCC下编译通过,只有最后一个需要动用C++的编译 ...
- shell脚本中四则运算
方法一: (()) ##在括号里面可以直接对变量进行操作 例如:vim test.sh 方法二: let ##let后面加要操作的运算 例如: 方法三: expr ...
- jQuery 滑动选项卡SmartTab
Smart Tab Overview Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy t ...
- Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...
- objc/runtime.h 相关
Objecitve-C的重要特性是Runtime(运行时),在Interacting with the Runtime(交互运行)中,运行时函数部分,苹果给出了/usr/lib/libobjc.A.d ...
- iPhone开发资源汇总
如何用Facebook graphic api上传视频: http://developers.facebook.com/blog/post/532/ Keychain保存数据封装: https://g ...
- learn go anonymous function
package main // 参考文档: // https://github.com/Unknwon/the-way-to-go_ZH_CN/blob/master/eBook/06.8.md im ...
- vue中axios的深入使用
如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模 ...
- 【剑指offer】第一个只出现一次的字符
原创博文,转载请注明出处!本题牛客网地址 博客文章索引地址 博客文章中代码的github地址 1.题目 2.思路 空间换时间.建立一个哈希表,第一次扫描字符串时,统计每个字符的出现次数.第二次扫描字符 ...