之前寫的一個Firefox擴展fillforms由于使用的舊技術XUL overlay，被火狐停止使用了。話說火狐擴展開發方式變了好幾次了。XUL/XPCOM overlays、bootstrapped extensions 、Add-on SDK，現在推WebExtensions APIs，把之前的都廢棄了，說以后都是WebExtensions APIs，是為了和其他瀏覽器統一，為一個瀏覽器寫擴展，個個瀏覽器都能用。

看到郵箱隔三差五的收到世界各地各種語言的求更新郵件感覺再不更新有點不負責任的意思了，一直計劃把fillforms用新技術重寫下然后提交更新，可遲遲未付諸行動，技術換了一代又一代，最近抽時間看了下WebExtensions APIs，下決心要著手了。

首先官方文檔入口：https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions，比十年前條件好多了，都有中文文檔了，之前都是英文看的頭疼。各種資料到處搜，而且還基本百度不到，實在不會的就到官方論壇用蹩腳英文問老外。

擴展編寫主要分這幾項

一、目錄結構

擴展目錄名/icons/border-48.pngborderify.jsmanifest.json

二、文檔結構

manifest.json參考：

{"manifest_version": 2,"name": "Borderify","version": "1.0","description": "Adds a red border to all webpages matching mozilla.org.","icons": {"48": "icons/border-48.png"},"content_scripts": [{"matches": ["*://*.mozilla.org/*"],"js": ["borderify.js"]}],"applications": {"gecko": {"id": "borderify@example.com"}},"icons": {"48": "icons/border-48.png","96": "icons/border-96.png"}}

js文件內容根據自己需要實現的功能開發，這里才是最重點的內容，在此你可以實現各項功能，改變頁面樣式內容等等。

?

三、按規則編碼開發

改變網頁元素瀏覽器界面等等。具體的我直接復制開發者文檔的目錄好了，對應的內容自己去看，有很多項，需要用到的仔細閱讀那一塊好了。

操作方法

• 攔截 HTTP 請求
• 修改網頁
• 在工具欄添加按鈕
• 制作一個設置頁面
• 與剪貼板交互

用戶界面

• 簡介
• 瀏覽器工具欄按鈕
• 有彈出面板的瀏覽器工具欄按鈕
• 地址欄按鈕
• 有彈出面板的地址欄按鈕
• 上下文菜單項
• 側邊欄
• 選項頁面
• 捆綁網頁（Bundled web pages）
• 通知
• 地址欄建議
• 開發者工具面板

相關概念

• 使用 JavaScript API
• 用戶界面元素
• 內容腳本
• 模式匹配
• 處理文件
• 國際化
• 內容安全政策
• 本地消息
• 用戶體驗的最佳實踐
• ?

參考資料

JavaScript APIs

• JavaScript API概況
• JavaScript API 瀏覽器兼容性表格

• alarms
• bookmarks
• browserAction
• contextMenus
• cookies
• devtools.inspectedWindow
• history
• runtime
• storage
• tabs
• webNavigation
• webRequest
• windows

Manifest 關鍵信息

• manifest.json 概覽
• manifest.json 的瀏覽器兼容性

?

總結

以上是生活随笔為你收集整理的火狐扩展Firefox extension开发流程（学习记录）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。