手頭有一個(gè)抓取頁(yè)面數(shù)據(jù)的小項(xiàng)目，之前一直使用 Bookmarklet 書(shū)簽?zāi)_本的方式來(lái)實(shí)現(xiàn)的。最近發(fā)現(xiàn)不能用了，因?yàn)樯婕暗揭谧ト№?yè)面插入遠(yuǎn)程 JS 腳本，觸發(fā)了最新瀏覽器的內(nèi)容保護(hù)策略(Content Security Policy)。無(wú)奈之下，只能尋找其他的替代方法，嘗試了一下，發(fā)現(xiàn)只能用瀏覽器擴(kuò)展的方式來(lái)實(shí)現(xiàn)了。

一個(gè)極簡(jiǎn)的插件

一個(gè)最簡(jiǎn)單的火狐插件只需要兩個(gè)文件： 插件說(shuō)明文件和腳本文件。

說(shuō)明文件是插件的入口，內(nèi)容為 JSON 格式，對(duì)插件進(jìn)行了一些說(shuō)明和配置。命名必須為 manifest.json。一個(gè)簡(jiǎn)單的示例如下:{

"manifest_version": 2,

"name": "MyFirefoxPlugin",

"version": "1.0",

"content_scripts": [

{

"matches": ["*://*.zzxworld.com/*"],

"js": ["app.js"]

}

]

}

content_scripts 配置項(xiàng)指明了擴(kuò)展要加載的 JS 腳本和擴(kuò)展適配的網(wǎng)址，位置相對(duì)于當(dāng)前目錄。腳本內(nèi)容就是常規(guī)的 javascript 代碼，比如：document.body.style.border = "5px solid red";

插件界面類型

插件界面常用的有三種。一種是彈窗，比如點(diǎn)工具欄按鈕彈出一個(gè)彈出窗口，但這個(gè)彈出窗口不能失去焦點(diǎn)，否則就會(huì)消失，需要重新點(diǎn)擊。這不太適用于我的采集功能，因?yàn)槲矣袩o(wú)法識(shí)別的數(shù)據(jù)需要從頁(yè)面復(fù)制的操作流程。所以我采用了第二種：側(cè)邊欄。這個(gè)側(cè)邊欄是跟收藏夾在一起的，因?yàn)椴粫?huì)自動(dòng)關(guān)閉，所以在腳本代碼中需要添加標(biāo)簽頁(yè)切換事件的支持。第三種就是獨(dú)立的插件 tab 頁(yè)面了，這個(gè)適合復(fù)雜的大型擴(kuò)展，暫時(shí)沒(méi)有研究。

插件消息機(jī)制

網(wǎng)頁(yè)是由 HTML + CSS 構(gòu)建的，插件也是，問(wèn)題來(lái)了：如何獲取網(wǎng)頁(yè)的內(nèi)容傳遞給插件腳本，然后在插件界面現(xiàn)實(shí)呢？火狐的提供了插件的消息機(jī)制。在獲取頁(yè)面內(nèi)容的腳本中使用 browser.runtime.sendMessage() 方法發(fā)起消息。然后在插件界面腳本中用 browser.runtime.onMessage.addListener() 方法來(lái)監(jiān)聽(tīng)捕獲消息。以此來(lái)實(shí)現(xiàn)頁(yè)面腳本和插件界面腳本的消息通訊。

打包和安裝

火狐提供了 web-ext 工具來(lái)輔助生成打包文件，但依賴 node，操作使用有點(diǎn)繁瑣。在 Linux 系統(tǒng)，可以使用 zip 命令。命令格式如下：zip -r ../my-firefox-plugin.xpi *

以上命令在項(xiàng)目根目錄執(zhí)行就行了，完成后就會(huì)在上一級(jí)目錄生成 my-firefox-plugin.xpi 文件，這個(gè)就是生成好的插件文件。但并不能直接使用。如果在火狐瀏覽器插件管理頁(yè)面用文件導(dǎo)入的方式安裝，得到的會(huì)是“文件損壞，無(wú)法安裝”的消息。網(wǎng)上查到的消息是使用 about:config 打開(kāi)瀏覽器高級(jí)配置，然后配置 xpinstall.signatures.required 為 false 就能解決。我實(shí)際操作后仍然無(wú)效。最終的解決方案是到 https://addons.mozilla.org/ 網(wǎng)站注冊(cè)賬號(hào)，上傳生成的插件文件，通過(guò)審核并生成簽名后才能正常安裝。

插件開(kāi)發(fā)調(diào)試

插件開(kāi)發(fā)期間會(huì)不斷的修改和調(diào)整代碼。如果每次修改后都要打包才能測(cè)試那就太浪費(fèi)時(shí)間了。在火狐中可以使用 about:debuging，然后通過(guò)“臨時(shí)載入組建”的方式來(lái)實(shí)現(xiàn)快速的代碼重載和功能測(cè)試。

總結(jié)

以上是生活随笔為你收集整理的linux firefox 插件开发教程,火狐(firefox)浏览器插件开发简明教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。