linux firefox 插件开发教程,火狐(firefox)浏览器插件开发简明教程

手头有一个抓取页面数据的小项目，之前一直使用 Bookmarklet 书签脚本的方式来实现的。最近发现不能用了，因为涉及到要在抓取页面插入远程 JS 脚本，触发了最新浏览器的内容保护策略(Content Security Policy)。无奈之下，只能寻找其他的替代方法，尝试了一下，发现只能用浏览器扩展的方式来实现了。

一个极简的插件

一个最简单的火狐插件只需要两个文件：插件说明文件和脚本文件。

说明文件是插件的入口，内容为 JSON 格式，对插件进行了一些说明和配置。命名必须为 manifest.json。一个简单的示例如下:{

"manifest_version": 2,

"name": "MyFirefoxPlugin",

"version": "1.0",

"content_scripts": [

{

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

"js": ["app.js"]

}

]

}

content_scripts 配置项指明了扩展要加载的 JS 脚本和扩展适配的网址，位置相对于当前目录。脚本内容就是常规的 javascript 代码，比如：document.body.style.border = "5px solid red";

插件界面类型

插件界面常用的有三种。一种是弹窗，比如点工具栏按钮弹出一个弹出窗口，但这个弹出窗口不能失去焦点，否则就会消失，需要重新点击。这不太适用于我的采集功能，因为我有无法识别的数据需要从页面复制的操作流程。所以我采用了第二种：侧边栏。这个侧边栏是跟收藏夹在一起的，因为不会自动关闭，所以在脚本代码中需要添加标签页切换事件的支持。第三种就是独立的插件 tab 页面了，这个适合复杂的大型扩展，暂时没有研究。

插件消息机制

网页是由 HTML + CSS 构建的，插件也是，问题来了：如何获取网页的内容传递给插件脚本，然后在插件界面现实呢？火狐的提供了插件的消息机制。在获取页面内容的脚本中使用 browser.runtime.sendMessage() 方法发起消息。然后在插件界面脚本中用 browser.runtime.onMessage.addListener() 方法来监听捕获消息。以此来实现页面脚本和插件界面脚本的消息通讯。

打包和安装

火狐提供了 web-ext 工具来辅助生成打包文件，但依赖 node，操作使用有点繁琐。在 Linux 系统，可以使用 zip 命令。命令格式如下：zip -r ../my-firefox-plugin.xpi *

以上命令在项目根目录执行就行了，完成后就会在上一级目录生成 my-firefox-plugin.xpi 文件，这个就是生成好的插件文件。但并不能直接使用。如果在火狐浏览器插件管理页面用文件导入的方式安装，得到的会是“文件损坏，无法安装”的消息。网上查到的消息是使用 about:config 打开浏览器高级配置，然后配置 xpinstall.signatures.required 为 false 就能解决。我实际操作后仍然无效。最终的解决方案是到 https://addons.mozilla.org/ 网站注册账号，上传生成的插件文件，通过审核并生成签名后才能正常安装。

插件开发调试

插件开发期间会不断的修改和调整代码。如果每次修改后都要打包才能测试那就太浪费时间了。在火狐中可以使用 about:debuging，然后通过“临时载入组建”的方式来实现快速的代码重载和功能测试。

linux firefox 插件开发教程,火狐(firefox)浏览器插件开发简明教程相关推荐

玩酷的vimperator教程火狐firefox的VIM插件[转]
玩酷的vimperator教程火狐firefox的VIM插件 http://hi.baidu.com/zhumoqing/blog/item/637b1f8b4efc93749e2fb4d6.htm ...
在linux下从firefox导入windows的收藏夹,1、Ubuntu linux下同步windows火狐foxfire 浏览器收藏夹问题...
最近在ubuntu系统中使用自带的firefox浏览器,发现有一些问题,比如登陆后,书签,历史记录等,原本在windows下同步的数据无法同步,添加书签的功能也无法使用. 经过查询资料后得知,unbu ...
python程序设计简明教程知识点总结_Python程序设计简明教程在线阅读
介绍\u201CPython编程简明教程\u201D解释了Python语言的基本知识和基本应用技能与简洁的语言和易于理解的例子.\u201CPython编程简明教程\u201D由9章,主要解释Pyth ...
python程序设计简明教程知识点_《Python 简明教程》读书笔记系列一 —— 基本语法...
基础知识注释注释是 # 符号右侧的任何文本,主要用作程序读者的注释. 在程序中要使用尽可能多的有用注释: 解释假设(或者前提 / 条件) 解释重要的决定解释重要的细节解释你想要解决的问题解 ...
python3简明教程第二版答案_Python3 简明教程
课程简介:简明易懂的 Python3 课程,不仅适用于那些有其它语言基础的同学,对没有编程经验的同学也非常友好.本课程不仅讲解了 Python3 基础知识,还介绍了 PEP8.Virtualenv.测 ...
python3简明教程第二版答案_python入门简明教程?求最新的python简明教程，最好是python3的...
本人对于计算机没有任何基础,只是简单的操作.过两天要学习python语言的基础课,需要如何准备.跪谢! 先看python的简明教程,然后可以再看<dive into python>中文版( ...
java 大学简明教程_Simply-Java 《JAVA大学简明教程：实例程序设计》例子及习题源代码 - 下载 - 搜珍网...
JAVA大学简明教程:实例程序设计/附书源代码/Tutorial01/MovingShapes/BoundedShape.class JAVA大学简明教程:实例程序设计/附书源代码/Tutorial0 ...
java useragent 360 遨游火狐_Chrome与火狐修改浏览器User Agent教程
UA怎么改?当我们使用不同的浏览器访问到网站时,它将会告诉网站该浏览器的有不同的设备与UA类型,详见:User Agent 是什么? 某些网站可能有意或无意间关闭了对于某些浏览器的响应. 由于浏览器总 ...
【教程】javascript浏览器对象入门教程
* 此教程是头一章估计我以后也不想写什么第二章了 * 需要的基础知识:javascript语法和常用对象 * 大神勿喷上次讲完了封包这回我们再说说javascript javascript是一种 ...
linux sh文件case,Shell脚本case语句简明教程
Shell case语句为多选择语句.可以用case语句匹配一个值与一个模式,如果匹配成功,执行相匹配的命令.case语句格式如下: case 值 in 模式1) command1 command2 ...

linux firefox 插件开发教程,火狐(firefox)浏览器插件开发简明教程

linux firefox 插件开发教程,火狐(firefox)浏览器插件开发简明教程相关推荐

最新文章

热门文章