码迷,mamicode.com
首页 > 其他好文 > 详细

Firefox开发

时间:2018-11-03 20:17:43      阅读:401      评论:0      收藏:0      [点我收藏+]

标签:firefox   权限   插件   directory   需要   vip   必须   sage   add-ons   

  • 官方文档 First extension
  • 目录结构
  • ? firefox tree
    .
    └── borderify
        └── manifest.json        // 必须
    1 directory, 4 files
    • manifest.json 内容
    • {
        "manifest_version": 2,    // 必须
        "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
      1 directory, 3 files
      • manifest.json
      • {
         "manifest_version": 2,
         "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   权限   插件   directory   需要   vip   必须   sage   add-ons   

原文地址:https://www.cnblogs.com/klsfct/p/9901718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!