index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <title>FeHelper-插件配置</title>
  5. <meta charset="utf-8">
  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" id="pageContainer">
  12. <div class="panel-low-version" v-if="!es6Support">
  13. FeHelper无法在<b>此低版本</b>的浏览器上正常工作!建议<b>升级到最新版</b>后再继续使用哦~~~
  14. </div>
  15. <div v-cloak v-if="es6Support">
  16. <div class="panel panel-default mod-header">
  17. <div class="panel-heading">
  18. <h3 class="panel-title">
  19. <a href="https://www.baidufe.com/fehelper/index/index.html" target="_blank" class="x-a-high">
  20. <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>:插件配置
  21. <span class="ui-fl-r x-cur-version"><b>当前版本</b><i>v{{manifest.version}}</i></span>
  22. </h3>
  23. </div>
  24. </div>
  25. <div class="panel-body mod-content">
  26. <!-- ==============开发者板块============== -->
  27. <div class="row">
  28. <h4># 打赏一下鼓励升级! <span class="x-tips">(很高兴这个插件能帮助到大家,也感谢大家对这个产品的认可,我尽量抽时间保持更新😄)</span></h4>
  29. <div class="row ui-mt-10 btn-donate">
  30. <button class="btn btn-success" @click="donateToggle(1)">码农不易,来杯咖啡☕️ </button>
  31. <button class="btn btn-danger" @click="donateToggle(0)">我先用着,以后再说😄</button>
  32. </div>
  33. <div class="box-donate hide" ref="boxDonate">
  34. <img :src="donate.image" alt="donate" class="x-donate-img">
  35. </div>
  36. </div>
  37. <div class="row ui-mt-20">
  38. <h4># FH快捷键 <span class="x-tips">(设置一些快捷键,用起来会更方便些)</span></h4>
  39. <a href="#" @click="setShortcuts" id="setShortcuts">&gt;&gt; 点击配置FeHelper快捷键(当前快捷键为:{{ defaultKey }})&gt;&gt;</a> <br>
  40. <div class="x-tips">
  41. Tips:按下<b>快捷键</b>,自动打开FeHelper工具!然后用「上/下」方向键选择功能,「回车键」直接打开!
  42. </div>
  43. </div>
  44. <div class="row ui-mt-20">
  45. <h4># FH基本配置 <span class="x-tips">(插件的一些基础配置,可以在这里统一操作)</span></h4>
  46. <div class="box-config">
  47. <div class="st-item">
  48. <input type="checkbox" value="OPT_ITEM_CONTEXTMENUS" id="opt_item_contextMenus" v-model="selectedOpts"/>
  49. <label for="opt_item_contextMenus">将&nbsp;<b><i>FeHelper工具</i></b>&nbsp;添加到右键菜单<span class="x-tips">(如果你喜欢用右键菜单来使用FeHelper的方式,那可以在这里开启)</span></label> <br/>
  50. <div class="box-inner row ui-ml-20" :class="{'x-disabled':!selectedOpts.includes('OPT_ITEM_CONTEXTMENUS')}">
  51. <div class="row-line">
  52. <input type="checkbox" id="MENU_DOWNLOAD_CRX" v-model="menuDownloadCrx" :disabled="!selectedOpts.includes('OPT_ITEM_CONTEXTMENUS')"/>
  53. <label for="MENU_DOWNLOAD_CRX">将&nbsp;<b><i>插件分享/下载</i></b>&nbsp;添加到右键菜单</label>
  54. </div>
  55. <div class="row-line">
  56. <input type="checkbox" id="MENU_FEHELPER_SETTING" v-model="menuFeHelperSeting" :disabled="!selectedOpts.includes('OPT_ITEM_CONTEXTMENUS')"/>
  57. <label for="MENU_FEHELPER_SETTING">将&nbsp;<b><i>FeHelper设置</i></b>&nbsp;添加到右键菜单</label>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="st-item">
  62. <input type="checkbox" value="FORBID_OPEN_IN_NEW_TAB" id="FORBID_OPEN_IN_NEW_TAB" v-model="selectedOpts"/>
  63. <label for="FORBID_OPEN_IN_NEW_TAB">禁止在多个 Tab页/窗口 同时打开<span class="x-tips">(如果同一个工具,您只希望保留一个活动窗口,那可以勾选上)</span></label> <br/>
  64. </div>
  65. <div class="st-item">
  66. <input type="checkbox" value="CONTENT_SCRIPT_ALLOW_ALL_FRAMES" id="CONTENT_SCRIPT_ALLOW_ALL_FRAMES" v-model="selectedOpts"/>
  67. <label for="CONTENT_SCRIPT_ALLOW_ALL_FRAMES">授权FeHelper访问页面所有iframe<span class="x-tips">(默认不对网页内嵌的iframe支持,如果有需要可自行开启)</span></label> <br/>
  68. </div>
  69. <div class="st-item">
  70. <input type="checkbox" value="JSON_PAGE_FORMAT" id="JSON_PAGE_FORMAT" v-model="selectedOpts"/>
  71. <label for="JSON_PAGE_FORMAT">开启JSON自动美化功能(<span class="x-tips">页面<b><i>自动检测并格式化</i></b>,您可在JSON自动美化页面进行工具<b><i>高级定制</i></b>,包括皮肤自定义等)</span></label> <br/>
  72. </div>
  73. <div class="st-item" v-if="!isFirefox">
  74. <input type="checkbox" value="AUTO_DARK_MODE" id="AUTO_DARK_MODE" v-model="selectedOpts"/>
  75. <label for="AUTO_DARK_MODE">自动开启夜间模式(<span class="x-tips">眼睛保卫战,晚上<b><i>19:00~06:00</i></b>使用工具的时候自动开启夜间模式)</span></label>
  76. <a href="#" class="a-btn" @click="turnLight($event)">体验一下夜间模式!</a>
  77. <span class="x-count-down" v-cloak v-if="countDown>0">本次体验将在<b>{{countDown}}秒</b>后自动结束...</span> <br/>
  78. <div class="box-inner row ui-ml-20" :class="{'x-disabled':!selectedOpts.includes('AUTO_DARK_MODE')}">
  79. <div class="row-line">
  80. <input type="checkbox" value="ALWAYS_DARK_MODE" id="ALWAYS_DARK_MODE" v-model="selectedOpts" :disabled="!selectedOpts.includes('AUTO_DARK_MODE')"/>
  81. <label for="ALWAYS_DARK_MODE">始终开启夜间模式(<span class="x-tips">忽略时间限制,随时Dark Mode)</span></label>
  82. </div>
  83. </div>
  84. </div>
  85. <div class="ui-mt-10">
  86. <button class="btn btn-success" @click="save()">保存</button>
  87. <button class="btn btn-danger" @click="cancel()">放弃</button>
  88. </div>
  89. </div>
  90. </div>
  91. <!-- ==============FH插件市场板块============== -->
  92. <div class="row ui-mt-20">
  93. <h4># FH应用市场 <span class="x-tips">(严格遵循Google官方要求的插件<span class="t-hlt">「单一用途原则」</span>,所以就按需安装吧!当然,你也可以<a href="#" @click="openFeOnline()">&nbsp;去官网使用在线免安装版&gt;&gt;</a>)</span></h4>
  94. <ul class="mod-dynamic-tool">
  95. <!-- 先展示已安装的 -->
  96. <li v-for="(tool,index) in Object.keys(fhTools)" v-if="!fhTools[tool]._devTool && tool !== 'devtools' && fhTools[tool].installed">
  97. <i>{{fhTools[tool].menuConfig && fhTools[tool].menuConfig[0] && fhTools[tool].menuConfig[0].icon || '@'}}</i>
  98. <b>{{fhTools[tool].name}}</b>
  99. <span class="x-tips">({{fhTools[tool].tips}})</span>
  100. <span class="ui-fl-r x-btn-box">
  101. <button class="btn btn-danger btn-xs" @click="offLoad(tool,$event)" v-if="!fhTools[tool].systemInstalled">卸载</button>
  102. <button class="btn btn-disabled btn-xs" v-if="fhTools[tool].systemInstalled" title="系统预装,不可被卸载">卸载</button>
  103. <button class="btn btn-xs" :class="fhTools[tool].menu ? 'btn-warning' : 'btn-info'" @click="menuMgr(tool,$event)">{{fhTools[tool].menu ? '移出' : '加入'}}右键</button>
  104. </span>
  105. <span class="ui-fl-r x-sort-box" v-if="fhTools[tool].installed">
  106. <i title="上移" :class="index === 0 ? 'x-hidden' : ''" @click="sortUp(index)">⇧</i>
  107. <i title="下移" :class="index === sortArray.length-1 ? 'x-hidden' : ''" @click="sortDown(index)">⇩</i>
  108. </span>
  109. </li>
  110. <!-- 再展示未安装的 -->
  111. <li v-for="(tool,index) in Object.keys(fhTools)" v-if="!fhTools[tool]._devTool && tool !== 'devtools' && !fhTools[tool].installed">
  112. <i>{{fhTools[tool].menuConfig && fhTools[tool].menuConfig[0] && fhTools[tool].menuConfig[0].icon || '@'}}</i>
  113. <b>{{fhTools[tool].name}}</b>
  114. <span class="x-tips">({{fhTools[tool].tips}})</span>
  115. <span class="ui-fl-r x-btn-box">
  116. <button class="btn btn-success btn-xs" @click="install(tool,$event)">安装<span class="x-progress"></span></button>
  117. </span>
  118. </li>
  119. </ul>
  120. </div>
  121. <!-- ==============开发者板块============== -->
  122. <div class="row ui-mt-10">
  123. <hr>
  124. <h4># FH开发者板块 <span class="x-tips">(FeHelper开放平台化,你可以在安装<span class="t-hlt">「{{fhTools.devtools && fhTools.devtools.name}}」</span>后,开发属于你自己的FH工具!)</span></h4>
  125. <ul class="mod-dynamic-tool">
  126. <li v-for="(tool,index) in Object.keys(fhTools)" v-if="fhTools[tool]._devTool || tool === 'devtools'">
  127. <i>{{fhTools[tool].menuConfig && fhTools[tool].menuConfig[0] && fhTools[tool].menuConfig[0].icon || '@'}}</i>
  128. <b>{{fhTools[tool].name}}</b>
  129. <span class="x-tips">({{fhTools[tool].tips}})</span>
  130. <span class="ui-fl-r x-btn-box">
  131. <template v-if="tool === 'devtools'">
  132. <button class="btn btn-success btn-xs" @click="install(tool,$event)" v-if="!fhTools[tool].installed">安装<span class="x-progress"></span></button>
  133. <button class="btn btn-danger btn-xs" @click="offLoad(tool,$event)" v-if="fhTools[tool].installed">卸载</button>
  134. <button class="btn btn-xs" :class="fhTools[tool].menu ? 'btn-warning' : 'btn-info'" @click="menuMgr(tool,$event)" v-if="fhTools[tool].installed">{{fhTools[tool].menu ? '移出' : '加入'}}右键</button>
  135. </template>
  136. <template v-if="tool !== 'devtools'">
  137. <button class="btn btn-xs" :class="fhTools[tool]._enable ? 'btn-success' : 'btn-default'" style="cursor: default">{{fhTools[tool]._enable ? '启用中' : '已停用'}}</button>
  138. <button class="btn btn-xs" :class="fhTools[tool].menu ? 'btn-warning' : 'btn-info'" @click="menuMgr(tool,$event)" v-if="fhTools[tool]._enable">{{fhTools[tool].menu ? '移出' : '加入'}}右键</button>
  139. </template>
  140. </span>
  141. </li>
  142. </ul>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <script src="../static/js/dark-mode.js"></script>
  148. <script type="module" src="index.js"></script>
  149. </body>
  150. </html>