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后添加临时扩展测试