Firefox开发

• 官方文档 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后添加临时扩展测试 
              

转载于:https://www.cnblogs.com/klsfct/p/9901718.html