contentscript-jsonformat.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /**
  2. * content_scripts中如果被检测到当前页面内容为json数据,则自动进行JSON格式化
  3. */
  4. baidu.csJsonFormat = (function(){
  5. "use strict";
  6. var _htmlFragment = [
  7. '<div class="mod-json mod-contentscript"><div class="rst-item">',
  8. '<div id="formatTips">本页JSON数据由FeHelper进行自动格式化,若有任何问题,点击这里提交 ',
  9. '<a href="http://www.baidufe.com/item/889639af23968ee688b9.html#comment" target="_blank">意见反馈</a>',
  10. '&nbsp;&nbsp;或者&nbsp;&nbsp;<a href="#" id="makeAutoJsonFormatOff">禁用此功能</a>',
  11. '</div>',
  12. '<div id="formattingMsg">',
  13. '<svg id="spinner" width="16" height="16" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">',
  14. '<path d="M 150,0 a 150,150 0 0,1 106.066,256.066 l -35.355,-35.355 a -100,-100 0 0,0 -70.711,-170.711 z" fill="#3d7fe6"></path>',
  15. '</svg>加载中...',
  16. '</div>',
  17. '<div id="jfCallbackName_start" class="callback-name"></div>',
  18. '<div id="jfContent"></div>',
  19. '<pre id="jfContent_pre"></pre>',
  20. '<div id="jfCallbackName_end" class="callback-name"></div>',
  21. '</div></div>'
  22. ].join('');
  23. var _loadCss = function(){
  24. var fcpCss = chrome.extension.getURL('static/css/fe-jsonformat.css');
  25. jQuery('<link id="_fehelper_fcp_css_" href="' + fcpCss + '" rel="stylesheet" type="text/css" />').appendTo('head');
  26. };
  27. var _format = function(){
  28. var source ;
  29. if($('body').children().length == 1) {
  30. source = $.trim($('body>pre').html()) ;
  31. }
  32. if(!source) {
  33. source = $.trim($('body').html())
  34. }
  35. if(!source) {
  36. return;
  37. }
  38. // JSONP形式下的callback name
  39. var funcName = null;
  40. // json对象
  41. var jsonObj = null;
  42. // 下面校验给定字符串是否为一个合法的json
  43. try{
  44. jsonObj = new Function("return " + source)();
  45. // 还要防止下面这种情况: "{\"ret\":\"0\", \"msg\":\"ok\"}"
  46. if(typeof jsonObj == "string") {
  47. // 再来一次
  48. jsonObj = new Function("return " + jsonObj)();
  49. }
  50. }catch(ex){
  51. // 如果body的内容还包含HTML标签,肯定不是合法的json了
  52. var nodes = document.body.childNodes;
  53. for(var i = 0,len = nodes.length;i < len;i++) {
  54. if(nodes.nodeType != Node.TEXT_NODE) {
  55. return;
  56. }
  57. }
  58. // 再看看是不是jsonp的格式
  59. var reg=/^([\w\.]+)\(\s*([\s\S]*)\s*\)$/igm;
  60. var matches = reg.exec(source);
  61. if(matches == null) {
  62. return;
  63. }
  64. funcName = matches[1];
  65. source = matches[2];
  66. try{
  67. jsonObj = new Function("return " + source)();
  68. }catch(e){
  69. return;
  70. }
  71. }
  72. // 是json格式,可以进行JSON自动格式化
  73. if(typeof jsonObj == "object") {
  74. try{
  75. // 要尽量保证格式化的东西一定是一个json,所以需要把内容进行JSON.stringify处理
  76. source = JSON.stringify(jsonObj);
  77. }catch(ex){
  78. // 通过JSON反解不出来的,一定有问题
  79. return;
  80. }
  81. $('body').html(_htmlFragment);
  82. _loadCss();
  83. JsonFormatEntrance.clear();
  84. JsonFormatEntrance.format(source);
  85. // 如果是JSONP格式的,需要把方法名也显示出来
  86. if(funcName != null) {
  87. $('#jfCallbackName_start').html(funcName + '(');
  88. $('#jfCallbackName_end').html(')');
  89. }
  90. // 允许禁用
  91. $('#makeAutoJsonFormatOff').click(function(e){
  92. baidu.feOption.setOptions({
  93. "opt_item_autojson" : 'false'
  94. });
  95. alert("以后可以从FeHelper的选项页面中重新开启");
  96. window.location.reload(true);
  97. });
  98. }
  99. };
  100. var _init = function(){
  101. $(function(){
  102. baidu.feOption.getOptions(["opt_item_autojson"],function(opts){
  103. if(opts["opt_item_autojson"] != 'false') {
  104. _format();
  105. }
  106. });
  107. });
  108. };
  109. return {
  110. init : _init
  111. };
  112. })();
  113. baidu.csJsonFormat.init();