Greasy Fork镜像 支持简体中文。

Stylish Lite

Install and Manage user styles,Just like Stylish.Of course, Edit included.

  1. // ==UserScript==
  2. // @name Stylish Lite
  3. // @name:zh-CN Stylish 轻捷
  4. // @namespace https://gf.qytechs.cn/zh-CN/users/104201
  5. // @icon data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAFVBMVEUAAAA0mNsuzHHnTDw0mNvznBL////Mp1gEAAAAAnRSTlMAQABPjKgAAAABYktHRAZhZrh9AAAAB3RJTUUH4QwXBjotfQkeHgAAAElJREFUWMPtyzERgEAQBLBjwAAOGCy8BQTQ4N8KBvYovyHpU2d2VK0jK0VRFEWZW1pKU5Y9+yjblSmK8tPSU3J5sltRFEVR5pYXL1PRF3j4eAwAAAAASUVORK5CYII=
  6. // @version 0.4
  7. // @description Install and Manage user styles,Just like Stylish.Of course, Edit included.
  8. // @description:zh-CN 像Stylish一样:安装和管理用户样式,当然,也包括编辑
  9. // @author 黄盐(Foowon)
  10. // @include *
  11. // @noframes
  12. // @require https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js
  13. // @grant unsafeWindow
  14. // @run-at document-start
  15. // @grant GM_addStyle
  16. // @grant GM_setValue
  17. // @grant GM_getValue
  18. // @grant GM_openInTab
  19. // @grant GM_registerMenuCommand
  20. // @grant GM_unregisterMenuCommand
  21. // @grant GM_xmlhttpRequest
  22. // ==/UserScript==
  23. /* jshint esversion: 6 */
  24. ;
  25. 'use strict';
  26. //========如果你一定要用 Greasymonkey 可以把 28 行注释打开,然后把 第 29 行注释掉.
  27. //然后 把脚本所有的 GM_getValue 替换为 await GM.getValue, 所有的 GM_setValue 替换为 await.setValue 或许可用...
  28. //推荐 安装Tampermonkey 使用脚本.
  29. // (async () => {
  30. (function () {
  31.  
  32. //===============PART ① Add Styles To Tabs======================================//
  33. const applyCssId = 'stylishLite';const SLSpliter = '\n<<<===SL===>>>\n';
  34. const ruleReg = /(url|url-prefix|domain|regexp)\(['"]?.*\)/;
  35. const blockBeginReg = /@\s*(-moz-document|media|keyframes).[^{]+/g;
  36. const blockEndReg = /\}[^{]*\}/g;
  37. const commentReg = /(?<!:)\/\/.*|\/\*(\s|.)*?\*\//g;
  38. // parser: use to process rawText form userstyles.org/styles/*
  39. // use to save styles in manage panel
  40. let parser={
  41. css:'',
  42. partEndReg: /\}[^{]*\}/,
  43. partBeginReg: /@-moz-document.+\n\{\n/,
  44. ruleBeginReg: /@-moz-document /,
  45. ruleLineReg: /@-moz-document.+/,
  46. matchReg: /(url-prefix|regexp|domain)\((\S)+\)/g,
  47. ruleReg: /(url|url-prefix|regexp|domain)\((\S)+\)/g,
  48. ruleTextPreReg: /^(url|url-prefix|regexp|domain)\(('|")?/,
  49. ruleTextEndReg: /('|")?\)$/,
  50. //convert userstyles.org mozilla document format to SL format(my script format)
  51. moz2SL: function(mozString){
  52. let string = mozString,
  53. begins = parser.getIndexs(string,blockBeginReg),
  54. ends = parser.getIndexs(string,blockEndReg);
  55. if(!begins.indexs.length) return [string];
  56.  
  57. let bidxs = begins.indexs,
  58. bmches = begins.matches,
  59. eidxs = ends.indexs,
  60. emches = ends.matches;
  61. if(bidxs.length !== eidxs.length){
  62. //这里只是修补了 [一重嵌套] 问题,更多层的嵌套情况就可能会出错
  63. if(bidxs.length - eidxs.length > 1) {
  64. console.info('[Stylish Lite Error]:Parse Mozilla Format Document Error');
  65. return [string];
  66. }
  67. for(let i in emches){
  68. if(emches[i].match(/\}/g).length>2){
  69. let p1 = emches[i].indexOf('}',1);
  70. let n1 = emches[i].slice(0,p1+1);
  71. emches.splice(i,1,n1,emches[i].slice(p1));
  72. eidxs.splice(i,1,eidxs[i],eidxs[i]+n1.length);
  73. }
  74. }
  75. }
  76. let tmp = [];
  77. for(let i in eidxs){
  78. tmp[i] = eidxs[i] + ends.matches[i].length;
  79. }
  80. eidxs = tmp;
  81. let blocks = [];
  82. blocks.push(string.slice(0,bidxs[0]).trim());
  83. let start = bidxs[0],
  84. end = eidxs[0];
  85. for(let i in bmches){
  86. if(bidxs[parseInt(i)+1]){
  87. if(bmches[parseInt(i)+1].match(ruleReg)){
  88. blocks.push(string.slice(start, end).trim());
  89. blocks.push(string.slice(end,bidxs[parseInt(i)+1]).trim());
  90. start = bidxs[parseInt(i)+1];
  91. end = eidxs[parseInt(i)+1];
  92. }else{
  93. end = eidxs[parseInt(i)+1];
  94. }
  95. }else{
  96. if(bmches[i].match(ruleReg)){
  97. blocks.push(string.slice(start, end).trim());
  98. blocks.push(string.slice(end).trim());
  99. }else{
  100. blocks.push(string.slice(start).trim());
  101. }
  102. }
  103. }
  104. // delete blank block
  105. tmp = [];
  106. for(let i in blocks){
  107. if(/\S/.test(blocks[i])) tmp.push(blocks[i]);
  108. }
  109. return tmp.join(SLSpliter);
  110. },
  111. //delete repeat value
  112. unique: function(arr){
  113. let a = {},
  114. b = [];
  115. for(let i in arr){
  116. if(!a[arr[i]]) {
  117. a[arr[i]] = true;
  118. b.push(arr[i]);
  119. }
  120. }
  121. return b;
  122. },
  123. //concat all matched css
  124. concat: function(cssArr){
  125. this.css = '';
  126. for(let i = 0; i < cssArr.length; i++){
  127. this.css += getCss(cssArr[i]);
  128. }
  129. return this.css;
  130. },
  131. //SLString from moz2SL or form GM_getValue
  132. split: function(SLString){
  133. return SLString.split(SLSpliter);
  134. },
  135. getIndexs: function(raw, searchRegexp/*global regexp*/){
  136. if(!raw || !/\S/.test(raw)) return{indexs:[],matches:[]}; //blank string
  137. let matches = raw.match(searchRegexp);
  138. if(!matches) return {indexs:[],matches:[]}; //string widthout rule
  139. let idx, indexs =[], lastIndex = 0;
  140. for(let i in matches){
  141. idx = raw.indexOf(matches[i],lastIndex);
  142. indexs.push(idx);
  143. lastIndex = idx+matches[i].length;
  144. }
  145. return {
  146. indexs:indexs,
  147. matches: matches
  148. };
  149. },
  150. // str: striing block form split(rawStr)
  151. // @-moz-document rule(....) \n xxxxx....
  152. getCss: function(str, edit){
  153. let string = $.trim(str),
  154. //eat comments
  155. ruleLine = string.match(/@-moz-document.[^{}]+/);
  156. if(ruleLine === null) return string;
  157. let css='',
  158. rules = ruleLine[0].replace(commentReg, '').match(/(url|url-prefix|regexp|domain)\((\S)+\)/g);
  159. if(edit || parser.checkMatch(rules)) css = string.slice(ruleLine[0].length +2, -2).replace(/\n /g,'\n');
  160. return $.trim(css);
  161. },
  162. getRule: function(ruleStr){
  163. return ruleStr.slice(0, ruleStr.indexOf('('));
  164. },
  165. getRuleText:function(ruleStr){
  166. return ruleStr.replace(parser.ruleTextPreReg,'').replace(parser.ruleTextEndReg,'');
  167. },
  168. checkMatch: function(rulesArr){
  169. if(rulesArr === null || rulesArr.length === 0) return true;
  170. let rule = '',
  171. ruleText = '',
  172. isMatch = false;
  173. LbMatch:{
  174. for(let i in rulesArr){
  175. rule = parser.getRule(rulesArr[i]);
  176. ruleText = parser.getRuleText(rulesArr[i]);
  177. switch (rule) {
  178. case 'url':
  179. if(document.location.href == ruleText){
  180. isMatch = true;
  181. break LbMatch;
  182. }
  183. break;
  184. case 'url-prefix':
  185. if(document.location.href.indexOf(ruleText) == 0){
  186. isMatch = true;
  187. break LbMatch;
  188. }
  189. break;
  190. case 'domain':
  191. if(document.domain == ruleText || document.domain.substring(document.domain.indexOf(ruleText) + 1) == ruleText){
  192. isMatch = true;
  193. break LbMatch;
  194. }
  195. break;
  196. default://regexp
  197. try {
  198. if(new RegExp(ruleText).test(document.location.href)){
  199. isMatch = true;
  200. break LbMatch;
  201. }
  202. } catch(e) {
  203. console.log(e);
  204. }
  205. break;
  206. }
  207. }
  208. }
  209. return isMatch;
  210. }
  211. };
  212. function apply(){
  213. let tmp,doc,
  214. cssText = '',
  215. matchedStyles = [],
  216. styles = GM_getValue('styles', {}),
  217. css = GM_getValue('css', {});
  218. for(let i in styles){
  219. if(!styles[i].enable) continue;
  220. if(parser.checkMatch(styles[i].rule)){
  221. cssText += `\n/*-------------${i}----------------*/\n`;
  222. tmp = parser.split(css[i]);
  223. for(let j in tmp){
  224. cssText += parser.getCss(tmp[j]);
  225. }
  226. }
  227. }
  228. addStyle(cssText, applyCssId);
  229. }
  230. // this addStyle function is better than GM_addStyle
  231. function addStyle(cssStr,id='styishLite'){
  232. try {
  233. let doc = document.body || document.documentElement;
  234. $(doc).after($(`<style id="${id}" type="text/css"><!--\n${cssStr}\n--></style>`));
  235. } catch(e) {
  236. // let head = document.documentElement || document.head;
  237. let head = document.head || document.documentElement;
  238. $(head).after($(`<style id="${id}" type="text/css"><!--\n${cssStr}\n--></style>`));
  239. }
  240. }
  241. function checkList(key){
  242. let isApply = true,
  243. list = GM_getValue('nameList',{}),
  244. // default name list mode: black
  245. nameListMode = GM_getValue('nameListMode','black');
  246. if(list[key]){
  247. if(nameListMode === 'black') isApply = false;
  248. }else{
  249. if(nameListMode === 'white') isApply = false;
  250. }
  251. return isApply;
  252. }
  253. //(onlist && white list) || (not on list && black list)=> apply()
  254. if(checkList(location.origin)) apply();
  255.  
  256. //===============PART ② Action on userstyles.org/styles/**id**/**name** ========//
  257. const LogoSVG = `<svg width="60px" height="60px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><style>/* <![CDATA[ */text {fill:#fff;font-family:Consolas,monospace;font-weight:bold;}/* ]]> */</style><g><rect fill="#2ecc71" width="47" height="70" y="0" x="0"></rect><rect fill="#3498db" x="53" y="30" width="47" height="70"></rect><rect fill="#e74c3c" x="53" y="0" width="47" height="25"></rect><rect fill="#f39c12" x="0" y="75" width="47" height="25"></rect><text transform="scale(5),translate(1,12)">S</text><text transform="scale(5),translate(10,18)">L</text></g></svg>`;
  258.  
  259. //works on https://userstyles.org/styles/*
  260. let utorg = {
  261. locationReg: /https:\/\/userstyles.org\/styles\/\d+\/.*/,
  262. css: '',
  263. siteMatched: function(){
  264. return this.locationReg.test(location.href);
  265. },
  266. createButton: function(){
  267. if( !$ && ($('div#install_style_button').length<1 || $('div#buttons').length < 1)) {
  268. setTimeout(utorg.createButton, 500);
  269. return;
  270. }else{
  271. let tar = $('div#buttons'),
  272. styles = GM_getValue('styles',{}),
  273. name = $('h1[id=stylish-description]').text(),
  274. version = $('div#infomation_value_left').last().text(),
  275. buttonClass = '',
  276. buttonText = '';
  277. if(styles[name]){
  278. if(styles[name].version === version){
  279. buttonClass = 'slCheck';
  280. buttonText = 'Installed';
  281. }else{
  282. buttonClass = 'slRefresh';
  283. buttonText = 'Update Style';
  284. }
  285. }else{
  286. buttonClass = 'slDownload';
  287. buttonText = 'Install Style';
  288. }
  289.  
  290. if(tar.length ===0){
  291. setTimeout(utorg.createButton, 500);
  292. return;
  293. }
  294. let serverInstallButtonHTML = `<div id="%%BUTTONID%%" style="height:48px;background-color:#2ECC71;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:4px;border: solid 1px #cdcfd1;box-shadow:0 6px 16px 0 rgba(80, 178, 243, 0.35);color:white;font-size:16px;cursor:pointer;font-weight:bold;width:173px;margin-left:9px;" title="%%BUTTONTITLE%%"><div name="SLBtnIcon" class="%%BUTTONCLASS%%" style="font:30px;margin-right:10px;"></div><div>%%BUTTONTEXT%%</div></div>`;
  295. let pageInstallButtonHTML = serverInstallButtonHTML.replace('style="height:48px;background-color:#2ECC71;','style="height:43px;background-color:#3498DB;margin-top:30px;');
  296. let a = $('div#buttons').children().first().before(serverInstallButtonHTML.replace('%%BUTTONID%%','SLInstallFromServer').replace('%%BUTTONCLASS%%',buttonClass).replace('%%BUTTONTEXT%%',buttonText).replace('%%BUTTONTITLE%%','Install From Server'));
  297. let b = $('.css_button').after(pageInstallButtonHTML.replace('%%BUTTONID%%','SLInstallFromPage').replace('%%BUTTONCLASS%%',buttonClass).replace('%%BUTTONTEXT%%',buttonText).replace('%%BUTTONTITLE%%','Install From This Page'));
  298.  
  299. $('#SLInstallFromServer,#SLInstallFromPage').off();
  300. $('#SLInstallFromServer').on('click', utorg.installFromServer);
  301. $('#SLInstallFromPage').on('click', utorg.installFromPage);
  302. // $('#SLInstall').on('click', utorg.install);
  303. }
  304. },
  305. // get raw text from userstyles.org
  306. installFromServer: function(){
  307. let url = 'https://userstyles.org/styles/'+(location.href.match(/\/\d{2,}\//)[0].slice(1,-1))+'.css';
  308. GM_xmlhttpRequest({
  309. method:'GET',
  310. url: url,
  311. timeout: 20000,
  312. onload: (response)=>{
  313. utorg.css = response.responseText;
  314. utorg.install();
  315. },
  316. onerror: ()=>{
  317. utorg.installFail('Error');
  318. },ontimeout: ()=>{
  319. utorg.installFail('timeout');
  320. }
  321. });
  322. },
  323. installFromPage: function(){
  324. utorg.css = $('#stylish-code').text();
  325. utorg.install();
  326. },
  327. install: function(){
  328. let rawCss = utorg.css;
  329. if(!rawCss){
  330. setTimeout(utorg.install, 500);
  331. return;
  332. }
  333. let ruleLines = rawCss.match(parser.ruleLineReg),
  334. name = $('h1[id=stylish-description]').text(),
  335. styles = GM_getValue('styles', {}),
  336. css = GM_getValue('css', {});
  337. if(name.length < 1) return false;
  338. css[name] = $.trim(parser.moz2SL(rawCss));
  339. GM_setValue('css',css);
  340. stylesObj = {
  341. name: name,
  342. rule: parser.unique(ruleLines.join('\n').match(parser.ruleReg)),
  343. enable: true,
  344. version: $('div#infomation_value_left').last().text(),
  345. stylesOrgId: location.href.split('/')[4]
  346. };
  347. styles[name] = stylesObj;
  348. GM_setValue('styles',styles);
  349. $('div[name=SLBtnIcon]').attr('class','slCheck');
  350. $('div[name=SLBtnIcon]').next().text('Installed');
  351. },
  352. installFail: function(msg){
  353. let ptl = 'Install Style Failed, Please Try Again Later!!!';
  354. switch (msg) {
  355. case 'timeout':
  356. alert('TimeOut,' + plt);
  357. break;
  358. default:
  359. alert('Something Error,' + plt);
  360. break;
  361. }
  362. }
  363. };
  364. //https://userstyles.org/styles
  365. $(()=>{
  366. if(utorg.siteMatched()){
  367. addStyle(SLFontCSS,'SLFontCSS');
  368. utorg.createButton();
  369. }
  370. });
  371.  
  372. //===============PART ③ Manage Styles ==========================================//
  373. const SLFontCSS = `
  374. /* =================== SLClass ==================== */
  375. @font-face {font-family: 'SL';src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff');}
  376. .slSpace::before {content:' ';font-family:SL;display:inline-block;width:30px;}
  377. .slAdd::before {content:'A';font-family:SL;}
  378. .slMinus::before {content:'B';font-family:SL;}
  379. .slCheck::before {content:'C';font-family:SL;}
  380. .slClose::before {content:'D';font-family:SL;}
  381. .slCopy::before {content:'E';font-family:SL;}
  382. .slDeleteNormal::before{content:'F';font-family:SL;}
  383. .slEdit::before {content:'G';font-family:SL;}
  384. .slSave::before {content:'H';font-family:SL;}
  385. .slOn::before {content:'I';font-family:SL;color:#2ACD71;}
  386. .slOff::before {content:'J';font-family:SL;color:#E84A39;}
  387. .slCube::before {content:'K';font-family:SL;}
  388. .slCubes::before {content:'M';font-family:SL;}
  389. .slDownload::before {content:'N';font-family:SL;}
  390. .slRefresh::before {content:'O';font-family:SL;}
  391. .slLink::before {content:'P';font-family:SL;}
  392. .slList::before {content:'Q';font-family:SL;}
  393. .slReturn::before {content:'R';font-family:SL;}
  394. .slTag::before {content:'T';font-family:SL;padding-right:10px;}
  395. .slMagic::before {content:'U';font-family:SL;}
  396. .slCode::before {content:'V';font-family:SL;}
  397. .slForward::before {content:'W';font-family:SL;}
  398. .slApp::before {content:'X';font-family:SL;}
  399. .slVerDots::before {content:'Y';font-family:SL;}
  400. .slDeleteBold::before {content:'Z';font-family:SL;}
  401. .slVisible::before {content:'a';font-family:SL;}
  402. .slHidden::before {content:'b';font-family:SL;}
  403. .slMidThinger::before {content:'c';font-family:SL;}
  404. /* ===================SLClass End==================== */
  405. `;
  406.  
  407. //======== prism === css_beautfy =========
  408. /* PrismJS 1.9.0 http://prismjs.com/download.html?themes=prism-solarizedlight&languages=css */
  409. var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e){var t=n.util.type(e);switch(t){case"Object":var r={};for(var a in e)e.hasOwnProperty(a)&&(r[a]=n.util.clone(e[a]));return r;case"Array":return e.map(function(e){return n.util.clone(e)})}return e}},languages:{extend:function(e,t){var r=n.util.clone(n.languages[e]);for(var a in t)r[a]=t[a];return r},insertBefore:function(e,t,r,a){a=a||n.languages;var l=a[e];if(2==arguments.length){r=arguments[1];for(var i in r)r.hasOwnProperty(i)&&(l[i]=r[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==t)for(var i in r)r.hasOwnProperty(i)&&(o[i]=r[i]);o[s]=l[s]}return n.languages.DFS(n.languages,function(t,n){n===a[e]&&t!=e&&(this[t]=o)}),a[e]=o},DFS:function(e,t,r,a){a=a||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],r||l),"Object"!==n.util.type(e[l])||a[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||a[n.util.objId(e[l])]||(a[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,a)):(a[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,a)))}},plugins:{},highlightAll:function(e,t){n.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,r){var a={callback:r,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var l,i=a.elements||e.querySelectorAll(a.selector),o=0;l=i[o++];)n.highlightElement(l,t===!0,a.callback)},highlightElement:function(t,r,a){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1].toLowerCase(),i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,t.parentNode&&(o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l));var s=t.textContent,g={element:t,language:l,grammar:i,code:s};if(n.hooks.run("before-sanity-check",g),!g.code||!g.grammar)return g.code&&(n.hooks.run("before-highlight",g),g.element.textContent=g.code,n.hooks.run("after-highlight",g)),n.hooks.run("complete",g),void 0;if(n.hooks.run("before-highlight",g),r&&_self.Worker){var u=new Worker(n.filename);u.onmessage=function(e){g.highlightedCode=e.data,n.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,a&&a.call(g.element),n.hooks.run("after-highlight",g),n.hooks.run("complete",g)},u.postMessage(JSON.stringify({language:g.language,code:g.code,immediateClose:!0}))}else g.highlightedCode=n.highlight(g.code,g.grammar,g.language),n.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,a&&a.call(t),n.hooks.run("after-highlight",g),n.hooks.run("complete",g)},highlight:function(e,t,a){var l=n.tokenize(e,t);return r.stringify(n.util.encode(l),a)},matchGrammar:function(e,t,r,a,l,i,o){var s=n.Token;for(var g in r)if(r.hasOwnProperty(g)&&r[g]){if(g==o)return;var u=r[g];u="Array"===n.util.type(u)?u:[u];for(var c=0;c<u.length;++c){var h=u[c],f=h.inside,d=!!h.lookbehind,m=!!h.greedy,p=0,y=h.alias;if(m&&!h.pattern.global){var v=h.pattern.toString().match(/[imuy]*$/)[0];h.pattern=RegExp(h.pattern.source,v+"g")}h=h.pattern||h;for(var b=a,k=l;b<t.length;k+=t[b].length,++b){var w=t[b];if(t.length>e.length)return;if(!(w instanceof s)){h.lastIndex=0;var _=h.exec(w),P=1;if(!_&&m&&b!=t.length-1){if(h.lastIndex=k,_=h.exec(e),!_)break;for(var A=_.index+(d?_[1].length:0),j=_.index+_[0].length,x=b,O=k,N=t.length;N>x&&(j>O||!t[x].type&&!t[x-1].greedy);++x)O+=t[x].length,A>=O&&(++b,k=O);if(t[b]instanceof s||t[x-1].greedy)continue;P=x-b,w=e.slice(k,O),_.index-=k}if(_){d&&(p=_[1].length);var A=_.index+p,_=_[0].slice(p),j=A+_.length,S=w.slice(0,A),C=w.slice(j),M=[b,P];S&&(++b,k+=S.length,M.push(S));var E=new s(g,f?n.tokenize(_,f):_,y,_,m);if(M.push(E),C&&M.push(C),Array.prototype.splice.apply(t,M),1!=P&&n.matchGrammar(e,t,r,b,k,!0,g),i)break}else if(i)break}}}}},tokenize:function(e,t){var r=[e],a=t.rest;if(a){for(var l in a)t[l]=a[l];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var r=n.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=n.hooks.all[e];if(r&&r.length)for(var a,l=0;a=r[l++];)a(t)}}},r=n.Token=function(e,t,n,r,a){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length,this.greedy=!!a};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return r.stringify(n,t,e)}).join("");var l={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(n.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),r=t.language,a=t.code,l=t.immediateClose;_self.postMessage(n.highlight(a,n.languages[r],r)),l&&_self.close()},!1),_self.Prism):_self.Prism;var a=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return a&&(n.filename=a.src,n.manual||a.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
  410. Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\s\S]*?>)[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
  411. //======== css_beautfy min.js=======
  412. (function(){function a(R,v){function S(U,T){return U===undefined?T:U}v=v||{};var M=v.indent_size||4;var r=v.indent_char||" ";var K=S(v.selector_separator_newline,true);var H=S(v.end_with_newline,false);var F=S(v.newline_between_rules,true);var k=S(v.newline_between_properties,true);var L=S(v.newline_before_open_brace,false);var B=S(v.newline_after_open_brace,true);var s=S(v.newline_before_close_brace,true);if(typeof M==="string"){M=parseInt(M,10)}var q=/^\s+$/;var u=/[\w$\-_]/;var A=-1,z;var t=0;function e(){z=R.charAt(++A);return z||""}function i(T){var U=A;if(T){C()}result=R.charAt(A+1)||"";A=U-1;e();return result}function D(U){var T=A;while(e()){if(z==="\\"){e()}else{if(U.indexOf(z)!==-1){break}else{if(z==="\n"){break}}}}return R.substring(T,A+1)}function j(V){var U=A;var T=D(V);A=U-1;e();return T}function C(){var T="";while(q.test(i())){e();T+=z}return T}function n(){var T="";if(z&&q.test(z)){T=z}while(q.test(e())){T+=z}return T}function Q(T){var U=A;T=i()==="/";e();while(e()){if(!T&&z==="*"&&i()==="/"){e();break}else{if(T&&z==="\n"){return R.substring(U,A)}}}return R.substring(U,A)+z}function h(T){return R.substring(A-T.length,A).toLowerCase()===T}function I(){for(var T=A+1;T<R.length;T++){var U=R.charAt(T);if(U==="{"){return true}else{if(U===";"||U==="}"||U===")"){return false}}}return false}var b=R.match(/^[\t ]*/)[0];var c=new Array(M+1).join(r);var l=0;var N=0;function p(){l++;b+=c}function g(){l--;b=b.slice(0,-M)}var O={};O["{"]=function(T){L?w.push("\n"):O.singleSpace();w.push(T);B?O.newLine():O.singleSpace()};O["}"]=function(T){s?O.newLine():O.singleSpace();w.push(T);O.newLine()};O._lastCharWhitespace=function(){return q.test(w[w.length-1])};O.newLine=function(T){if(!T){O.trim()}if(w.length){w.push("\n")}if(b){w.push(b)}};O.singleSpace=function(){if(w.length&&!O._lastCharWhitespace()){w.push(" ")}};O.trim=function(){while(O._lastCharWhitespace()){w.pop()}};var w=[];if(b){w.push(b)}var G=false;var m=false;var d="";var E="";while(true){var y=n();var x=y!=="";var J=y.indexOf("\n")!==-1;E=d;d=z;if(!z){break}else{if(z==="/"&&i()==="*"){var f=h("");O.newLine();w.push(Q());O.newLine();if(f){O.newLine(true)}}else{if(z==="/"&&i()==="/"){if(!J&&E!=="{"){O.trim()}O.singleSpace();w.push(Q());O.newLine()}else{if(z==="@"){if(x){O.singleSpace()}w.push(z);var o=j(": ,;{}()[]/='\"");if(o.match(/[ :]$/)){e();o=D(": ").replace(/\s$/,"");w.push(o);O.singleSpace()}o=o.replace(/\s$/,"");if(o in a.NESTED_AT_RULE){N+=1;if(o in a.CONDITIONAL_GROUP_RULE){m=true}}}else{if(z==="{"){if(i(true)==="}"){C();e();O.singleSpace();w.push("{}");O.newLine();if(F&&l===0){O.newLine(true)}}else{p();O["{"](z);if(m){m=false;G=(l>N)}else{G=(l>=N)}}}else{if(z==="}"){g();O["}"](z);G=false;if(N){N--}if(F&&l===0){O.newLine(true)}}else{if(z===":"){C();if((G||m)&&!(h("&")||I())){w.push(":");O.singleSpace()}else{if(i()===":"){e();w.push("::")}else{w.push(":")}}}else{if(z==='"'||z==="'"){if(x){O.singleSpace()}w.push(D(z))}else{if(z===";"){w.push(z);k?O.newLine():O.singleSpace()}else{if(z==="("){if(h("url")){w.push(z);C();if(e()){if(z!==")"&&z!=='"'&&z!=="'"){w.push(D(")"))}else{A--}}}else{t++;if(x){O.singleSpace()}w.push(z);C()}}else{if(z===")"){w.push(z);t--}else{if(z===","){w.push(z);C();if(!G&&K&&t<1){O.newLine()}else{O.singleSpace()}}else{if(z==="]"){w.push(z)}else{if(z==="["){if(x){O.singleSpace()}w.push(z)}else{if(z==="="){C();z="=";w.push(z)}else{if(x){O.singleSpace()}w.push(z)}}}}}}}}}}}}}}}}var P=w.join("").replace(/[\r\n\t ]+$/,"");if(H){P+="\n"}return P}a.NESTED_AT_RULE={"@page":true,"@font-face":true,"@keyframes":true,"@media":true,"@supports":true,"@document":true};a.CONDITIONAL_GROUP_RULE={"@media":true,"@supports":true,"@document":true};if(typeof define==="function"&&define.amd){define([],function(){return{css_beautify:a}})}else{if(typeof exports!=="undefined"){exports.css_beautify=a}else{if(typeof window!=="undefined"){window.css_beautify=a}else{if(typeof global!=="undefined"){global.css_beautify=a}}}}}());
  413.  
  414. let cmdOnOff=null,
  415. //manage styles panel
  416. ui = {
  417. ruleLiHTML: `
  418. <li>
  419. <select name="ruletype" id="">
  420. <option value="url">URL</option>
  421. <option value="url-prefix">URL Prefix</option>
  422. <option value="domain">domain</option>
  423. <option value="regexp">Regular Expresion</option>
  424. </select>
  425. <input type="text" value="">
  426. <i class="slDeleteNormal" name="deleteRule" title="Delete Rule"></i>
  427. <i class="slAdd" name="addRule" title = "Add Rule"></i>
  428. </li>
  429. `,
  430. codeBlockDivHTML: `
  431. <div>
  432. <li name="number">Block %%BLOCKNUMBER%%</li>
  433. <pre><code name="applyTo" contenteditable="true" class="language-css">%%CSSCODE%%</code></pre>
  434. <div name="rules">
  435. <div name="applyto">
  436. <div><b>Apply To:</b></div>
  437. <div>
  438. %%ruleLiHTML%%
  439. </div>
  440. </div>
  441. </div>
  442. <i name="deletePart" title="Delete Code Block"><b class="slDeleteBold"> </b><b class="slCode"> </b></i>
  443. <i name="addPart" title="Add Code Block"><b class="slAdd"> </b><b class="slCode"> </b></i>
  444. <i name="beautify" title="Beautify Code"><b class="slMagic"> </b><b class="slCode"> </b></i>
  445. </div>
  446. `,
  447. SLMenuDivHTML:`
  448. <div id="SLMenu">
  449. <span id="SLLogo" title="Go To Userstyles.org"><a href="https://userstyles.org/" target="_blank">%%LOGOSVG%%</a></span>
  450. <span id="SLClose" class="slClose" name="close" title="Close"></span>
  451. <span id="SLAbout" class="slAdd" name="addStyle" title="Add New Style"></span>
  452. <span id="SLReturn" class="slReturn" name="return" title="Return"></span>
  453. <span id="sLForward" class="slForward" name="forward" title="Forward"></span>
  454. </div>
  455. `,
  456. SLEditDivHTML:`
  457. <div id="SLEdit">
  458. <div name="setting">
  459. <h1>Edit Style</h1>
  460. <li contenteditable="true" name="editingStyleName" data-name="" data-version="" data-stylesOrgId=""></li>
  461. <input type="checkbox" id="enableStyle"><label for="enableStyle" class="slOn" title="Enable/Disabled This Style"> </label><i name="saveStyle" class="slSave" title="Save Changes"> </i>
  462. </div>
  463. <div name="codeblocks">
  464. </div>
  465. </div>
  466. `,
  467. makeList: function(){
  468. let styles = GM_getValue('styles',{}),
  469. k = 0,
  470. text = `
  471. <div id="SLList">
  472. <div name="tool">
  473. <input type="text" id="slFilter" placeholder="Search Styles By Name">
  474. <span id="slHideOn" name="filterbtn" title="Hide Enabled Styles"><b class="slHidden"></b><b class="slSpace"></b><b class="slOn"></b></span>
  475. <span id="slHideOff" name="filterbtn" title="Hide Disabled Styles"><b class="slHidden"></b><b class="slSpace"></b><b class="slOff"></b></span>
  476. <span id="slShowAll" name="filterbtn" title="Show All Styles"><b class="slVisible"></b> <b class="slOn"></b><b class="slOff"></b></span>
  477. </div>
  478. <div name="list">`;
  479. for(let i in styles){
  480. text += `
  481. <div>
  482. <li name="styleName" data-version="${styles[i].version}" data-stylesOrgId="${styles[i].stylesOrgId}" class="slTag">${i}</li>
  483. <li name="applyTo"><span><b>Apply To:</b></span>${styles[i].rule.length ? ui.concatRules(styles[i].rule) : '<span>All</span>'}</li>
  484. <li>
  485. <i name="edit" class="slEdit"title="Edit" title="Edit"></i>
  486. <input type="checkbox" name="enableThis" id="chbx${k}" ${styles[i].enable ? "checked" : ''}><label for="chbx${k++}" class="${styles[i].enable ? 'slOn' : 'slOff'}" title="Enable/Disable"></label>
  487. <i name="delete" class="slDeleteNormal" title="Delete"></i>
  488. <i name="update" data-usoid="${styles[i].stylesOrgId ? styles[i].stylesOrgId : ''}" style="visibility:${styles[i].stylesOrgId ? 'visible' : 'hidden'};" class="slLink" title="Open This Style's Home Page"></i>
  489. </li>
  490. </div>
  491. `;
  492. }
  493. return text +`
  494. </div>
  495. </div>`;
  496. },
  497. makePanel: function(){
  498. if($('#SLManage,#SLManageCss')) $('#SLManage,#SLManageCss').remove();
  499. let text = `
  500. <style id="SLManageCss" type="text/css">
  501. ${SLFontCSS}
  502. html,body{margin:0;padding:0;}
  503. #SLManage{z-index:999999;position:fixed;top:0;left:0;width:100%;height:100%;font-size:1em;}
  504. #SLManage li{list-style-type:none;}
  505. #SLManage li:hover,#SLManage li[name="styleName"]:hover{font-style:italic;}
  506. #SLManage h1{color:#268BD2;}
  507. #SLManage input[type=checkbox]{display:none;}
  508. #SLMenu span{display:inline-block;float:left;}
  509. #SLLogo svg{border-radius:10px;margin:10px;}
  510. #SLMenu span:not(#SLLogo){width:40px;height:40px;padding:10px;margin:10px 0;color:#3199DC;font-size:40px;}
  511. #SLMenu span:hover{cursor:pointer;color:#2ACD71!important;}
  512. #SLManage #SLMenu{position:absolute;top:0;left:0;width:25%;min-width:200px;height:80px;padding:0 10px;background:#001f3f;color:white!important;}
  513. #SLList,#SLEdit{width:100%;height:100%;}
  514. /*SLList*/
  515. #SLManage div[name="list"]>div{border-bottom:2px dashed #839594;padding-bottom:10px;}
  516. #SLManage div[name="list"]>div>li{display:block;text-align:left;}
  517. #SLManage li[name="styleName"]{font:1.3em bolder;color:#3199DC;}
  518. #SLManage li[name="applyTo"]{margin:3px 3px 3px 10px;}
  519. #SLManage li[name="applyTo"] span{color:#657B83;margin:2px 3px;font-size:0.8em;background-color:#657b8333;border-radius:5px;}
  520. #SLManage li[name="applyTo"] span:first-child{background-color:transparent;}
  521. #slFilter{width:80%;font-size:1.1em;padding:4px 5px;}
  522. /*SLEdit*/
  523. #SLList>div,#SLEdit>div{height:100%;position:fixed;top:0;padding:10px;margin:0;display:inline-block;background:#EEE8D5;}
  524. #SLManage div[name="tool"],#SLManage div[name="setting"]{width:25%;left:0;margin-top:80px!important;}
  525. #SLManage div[name="tool"]>span{display:block;width:80%;font-size:1.4em;text-align:center;padding:0 5px;margin:6px 0;}
  526. #SLManage div[name="list"],#SLManage div[name="codeblocks"]{width:75%;right:0;border-left:2px dashed #839594;overflow-y:auto;}
  527. #SLManage li[name="editingStyleName"]{padding:2px 5px;width:80%;}
  528. #SLManage li[name="number"]{padding:2px 10px;display:inline-block;}
  529. #SLManage i,#SLManage label{padding:0 15px;margin:2px 5px;font-size:1em;font-style:normal;}
  530. #SLManage i:hover,#SLManage label:hover,#SLManage div[name="tool"]>span:hover{background:#3199DC;cursor:pointer;}
  531. #SLManage i,#SLManage label,#SLManage select,#SLManage input[type=text],#SLManage li[name="editingStyleName"],#SLManage li[name="number"],#SLManage div[name="tool"]>span{border:1px solid #839594;border-radius:5px;}
  532. #SLEdit pre{width:90%;margin-left:50px;overflow:auto;height:300px;resize:vertical;border:1px solid #839594;}
  533. #SLEdit code{display:block;width:100%;height:100%;}
  534. #SLManage div[name="applyto"]{white-space:nowrap;}
  535. #SLManage div[name=applyto] div:first-child{display:inline-block;width:15%;vertical-align:top;text-align:center;padding-right:15px;padding:3px}
  536. #SLManage div[name=applyto] div:nth-child(2){display:inline-block;width:80%;}
  537. #SLManage div[name=applyto] li{white-space:nowrap;width:100%;}
  538. #SLManage div[name=applyto] select{width:20%;padding:4px 0;}
  539. #SLManage div[name=applyto] input{width:60%;padding:4px 5px;}
  540. #SLManage div[name=codeblocks]>div{border-bottom:2px dashed #839594;padding-bottom:5px;}
  541.  
  542. #SLEdit,span#SLReturn{display: none;}
  543.  
  544. /* ===================== PrismJS Solarized Color Schemes START ========================= */
  545. code[class*="language-"],pre[class*="language-"]{color:#657b83; /* base00 */font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
  546. pre[class*="language-"]::-moz-selection,pre[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection{background:#073642; /* base02 */}
  547. pre[class*="language-"]::selection,pre[class*="language-"]::selection,code[class*="language-"]::selection,code[class*="language-"]::selection{background:#073642; /* base02 */}
  548. /* Code blocks */
  549. pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;border-radius:0.3em;}
  550. :not(pre) > code[class*="language-"],pre[class*="language-"]{background-color:#fdf6e3; /* base3 */}
  551. /* Inline code */
  552. :not(pre) > code[class*="language-"]{padding:.1em;border-radius:.3em;}
  553. .token.comment,.token.prolog,.token.doctype,.token.cdata{color:#93a1a1; /* base1 */}
  554. .token.punctuation{color:#586e75; /* base01 */}
  555. .namespace{opacity:.7;}
  556. .token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#268bd2; /* blue */}
  557. .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.url,.token.inserted{color:#2aa198; /* cyan */}
  558. .token.entity{color:#657b83; /* base00 */background:#eee8d5; /* base2 */}
  559. .token.atrule,.token.attr-value,.token.keyword{color:#859900; /* green */}
  560. .token.function{color:#b58900; /* yellow */}
  561. .token.regex,.token.important,.token.variable{color:#cb4b16; /* orange */}
  562. .token.important,.token.bold{font-weight:bold;}
  563. .token.italic{font-style:italic;}
  564. .token.entity{cursor:help;}
  565. /* ======================== PrismJS Solarized Color Schemes END ============================ */
  566. </style>
  567. `;
  568. text += `
  569. <div id="SLManage">
  570. ${ui.SLMenuDivHTML.replace('%%LOGOSVG%%',LogoSVG.replace('WIDTH','width="60px"').replace('HIGHT','height="60px"'))}
  571. ${ui.makeList()}
  572. ${ui.SLEditDivHTML}
  573. </div>`;
  574. $('body').append(text);
  575. $('#SLManage').on('click',ui.click);
  576. $('input[name=enableThis],input#enableStyle').on('change',ui.enableButton);
  577. //styles filter
  578. $('#slFilter').bind('input propertychange',()=>{
  579. $('div[name=list]>div').show();
  580. $('li[name=styleName]').each((idx,item)=>{
  581. if(!$(item).text().match(new RegExp($('#slFilter').val(), "i"))) $(item).parent().hide();
  582. });
  583. });
  584. },
  585. editButton: function(evt,mark = ''){
  586. let a = $(evt.target).parent().parent(),
  587. tarLi = a.find('li[name=styleName]');
  588. if(mark === 'menuAdd') tarLi = $('null');
  589. let name = tarLi.text() || null,
  590. version = tarLi.data('version') || null,
  591. stylesOrgId = tarLi.data('stylesOrgId') || null,
  592. enable = a.find('input[name=enableThis]').prop('checked') || true,
  593. cssRaw = GM_getValue('css',{})[name] || '',
  594. blocks = parser.split(cssRaw),
  595. k = 1,tmp = null,tmp1 = null,
  596. html = '';
  597. for(let i in blocks){
  598. html +=`
  599. <div>
  600. <li name="number">Block ${k++}</li>
  601. <pre><code name="applyTo" contenteditable="true" class="language-css">${parser.getCss(blocks[i],1)}</code></pre>
  602. <div name="rules">
  603. <div name="applyto">
  604. <div><b>Apply To:</b></div>
  605. <div>
  606. `;
  607. tmp = blocks[i].match(parser.ruleLineReg);
  608. if(tmp){
  609. tmp = tmp[0].match(parser.ruleReg);
  610. }else{
  611. tmp = [''];
  612. }
  613. for(let j in tmp){
  614. tmp1 = parser.getRule(tmp[j]);
  615. html += ui.ruleLiHTML.replace(`value="${tmp1}"`,`value="${tmp1}" selected="selected"`).replace('<input type="text" value="">',`<input type="text" value="${parser.getRuleText(tmp[j])}">`);
  616. }
  617. html +=` </div>
  618. </div>
  619. </div>
  620. <i name="deletePart" title="Delete Code Block"><b class="slDeleteBold"> </b><b class="slCode"> </b></i>
  621. <i name="addPart" title="Add Code Block"><b class="slAdd"> </b><b class="slCode"> </b></i>
  622. <i name="beautify" title="Beautify Code"><b class="slMagic"> </b><b class="slCode"> </b></i>
  623. </div>`;
  624. }
  625. $('#SLList,#SLAbout').hide();
  626. $('#SLEdit,#SLReturn').show();
  627. $('li[name=editingStyleName]').data('name',name).data('version',version).data('stylesOrgId',stylesOrgId).text(name);
  628. $('li[name=editingStyleName]').data('name',name);
  629. $('#enableStyle').prop('checked',enable);
  630. $('#enableStyle').next().attr('class',(enable ? 'slOn' : 'slOff'));
  631. $('div[name=codeblocks]').html(html);
  632. Prism.highlightAll();
  633. },
  634. enableButton: function(evt){
  635. let name,enable;
  636. let a = $(evt.target);
  637. if($(evt.target).attr('id') === 'enableStyle'){
  638. name = $('li[name=editingStyleName]').text();
  639. }else{
  640. name = a.parent().parent().find('li[name=styleName]').text();
  641. }
  642. enable = a.prop('checked');
  643. let styles = GM_getValue('styles',{});
  644. styles[name].enable = enable;
  645. GM_setValue('styles', styles);
  646. if(enable){
  647. a.next().attr('class','slOn');
  648. }else{
  649. a.next().attr('class','slOff');
  650. }
  651. },
  652. deleteButton: function(evt){
  653. let a = $(evt.target).parent().parent(),
  654. name = a.find('li[name=styleName]').text(),
  655. styles = GM_getValue('styles',{}),
  656. css = GM_getValue('css',{});
  657. delete styles[name];
  658. delete css[name];
  659. GM_setValue('styles', styles);
  660. GM_setValue('css', css);
  661. a.remove();
  662. },
  663. updateButton: function(evt){
  664. let link = 'https://userstyles.org/styles/' + $(evt.target).data('usoid');
  665. GM_openInTab(link,{active:true,insert:true,setParent:true});
  666. },
  667. concatRules: function(ruleArr){
  668. let arr = ruleArr;
  669. for(let i in arr){
  670. arr[i] = parser.getRuleText(arr[i]);
  671. }
  672. return '<span>'+arr.join(' ,</span><span>')+'</span>';
  673. },
  674. saveButton: function(){
  675. let txt = '',
  676. blocks = [],
  677. ruleLine ='',
  678. ruleLines =[],
  679. stylesObj = {},
  680. tarLi = $('li[name=editingStyleName]'),
  681. name = tarLi.text();
  682. if(!name.trim()){
  683. alert('Style Name Can not be Empty !!!');
  684. return true;
  685. }
  686. $('div[name=codeblocks]>div').each((idx,item)=>{
  687. ruleLine = '';
  688. $(item).find('input').each((idx1,item1)=>{
  689. if(/\S/.test($(item1).val())) ruleLine += ' '+$(item1).prev().val()+'("'+($(item1).val())+'")';
  690. });
  691. if(/\S/.test(ruleLine)){
  692. ruleLine = '@-moz-document' + ruleLine;
  693. txt = $.trim($(item).find('code').html().replace(/<div>|<\/?span[^>]*>/g,'').replace(/<\/div>|<br>/g,'\n'));
  694.  
  695. blocks.push(ruleLine +'\n{\n ' + txt + '\n}');
  696. ruleLines.push(ruleLine);
  697. }else{
  698. blocks.push($.trim($(item).find('code').html().replace(/<div>|<\/?span[^>]*>/g,'').replace(/<\/div>|<br>/g,'\n')));
  699. }
  700. });
  701. let css = GM_getValue('css',{});
  702. let styles = GM_getValue('styles',{});
  703. css[name] = blocks.join(SLSpliter);
  704. GM_setValue('css',css);
  705. stylesObj = {
  706. name: name,
  707. rule: parser.unique(ruleLines.join('\n').match(parser.ruleReg)),
  708. enable: $('#enableStyle').prop('checked'),
  709. version: tarLi.data('version'),
  710. stylesOrgId: tarLi.data('stylesOrgId')
  711. };
  712. styles[name] = stylesObj;
  713. GM_setValue('styles',styles);
  714.  
  715. ui.updateULList();
  716. $('#SLList,#SLAbout').show();
  717. $('#SLEdit,#SLReturn').hide();
  718. },
  719. updateULList: function(){
  720. let txt = ui.makeList();
  721. $('#SLList').remove();
  722. $('#SLEdit').before(txt);
  723. },
  724. addRule: function(ele,ruleType = null){
  725. let a = $(ui.ruleLiHTML);
  726. ele.parent().after(a);
  727. if(ruleType) a.find(`option[value="${ruleType}"]`).prop('selected','selected');
  728. },
  729. deleteRule: function(ele){
  730. if(ele.parent().parent().find('li').length > 1) ele.parent().remove();
  731. },
  732. deleteCodeBlock: function(ele){
  733. if($('div[name=codeblocks]>div').length > 1) $(ele).parent().remove();
  734. },
  735. addCodeBlock: function(ele){
  736. $(ele).parent().after(ui.codeBlockDivHTML.replace('%%BLOCKNUMBER%%','new').replace('%%CSSCODE%%','').replace('%%ruleLiHTML%%',ui.ruleLiHTML));
  737. Prism.highlightAll();
  738. },
  739. beautifyCodeBlock: function(ele){
  740. ele.parent().find('code').html(css_beautify(ele.parent().find('code').text()));
  741. Prism.highlightAll();
  742. },
  743. click: function(evt){
  744. function getName(zeptoCol){
  745. if(zeptoCol.attr('name')){
  746. return zeptoCol;
  747. }else{
  748. return zeptoCol.parent();
  749. }
  750. }
  751. let ele = getName($(evt.target));
  752. switch (ele.attr('name')) {
  753. case 'addStyle':
  754. ui.editButton(evt, 'menuAdd');
  755. break;
  756. case 'return':
  757. $('#SLList,#SLAbout').show();
  758. $('#SLEdit,#SLReturn').hide();
  759. break;
  760. case 'forward':
  761. $('#SLList,#SLAbout').hide();
  762. $('#SLEdit,#SLReturn').show();
  763. break;
  764. case 'close':
  765. $('#SLManage').remove();
  766. break;
  767. case 'filterbtn':
  768. $('div[name=list]>div').show();
  769. $('#SLList input[id*=chbx]').each((idx,it)=>{
  770. if(evt.target.id === 'slHideOn' || evt.target.parentElement.id === 'slHideOn'){
  771. if($(it).prop('checked')) $(it).parent().parent().hide();
  772. }
  773. if(evt.target.id === 'slHideOff' || evt.target.parentElement.id === 'slHideOff'){
  774. if(!$(it).prop('checked')) $(it).parent().parent().hide();
  775. }
  776. });
  777. break;
  778. case 'edit':
  779. ui.editButton(evt);
  780. break;
  781. case 'delete':
  782. ui.deleteButton(evt);
  783. break;
  784. case 'update':
  785. ui.updateButton(evt);
  786. break;
  787. case 'saveStyle':
  788. ui.saveButton();
  789. break;
  790. case 'deletePart':
  791. ui.deleteCodeBlock(ele);
  792. break;
  793. case 'addPart':
  794. ui.addCodeBlock(ele);
  795. break;
  796. case 'beautify':
  797. ui.beautifyCodeBlock(ele);
  798. break;
  799. case 'deleteRule':
  800. ui.deleteRule(ele);
  801. break;
  802. case 'addRule':
  803. ui.addRule(ele);
  804. break;
  805. default:
  806. break;
  807. }
  808. }
  809. };
  810. function stylesOnOff(){
  811. GM_unregisterMenuCommand(cmdOnOff);
  812. if($('#'+applyCssId).length > 0){
  813. $('#'+applyCssId).remove();
  814. updateList('add',location.origin);
  815. cmdOnOff = GM_registerMenuCommand('SL On',stylesOnOff);
  816. }else{
  817. apply();
  818. updateList('delete',location.origin);
  819. cmdOnOff = GM_registerMenuCommand('SL Off',stylesOnOff);
  820. }
  821. }
  822. function updateList(op, name){
  823. let key = name || location.origin,
  824. list = GM_getValue('nameList',{});
  825. if(op === 'delete'){
  826. delete list[key];
  827. }else{
  828. list[key] = 1;
  829. }
  830. GM_setValue('nameList',list);
  831. }
  832.  
  833. $(()=>{
  834. //register menu
  835. GM_registerMenuCommand('SL Manage',ui.makePanel);
  836. if(checkList(location.origin)){
  837. cmdOnOff = GM_registerMenuCommand('SL Off',stylesOnOff);
  838. }else{
  839. cmdOnOff = GM_registerMenuCommand('SL On',stylesOnOff);
  840. }
  841. });
  842.  
  843.  
  844.  
  845. })();
  846.  
  847. /*
  848. 后续改进方向:
  849. 1. 加入对浏览器内核的验证(或者让用户直接选.),并且取回有针对性的样式.
  850. 比如某个Style 的id是12770, Chrome版本的Stylish第一步会取回 xxx.12770.css,
  851. 第二步似乎是一个回应服务器的信息.
  852. 第三步会取回 xxx/chrome/12770.json
  853. 这json 里面的 sections 字段 就可能包含有针对特定浏览器的优化代码.
  854.  
  855. 其实,另外一方面,返回的 json 已经把 块 分割好,也省去了 我在这边再分拆的麻烦.
  856. 2. 优化一些体验性细节.以便增加脚本吸引力.
  857. 3. 至于适配Greasymonkey嘛,暂时不考虑了.
  858. 4. 可以把样式管理页面的链接,适配为直接的更新升级按钮
  859. 5. 可以考虑加入样式的缩略图功能. 这样样式管理,可以有列表视图 和 块视图两种选择.更加人性化一些.
  860.  
  861. */

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址