Firefox开发
- 官方文档 First extension
- 目录结构
➜ firefox tree
.
└── borderify
└── manifest.json // 必须
directory, filesmanifest.json
内容{
"manifest_version": , // 必须
"name": "Borderify", // 必须
"version": "1.0", // 必须
"description": "Adds a red border to all webpages matching mozilla.org.",
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"], // 匹配url,<all_urls> 匹配所有
"js": ["content-script.js"] // 本地创建一个 content-script.js用来编写js代码实现插件功能
}
] // 加载matches所匹配的url时,会加载所给定的js脚本
}- 使用
WebExtension APIs
调用某些API需要声明权限,需要在manifest.json里面使用permission关键字请求跨域权限
这样content script才能很好的使用WebExtension APIs
- 使用
后台脚本
- 在
manifest.json
里面添加background关键字 "background": {
"scripts": ["background.js"]
}- ############################
Content Scripts 不能直接使用大部分WebExtension APIs,
但是可以通过信息messaging APIs与扩展后台脚本通信,
这样间接地调用所有的后台脚本能够调用的APIs例子: 监听点击事件,点击后发送地址给后台脚本
- 目录结构
➜ firefox tree
.
└── borderify
├── background.js
├── content-script.js
└── manifest.json
directory, files manifest.json
{
"manifest_version": ,
"name": "Borderify",
"version": "1.0",
"description": "My Firefox Plugin Study",
"icons": {
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.js"]
}
],
"permissions": [
"webRequest",
"notifications", // 如果要使用notification api 就必须要加这个
"<all_urls>" // 允许所有的url
],
"background": {
"scripts": ["background.js"]
}
}- content-script.js
window.addEventListener("click", notifyExtension); // 给每个对象绑定click事件
console.log("content-sciprt.js start");
function notifyExtension(e)
{
console.log(e.target.tagName);
if(e.target.tagName != "A") // 判断tagname是否是link标签(a标签)
{
return ;
}
console.log(e.target.href+"sadsd");
broswer.runtime.sendMessage({"url": e.target.href}); // 发送消息到后台
}
console.log("content-sciprt.js end");background.js
console.log("background.js start"):
browser.runtime.onMessage.addListener(notify); // 设置消息监听
function notify(message)
{
browser.notifications.create({
"type": "basic",
"title": "you click a link",
"message": message.url + 'sdsd'
});
}
console.log("background.js end");browser.notifications.create文档
- 运行测试
进入about:debugging
后添加临时扩展测试
- 运行测试
- 目录结构
Firefox开发的更多相关文章
- Firefox上Web开发工具库一览
Firefox的目标之一就是尽可能地使web开发者的生活更简单高效,并通过提供工具和具有很强扩展性的浏览器使人们创造出神奇的东西.使web开发者使用Firefox的时候,浏览器可以提供大量开发工具和选 ...
- 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总
内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...
- firefox native extension -- har export trigger
这两天想学习下如何在运行自动化脚本时去capture http traffic,google看到一篇博客介绍用browser mob proxy或者firefox+firebug+netexport, ...
- javascript错误处理与调试(转)
JavaScript 在错误处理调试上一直是它的软肋,如果脚本出错,给出的提示经常也让人摸不着头脑. ECMAScript 第 3 版为了解决这个问题引入了 try...catch 和 throw 语 ...
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- Sublime Text 最佳插件列表(转)
Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. Sublime Tex ...
- 推荐!Sublime Text 最佳插件列表
本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...
- 深入浅出ES6(六):解构 Destructuring
作者 Jason Orendorff github主页 https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...
- Sublime Text各种插件使用方法
有快捷键冲突的时候可以修改快捷键,建议修改插件快捷键而不是Sublime Text的快捷键,我的有冲突的一律将插件快捷键设置成:Ctrl+Alt+A(B...) Package Control 通俗易 ...
随机推荐
- PHP面试系列 之Linux(三)---- Vi/Vim编辑器
vi 是 unix 家族下最功能强大的文字编辑器,而 vim 則是 vi 的加强版, 编辑模式 指令 說明 * i 在游標位置進入編輯模式 I 在游標行的第一個非空白字元進入編輯模式 * a ...
- linux下批量重命名文件
# 使用通配符批量创建 多个文件:$ touch zqunor{1..7}.txt # 批量将多个后缀为 .txt 的文本文件重命名为以 .c 为后缀的文件:$ rename 's/\.txt/\.c ...
- flink统计根据账号每30秒 金额的平均值
package com.zetyun.streaming.flink; import org.apache.flink.api.common.functions.MapFunction;import ...
- lwip 2.0.3 DNS 域名解析 使用
1. 在 lwipopts.h 中 #define LWIP_DNS 1 /* 使能 DNS 服务器的功能 ,2018年1月8日21:16:20,suozhang */ #define LWIP_ ...
- iOS之利用腾讯Bugly程序调试,测试代码bug、卡顿等情况
1.自己先写一个 Demo 演示一下利用bugly测试崩溃的具体情况. 在ViewController里面实现崩溃代码如下: 运行后 毫无疑问程序报错了! 2.使用到第三方的框架Bugly,官方下载 ...
- 浅谈spj
SPJ(special judge)是个好玩的东西,毕竟各类神奇的题目SPJ经常作为救火工具(比如说一不小心出成验证类的题目). 但SPJ是个坑,毕竟只让用个“testlib.h”,输入还特别奇怪.今 ...
- [NOI2015]软件包管理器(树链剖分,线段树)
题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...
- linux学习笔记三:防火墙设置
请注意:centOS7和7之前的版本在防火墙设置上不同,只有正确的设置防火墙才能实现window下访问linux中的web应用. centOS6添加端口: vi /ets/sysconfig/ipta ...
- windows 使用npm安装webpack 4.0以及配置问题的解决办法
输入cmd点击打开 输入node -v 出现nodejs版本号 输入npm -v 出现npm版本号则安装npm安装成功, 2.安装webpack 桌面新建一个webpack-test文件夹,点击进入文 ...
- js(jQuery)tips
一:页面加上$(function(){***内容***})与不加的区别 1.这个是DOM加载完之后再加载JS代码,你的JS如果放在文档后面可能一样,但是如果你要是把JS放在head里面就有差别了(放在 ...