add multi background color;beautify button style

README.MD

@@ -1,30 +1,39 @@
 # Zotero PDF Background Plugin
 
-![](example1.png)
+![](example1.png)![](example2.png)![](example3.png)
 
 Install by downloading the [latest version](https://github.com/q77190858/zotero-pdf-background/releases/latest)
 
 ## Feature
 
-* a green pdf background to care your eyes
-* a button like a eye on the middle toolbar to switch green mode and original mode
+* a multi pdf background to care your eyes
+* a button like a eye on the middle toolbar to switch different background mode
 
 ## Todo
 
-* add more background theme
-* beautify button style
+* add DIY background color function(Maybe)
 
-## Contribution
+## Install
+
+- Download zotero-pdf-backgroundv0.0.2.zip
+- Open Zotero->tools->plugins->click setting icon on right top->Install Addon from file...
+- Select zotero-pdf-backgroundv0.0.2.zip file
+- Restart Zotero
+
+## Build Development Environment
 
 follow these steps to build a zotero debug environment
 
-- [ ] Download Zotero 60 (I use a portable edition)
+- [ ] Download Firefox 60 (I use a portable edition)
 - [ ] Git clone
-- [ ] Download and launch [zotero dev edition]([dev builds [Zotero Documentation\]](https://www.zotero.org/support/dev_builds)) with --debugger
+- [ ] Download and launch [zotero dev edition](https://www.zotero.org/support/dev_builds) with --debugger
 - [ ] Launch Firefox 60
 - [ ] In Firefox, go to devtools, go to settings, click *'Enable browser chrome and add-on debugging toolboxes'* and *'Enable remote debugging'*.
 - [ ] In Zotero, go to setting, advanced, config editor, look up "devtools" and set true on "devtools.debugger.remote-enabled" and set "devtools.debugger.remote-port" 6100
 - [ ] In Firefox, click the hamburger menu in the top right -> web developer -> Connect...
 - [ ] Enter localhost:6100
 - [ ] Connect
-- [ ] Click "Inspect Main Process"
+- [ ] Click "Inspect Main Process"
+
+## Thanks
+This plugin's framework is based on [zotero-night](https://github.com/tefkah/zotero-night)

content/zotero-pdf-background.js

@@ -20,9 +20,16 @@
     Zotero.debug(format(msg));
   }
 
-
   var pdf_background = class {
     constructor() {
+      this.background_list=["default","daytime","nighttime","careeye","parchment"];//背景颜色列表
+      this.setPref("defaultBackground",this.background_list[3]);//预先写入配置
+    }
+    getPref(pref) {
+      return Zotero.Prefs.get(`extensions.pdf-bakcground.${pref}`, true);
+    }
+    setPref(pref, value) {
+      return Zotero.Prefs.set(`extensions.pdf-bakcground.${pref}`, value, true);
     }
     addEventListener(type, listener, priority) {
       this._eventListeners.push({ priority: priority != null ? priority : 10, listener, type });
@@ -33,48 +40,79 @@
         debug("addToggleButton: window already has toggle");
         return;
       }
+      const defaultBackground = this.getPref("defaultBackground");//获得设置中背景颜色
       const toggle = readerWindow.document.createElement("button");
       toggle.setAttribute("id", "switch-toggle");
-      const icon = "\u{1F441}";
-      toggle.textContent = icon;
-      toggle.setAttribute("style", "filter:none !important; height: 20px; width: 20px");
+      toggle.setAttribute("title", "选择背景颜色");
+      toggle.setAttribute("class","toolbarButton background-color");
+      toggle.innerHTML=`<span class="button-background"></span><span class="dropmarker"></span>`;
       toggle.onclick = () => {
-        this.toggleOnClick(readerWindow);
+        var selector=readerWindow.document.querySelector("#background-selector");
+        if(selector.hasAttribute("class"))
+          selector.removeAttribute("class")
+        else
+          selector.setAttribute("class","hidden")
       };
       const middleToolbar = readerWindow.document.querySelector("#toolbarViewerMiddle");
       middleToolbar.appendChild(toggle);
+
+      const selector = readerWindow.document.createElement("ul");
+      selector.setAttribute("id", "background-selector");
+      selector.setAttribute("class", "hidden");
+      selector.innerHTML=`
+        <li value="default">默认</li>
+        <li value="daytime">日间</li>
+        <li value="nighttime">夜间</li>
+        <li value="careeye">护眼</li>
+        <li value="parchment">羊皮纸</li>
+      `;
+      selector.onclick = (e) => {
+        this.backgroundSelectorOnClick(e,readerWindow);
+      }
+      middleToolbar.appendChild(selector);
     }
     hasToggle(readerWindow) {
       return !!readerWindow.document.querySelector("#switch-toggle");
     }
-    addPageStyle(readerWindow){
-      const doc = readerWindow.document;
+    backgroundSelectorOnClick(e,readerWindow) {
+      if(e.target.nodeName.toLowerCase()=="li"){
+        var bg=e.target.getAttribute("value");
+      }
+      this.setPref("defaultBackground",bg);
+      readerWindow.document.querySelector("body").setAttribute("class",bg);
+      //设置按钮
+      readerWindow.document.querySelector("#background-selector li[select='true']").removeAttribute("select");
+      readerWindow.document.querySelector("#background-selector li[value="+bg+"]").setAttribute("select","true");
+      readerWindow.document.querySelector("#background-selector").setAttribute("class","hidden");
+      return;
+    }
+    addWindowStyle(readerWindow){
       debug("adding style for added window tab");
-      const style = doc.createElement("style");
+      const style = readerWindow.document.createElement("link");
       style.setAttribute("type", "text/css");
-      style.setAttribute("id", "pageStyle");
-      style.textContent = "#viewer.pdfViewer > .page > .textLayer{display:block;background-color:rgba(155,189,133,0.5);}";
-      const header = doc.querySelector("head");
+      style.setAttribute("rel", "stylesheet");
+      style.setAttribute("id", "pageBackground");
+      style.setAttribute("href", "chrome://zotero-pdf-background/skin/pdf-background.css");
+      const header = readerWindow.document.querySelector("head");
       header.appendChild(style);
+      var defaultBackground = this.getPref("defaultBackground");//获得设置中背景颜色
+      if(defaultBackground==undefined)defaultBackground="careeye";
+      readerWindow.document.querySelector("body").setAttribute("class",defaultBackground);
+      //设置按钮
+      var ele;
+      if(ele=readerWindow.document.querySelector("#background-selector li[select='true']"))ele.removeAttribute("select");
+      readerWindow.document.querySelector("#background-selector li[value="+defaultBackground+"]").setAttribute("select","true");
     }
-    hasPageStyle(readerWindow) {
-      return !!readerWindow.document.querySelector("#pageStyle");
-    }
-    toggleOnClick(readerWindow) {
-      if (this.hasPageStyle(readerWindow)) {
-        readerWindow.document.querySelector("#pageStyle").remove();
-      }else{
-        this.addPageStyle(readerWindow)
-      }
-      return;
+    hasWindowStyle(readerWindow) {
+      return !!readerWindow.document.querySelector("#pageBackground");
     }
     addAllStyles() {
       let counter = 0;
       let win = window[counter];
       while (win) {
         if (win.document.URL.includes("viewer.html")) {
-          this.addPageStyle(win)
           this.addToggleButton(win);
+          this.addWindowStyle(win)
         }
         counter++;
         win = window[counter];
@@ -85,7 +123,9 @@
       let win = window[counter];
       while (win) {
         if (win.document.URL.includes("viewer.html")) {
-          win.document.querySelector("#pageStyle").remove();
+          win.document.querySelector("#switch-toggle").remove();
+          win.document.querySelector("#pageBackground").remove();
+          win.document.querySelector("body").removeAttribute("class");
         }
         counter++;
         win = window[counter];
@@ -129,8 +169,8 @@
                 }, 300);
               }
               case "complete": {
-                this.addPageStyle(tabWindow)
                 this.addToggleButton(tabWindow);
+                this.addWindowStyle(tabWindow)
               }
             }
           }

install.rdf

@@ -4,7 +4,7 @@
     <em:name>Background for Zotero Pdf Reader</em:name>
     <em:description>Background theme for Zotero PDF Reader UI</em:description>
     <em:id>[email protected]</em:id>
-    <em:version>0.0.1</em:version>
+    <em:version>0.0.2</em:version>
     <em:homepageURL>https://github.com/q77190858/zotero-pdf-background</em:homepageURL>
     <em:creator>Ju Ju</em:creator>
     <em:updateURL>https://github.com/q77190858/zotero-pdf-background/releases/download/release/update.rdf</em:updateURL>

skin/pdf-background.css

@@ -0,0 +1,55 @@
+body.default #viewer.pdfViewer > .page > .textLayer{display:block;}
+body.daytime #viewer.pdfViewer > .page > .textLayer{display:block;background-color:rgba(243,243,243,0.5);}
+body.nighttime #viewer.pdfViewer > .page > .textLayer{display:block;background-color:rgba(147,147,147,0.5);}
+body.careeye #viewer.pdfViewer > .page > .textLayer{display:block;background-color:rgba(155,189,133,0.5);}
+body.parchment #viewer.pdfViewer > .page > .textLayer{display:block;background-color:rgba(191,177,125,0.5);}
+
+.toolbar .toolbarButton.background-color::before {
+    content: "👁";
+    font-size: 14px;
+    border-radius: 3px;
+    margin: -2px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    z-index: 2;
+}
+.toolbar .toolbarButton.background-color .dropmarker{
+    display: inline-block;
+    vertical-align: top;
+    width: 7px;
+    height: 4px;
+    position: relative;
+    z-index: 1;
+    margin: 6px -1px 0 2px;
+    background: url(resource://zotero/pdf-reader/images/[email protected]) no-repeat left top/100%;
+}
+
+#toolbarViewerMiddle{
+    position: relative;
+}
+.toolbar #background-selector{
+    position:absolute;
+    right: 4px;
+    top:93%;
+    background:#fafafa;
+    box-shadow:1px 1px 1px #888
+}
+.toolbar #background-selector > li{
+    list-style:none;
+    padding: 1px 3px;
+}
+.toolbar #background-selector > li:hover{
+    list-style:none;
+    padding-top:1px;
+    padding-bottom:1px;
+    cursor: pointer;
+    background-color:skyblue;
+}
+.toolbar #background-selector > li[select="true"]{
+    list-style:none;
+    padding-top:1px;
+    padding-bottom:1px;
+    cursor: pointer;
+    background-color:dodgerblue;
+}