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後添加臨時擴展測試