前言

上篇文章记录了的使用jpm 简单的开发一个demo 以及调试过程,但是实际开发中要复杂的多,本文以
一个实际的例子来记录如何进阶开发。

需求

为了方便于开发移动web端网页,参考chrome模拟手机浏览器功能,在火狐浏览器中,以相对简便方
式,实现pc端直接访问移动web端,给移动web网页开发调试工作提高便捷。
第一 需要响应点击按钮事件,并且得到当前的动态
第二 需要设置浏览器的use-agent

资料查阅

切换按钮

需要一个能切换的按钮,去官方文档找ui界面的资料
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui
找到一个符合要求的sdk ui/button/toggle
地址为 :https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle
示范代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var { ToggleButton } = require("sdk/ui/button/toggle");
var button = ToggleButton({
id: "Mobile-toggle",
label: "Toggle mobile mode",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleClick
});
function handleClick(state) {
//state.checked 是否选中
console.log(state.label + " checked state: " + state.checked);
}

设置user-agent

比较起ui来说查找相关资料要麻烦点。
有三个途径
第一:找类似的插件,查看源码。
第二:去官方文档搜索 user-agent 等关键词
第三:去Firefox 的高级配置页面 about:config 找到ua 的键值
综合以上三个方案找到设置firefox user-agent
属于 API sdk/preferences/service 键值 general.useragent.override
如图所示

测试代码

1
2
3
4
var prefs = require("sdk/preferences/service");
var key = "general.useragent.override";
prefs.set(key,'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4')
console.log(prefs.get(key));

编写

package.json

使用 jpm init 向导,注意 生成 package.json 里面
还有一些配置没有写进去,比如图标,主页,id 等。
具体参考页面 https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json
代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"title": "device mode toggle",
"name": "devicemodetoggle",
"version": "1.0.0",
"description": "a simple device mode toggle tool",
"main": "index.js",
"author": "yaseng@uauc.net",
"homepage" : "http://www.yaseng.org",
"icon": "resource://@devicemodetoggle/data/icon-48.png",
"engines": {
"firefox": ">=38.0a1",
"fennec": ">=38.0a1"
},
"license": "MIT",
"keywords": [
"jetpack"
]
}

附加组件页面的样式图

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
*@name index.js
*@desc a simple device mode toggle tool
*@author yaseng@uauc.net
**/
var { ToggleButton } = require("sdk/ui/button/toggle");
var prefs = require("sdk/preferences/service");
var key = "general.useragent.override";
var button = ToggleButton({
id: "Mobile-toggle",
label: "Toggle mobile mode",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleClick
});
function handleClick(state) {
var mobile_user_agent='Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4';
if (state.checked){
prefs.set(key,mobile_user_agent);
}else{

prefs.reset(key);
}

}

测试

如图所示 thinksns 的 wap端页面调试

源码下载

github https://github.com/yaseng/pentest/tree/master/project/device_mode_toggle

参考

1:useragent API https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent
2:package.json https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json
3:jpm icon issue https://github.com/mozilla-jetpack/jpm/issues/197
4:ui button toggle https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle