feat: add custom CSS

src/_locales/cs/messages.yml

@@ -392,9 +392,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -404,6 +401,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -428,3 +428,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/de/messages.yml

@@ -388,9 +388,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -400,6 +397,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -424,3 +424,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/en/messages.yml

@@ -388,9 +388,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: 'Line no.: '
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: Blacklist updated.
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: Blacklist
@@ -402,6 +399,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: Save
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: Blacklist updated.
 labelGeneral:
   description: Label for general settings.
   message: General
@@ -426,3 +426,17 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: Authorizing
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: Custom style is updated.
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: Custom Style
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: >-
+    Custom CSS for options page and script installation page. If you are not
+    sure what this is for, please do not edit it.
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: Save

src/_locales/id/messages.yml

@@ -394,9 +394,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -406,6 +403,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -430,3 +430,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/pl/messages.yml

@@ -390,9 +390,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -402,6 +399,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -426,3 +426,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/ro/messages.yml

@@ -394,9 +394,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -406,6 +403,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -430,3 +430,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/ru/messages.yml

@@ -390,9 +390,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -402,6 +399,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -426,3 +426,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/sr/messages.yml

@@ -390,9 +390,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -402,6 +399,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -426,3 +426,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/vi/messages.yml

@@ -390,9 +390,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: ''
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: ''
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: ''
@@ -402,6 +399,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: ''
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: ''
 labelGeneral:
   description: Label for general settings.
   message: ''
@@ -426,3 +426,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: ''
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: ''
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: ''
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: ''
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: ''

src/_locales/zh/messages.yml

@@ -390,9 +390,6 @@ labelShowBadge:
 labelLineNumber:
   description: Label for line number jumper.
   message: 行号：
-msgSavedSecurity:
-  description: Message shown when settings of security section are saved.
-  message: 黑名单已更新。
 labelBlacklist:
   description: Label for global blacklist settings in security section.
   message: 黑名单
@@ -402,6 +399,9 @@ descBlacklist:
 buttonSaveBlacklist:
   description: Button to save global blacklist.
   message: 保存
+msgSavedBlacklist:
+  description: Message shown when blacklist are saved.
+  message: 黑名单已更新！
 labelGeneral:
   description: Label for general settings.
   message: 通用
@@ -426,3 +426,15 @@ labelSyncRevoke:
 labelSyncAuthorizing:
   description: Label for button when authorization is in progress.
   message: 授权中
+msgSavedCustomCSS:
+  description: Message shown when custom CSS is saved.
+  message: 自定义样式已更新！
+labelCustomCSS:
+  description: Label for custom CSS section.
+  message: 自定义样式
+descCustomCSS:
+  description: Description of custom CSS section.
+  message: 这里可以为管理页面和脚本安装页面设置自定义CSS。如果你不确定它的意思，请不要修改。
+buttonSaveCustomCSS:
+  description: Label for button to save custom CSS.
+  message: 保存

src/background/options.js

@@ -14,6 +14,7 @@ var defaults = {
   blacklist: null,
   syncScriptStatus: true,
   sync: null,
+  customCSS: null,
 };
 var changes = {};
 var hooks = _.initHooks();

src/options/app.js

@@ -54,6 +54,19 @@ function loadHash() {
     }
   });
 }
+function initCustomCSS() {
+  var style;
+  _.options.hook(function (changes) {
+    var customCSS = changes.customCSS || '';
+    if (customCSS && !style) {
+      style = document.createElement('style');
+      document.head.appendChild(style);
+    }
+    if (customCSS || style) {
+      style.innerHTML = customCSS;
+    }
+  });
+}
 
 var _ = require('../common');
 _.initOptions();
@@ -84,9 +97,6 @@ var hashData = {
   type: null,
   params: null,
 };
-window.addEventListener('hashchange', loadHash, false);
-zip.workerScriptsPath = '/lib/zip.js/';
-document.title = _.i18n('extName');
 var handlers = {
   UpdateOptions: function (data) {
     _.options.update(data);
@@ -96,7 +106,11 @@ chrome.runtime.onMessage.addListener(function (res) {
   var handle = handlers[res.cmd];
   handle && handle(res.data);
 });
+window.addEventListener('hashchange', loadHash, false);
+zip.workerScriptsPath = '/lib/zip.js/';
+document.title = _.i18n('extName');
 loadHash();
+initCustomCSS();
 
 _.options.ready.then(function () {
   new Vue({

src/options/style.css

@@ -222,6 +222,7 @@ section {
     padding: 0 .2rem;
     top: -.6em;
     left: .8rem;
+    line-height: 1;
     background: white;
   }
   > h4 {
@@ -391,6 +392,8 @@ svg path {
   fill: currentColor;
 }
 
-.text-list {
-  height: 10em;
+.tab-settings {
+  textarea {
+    height: 10em;
+  }
 }

src/options/views/tab-settings/index.html

@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content tab-settings">
   <h1 v-text="i18n('labelSettings')"></h1>
   <section>
     <h3 v-text="i18n('labelGeneral')"></h3>
@@ -31,4 +31,5 @@
   <vm-export></vm-export>
   <vm-sync></vm-sync>
   <vm-blacklist></vm-blacklist>
+  <vm-css></vm-css>
 </div>

src/options/views/tab-settings/index.js

@@ -4,6 +4,7 @@ var VmImport = require('./vm-import');
 var VmExport = require('./vm-export');
 var VmSync = require('./vm-sync');
 var VmBlacklist = require('./vm-blacklist');
+var VmCss = require('./vm-css');
 
 module.exports = {
   template: cache.get('./index.html'),
@@ -12,6 +13,7 @@ module.exports = {
     VmExport: VmExport,
     VmSync: VmSync,
     VmBlacklist: VmBlacklist,
+    VmCss: VmCss,
   },
   methods: {
     updateAutoUpdate: function () {

src/options/views/tab-settings/vm-blacklist/index.html

@@ -3,6 +3,6 @@
     <span class="feature-text" v-text="i18n('labelBlacklist')"></span>
   </h3>
   <p v-html="i18n('descBlacklist')"></p>
-  <textarea class="text-list" v-model="rules"></textarea>
+  <textarea v-model="rules"></textarea>
   <button v-text="i18n('buttonSaveBlacklist')" @click="onSave"></button>
 </section>

src/options/views/tab-settings/vm-blacklist/index.js

@@ -17,7 +17,7 @@ module.exports = {
       .filter(Boolean);
       _.options.set('blacklist', rules);
       Message.open({
-        text: _.i18n('msgSavedSecurity'),
+        text: _.i18n('msgSavedBlacklist'),
       });
       _.sendMessage({cmd: 'BlacklistReset'});
     },

src/options/views/tab-settings/vm-css/index.html

@@ -0,0 +1,8 @@
+<section v-feature="'css'">
+  <h3>
+    <span class="feature-text" v-text="i18n('labelCustomCSS')"></span>
+  </h3>
+  <p v-html="i18n('descCustomCSS')"></p>
+  <textarea v-model="css"></textarea>
+  <button v-text="i18n('buttonSaveCustomCSS')" @click="onSave"></button>
+</section>

src/options/views/tab-settings/vm-css/index.js

@@ -0,0 +1,20 @@
+var _ = require('src/common');
+var cache = require('src/cache');
+var Message = require('src/options/views/message');
+
+module.exports = {
+  template: cache.get('./index.html'),
+  data: function () {
+    return {
+      css: _.options.get('customCSS'),
+    };
+  },
+  methods: {
+    onSave: function () {
+      _.options.set('customCSS', (this.css || '').trim());
+      Message.open({
+        text: _.i18n('msgSavedCustomCSS'),
+      });
+    },
+  },
+};