1
0

index.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>网页油猴工具-网页超级定制助手</title>
  6. <link rel="stylesheet" href="index.css"/>
  7. <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
  8. <script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
  9. </head>
  10. <body>
  11. <div class="wrapper wp-modifiers" id="pageContainer">
  12. <div class="panel panel-default" style="margin-bottom: 0px;">
  13. <div class="panel-heading">
  14. <h3 class="panel-title">
  15. <a href="https://fehelper.com" target="_blank" class="x-a-high">
  16. <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>:网页油猴工具
  17. <span class="x-toolbox" v-cloak v-show="!editing">
  18. <a href="#" id="loadDemo" @click="loadDemo()" class="x-tooltip blue-tooltip">来个Demo尝尝</a><span class="x-line">|</span>
  19. <a href="#" id="newMonkey" @click="createMonkey()" class="x-tooltip blue-tooltip">创建猴子</a><span class="x-line">|</span>
  20. <a href="#" id="import" @click="importMonkey()" class="x-tooltip blue-tooltip">导入猴子</a><span class="x-line">|</span>
  21. <a href="#" id="disable" @click="disableMonkey()" class="x-tooltip blue-tooltip">全部停用</a><span class="x-line">|</span>
  22. <a href="#" id="remove" @click="removeMonkey()" class="x-tooltip blue-tooltip">全部删除</a>
  23. </span>
  24. <span class="x-toolbox btns-editing" v-cloak v-show="editing">
  25. <input type="button" @click="toggleEditMode()" value="切换编辑模式" class="btn btn-sm btn-primary ui-mr-10">
  26. <input type="button" @click="saveMonkey()" value="保存" class="btn btn-sm btn-success ui-mr-10">
  27. <input type="button" @click="closeEditor()" value="返回" class="btn btn-sm btn-warning">
  28. </span>
  29. <a href="#" class="x-donate-link" @click="openDonateModal($event)"><i class="nav-icon">❤&nbsp;</i>打赏鼓励</a>
  30. <a class="x-other-tools" @click="openOptionsPage($event)"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
  31. </h3>
  32. </div>
  33. </div>
  34. <div class="panel-body" :class="editing?'cur-editing':''">
  35. <div id="monkeyList">
  36. <table class="x-monkeys table table-striped table-responsive table-hover">
  37. <thead>
  38. <tr>
  39. <th class="t-number">序号</th>
  40. <th class="t-description">猴子功能描述</th>
  41. <th class="t-time">最后修改时间</th>
  42. <th class="t-operation">相关操作</th>
  43. </tr>
  44. </thead>
  45. <tbody>
  46. <tr v-for="(cm,$index) in cachedMonkeys" :id="cm.id" :class="{'x-selected': editCM.id === cm.id}">
  47. <td class="t-number">{{$index+1}}</td>
  48. <td><i class="xm-icon" :class="cm.mDisabled === null ? 'xm-create' : (cm.mDisabled ? 'xm-disable' : 'xm-enable')"></i>{{cm.mName || '未命名'}}</td>
  49. <td class="t-time">{{ String(cm.mUpdatedAt) !== 'undefined' && cm.mUpdatedAt || 'a long time ago' }}</td>
  50. <td class="t-operation">
  51. <input type="button" @click="selectMonkey(cm)" value="查看 / 编辑" class="btn btn-sm btn-success">
  52. <input type="button" @click="exportMonkey(cm)" value="导出" class="btn btn-sm btn-primary">
  53. <input type="button" @click="disableMonkey(cm)" :value="cm.mDisabled ? '启用' : '停用'" class="btn btn-sm btn-warning">
  54. <input type="button" @click="removeMonkey(cm)" value="删除" class="btn btn-sm btn-danger">
  55. </td>
  56. </tr>
  57. </tbody>
  58. </table>
  59. </div>
  60. <form id="monkeyEditor" action="#" ref="mForm">
  61. <div class="" v-show="editWithUI">
  62. <label for="mName">网页猴子名称:</label>
  63. <input type="text" id="mName" v-model="editCM.mName" required class="form-control ui-d-ib" placeholder="如:针对百度全系产品注入脚本">
  64. <span class="x-tips">(Tips:建议描述得详细点儿)</span>
  65. </div>
  66. <div class="ui-mt-10" v-show="editWithUI">
  67. <label for="mPattern">网址匹配规则:</label>
  68. <input type="text" id="mPattern" v-model="editCM.mPattern" required class="form-control ui-d-ib" placeholder="如:https://*.baidu.com/*">
  69. <span class="x-tips">(Tips:可写精确网址、或通配符匹配、正则也行...)</span>
  70. </div>
  71. <div class=" ui-mt-10" v-show="editWithUI">
  72. <label for="mRefresh">网页自动刷新:</label>
  73. <select id="mRefresh" v-model="editCM.mRefresh" class="form-control ui-d-ib">
  74. <option value="0">不自动刷新</option>
  75. <option value="1">每 1秒 一次</option>
  76. <option value="3">每 3秒 一次</option>
  77. <option value="5">每 5秒 一次</option>
  78. <option value="10">每 10秒 一次</option>
  79. <option value="15">每 15秒 一次</option>
  80. <option value="30">每 30秒 一次</option>
  81. <option value="60">每 1分(60秒) 一次</option>
  82. <option value="90">每 1分半(90秒) 一次</option>
  83. <option value="120">每 2分(120秒) 一次</option>
  84. <option value="180">每 3分(180秒) 一次</option>
  85. <option value="300">每 5分(300秒) 一次</option>
  86. <option value="600">每 10分(600秒) 一次</option>
  87. </select>
  88. <span class="x-tips">(Tips:默认不刷新,请按需设置)</span>
  89. </div>
  90. <div class="ui-mt-10" v-show="editWithUI">
  91. <label for="mPattern">依赖第三方js:</label>
  92. <input type="text" id="mRequireJs" v-model="editCM.mRequireJs" class="form-control ui-d-ib" placeholder="如:https://code.jquery.com/jquery-3.4.1.min.js">
  93. <span class="x-tips">(Tips:多个脚本可用逗号或空格分隔)</span>
  94. </div>
  95. <div class=" ui-mt-10">
  96. <label for="mScript">猴子注入脚本:</label>
  97. <span class="x-tips">(Tips:可以注入任意JS代码,甚至编写一个智能机器人也是可以的,比如网页定制、自动抢票啥的!)</span>
  98. <textarea id="mScript" ref="mScript" v-model="editCM.mScript" cols="30" rows="10" class="form-control"></textarea>
  99. </div>
  100. </form>
  101. </div>
  102. <div class="clearfix"></div>
  103. </div>
  104. <script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
  105. <script src="../static/vendor/codemirror/codemirror.js"></script>
  106. <script src="../static/vendor/codemirror/javascript.js"></script>
  107. <script src="../static/vendor/codemirror/active-line.js"></script>
  108. <script src="../static/vendor/codemirror/matchbrackets.js"></script>
  109. <script src="../static/vendor/codemirror/placeholder.js"></script>
  110. <script src="monkey-tpl.js"></script>
  111. <script src="index.js"></script>
  112. <script src="content-script.js"></script>
  113. </body>
  114. </html>