• 官方文档 First extension
  • 目录结构
  • ➜ firefox tree
    .
    └── borderify
    └── manifest.json // 必须
    directory, files
    • manifest.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脚本
      }

      Content Scripts详解

      •   使用 WebExtension APIs

        调用某些API需要声明权限,需要在manifest.json里面使用permission关键字请求跨域权限 
        这样content script才能很好的使用WebExtension APIs

    • permission API权限

      • 后台脚本

        •    在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开发的更多相关文章

  1. Firefox上Web开发工具库一览

    Firefox的目标之一就是尽可能地使web开发者的生活更简单高效,并通过提供工具和具有很强扩展性的浏览器使人们创造出神奇的东西.使web开发者使用Firefox的时候,浏览器可以提供大量开发工具和选 ...

  2. 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总

    内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...

  3. firefox native extension -- har export trigger

    这两天想学习下如何在运行自动化脚本时去capture http traffic,google看到一篇博客介绍用browser mob proxy或者firefox+firebug+netexport, ...

  4. javascript错误处理与调试(转)

    JavaScript 在错误处理调试上一直是它的软肋,如果脚本出错,给出的提示经常也让人摸不着头脑. ECMAScript 第 3 版为了解决这个问题引入了 try...catch 和 throw 语 ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. Sublime Text 最佳插件列表(转)

    Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. Sublime Tex ...

  7. 推荐!Sublime Text 最佳插件列表

    本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...

  8. 深入浅出ES6(六):解构 Destructuring

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...

  9. Sublime Text各种插件使用方法

    有快捷键冲突的时候可以修改快捷键,建议修改插件快捷键而不是Sublime Text的快捷键,我的有冲突的一律将插件快捷键设置成:Ctrl+Alt+A(B...) Package Control 通俗易 ...

随机推荐

  1. linq项目中例子实例

    在mvc项目中 var ls = (from i in gt.vendor_login                  join j in gt.vendor on i.vendor_id equa ...

  2. linq的左连接右连接内连接用法

    1.左连接: var LeftJoin = from e in ListOfEmployees join d in ListOfDepartment on e.DeptID equals d.ID i ...

  3. 【luogu P3258 [JLOI2014]松鼠的新家】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3258 谁说树剖过不去会RE呢? 我今天就是要强行树剖了 树剖强艹 #include <cstdio&g ...

  4. uboot 移植 要点

    1.第一 首先要  学会 shell 语法   比如 变量的 概念 变量的使用 ,if 语法  ,以及简单 IF 语法(与 或预算),以及  while for 循环 等等语法,才能看得懂 uboot ...

  5. Leetcode名企之路

    微信扫码关注,每天推送一道面试题! 公众号:Leetcode名企之路 作者简介 知乎ID: 码蹄疾 码蹄疾,毕业于哈尔滨工业大学. 小米广告第三代广告引擎的设计者.开发者: 负责小米应用商店.日历.开 ...

  6. SQL中的CONVERT();cast()函数

    SQLSERVER中CONVERT函数格式: CAST (expression AS data_type) 参数说明: expression:任何有效的SQLServer表达式. AS:用于分隔两个参 ...

  7. P1015 回文数解题思路(非原创)

    测试 #include<bits/stdc++.h> using namespace std; int n,m,step; string nn; int len,nex; bool dfs ...

  8. CSS 清楚浮动总结

    1.clear属性. 注:设置子元素(伪元素或DIV等其它元素) 2.触发BFC. 注:根元素HTML float不为none overflow不为visibile display为inline-bl ...

  9. centos7 远程连接mongodb时,27017端口连接不上的解决办法

    一.问题描述:centos 7 上安装mongogdb,然后通过另外一台电脑用pymongo连接mongodb时,报错:连接拒绝 解决过程: 1.修改mongo.conf文件 命令:sudo  vi  ...

  10. laravel5.5源码笔记(一、入口应用的初始化)

    laravel的项目入口文件index.php如下 define('LARAVEL_START', microtime(true)); require __DIR__.'/../vendor/auto ...