Привет, незнакомец!

Похоже, вы здесь новенький. Чтобы принять участие, нажмите одну из кнопок ниже!

Almost working script, I think. Could you make it work? (solved by jenie)

отредактировано August 2018 Раздел: Запросы на создание скриптов Firefox

Hi there, I'm trying to make a userscript that will do a simple style change for a website like google.
On the page will be at least 2 buttons, and each will link to a different stylesheet when clicked, thus changing the appearance of google's colors.
So far, reddit and stackoverflow have yielded very little explanatory help. And as I'm fairly new to scripting, I'm hoping you'd help me out here, or even fix the script to work if you feel you can.
Thank you :)

  // ==UserScript==
    // @name         Change CSS!
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Theme Changer
    // @author       jmc
    // @match        https://www.google.com
    // @grant        none
    // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    // ==/UserScript==

    $(function () {
        $('button').click(function () {
            var txt = $(this).html();
            if(txt=='Night Mode')
            {

                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                return false;
            }
            else if (txt == 'Day Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                return false;               }

        });


    });

    body=<form id="change theme">
        <div align="center"><br><br><br>
        <button type="submit" id="Night Mode"></button>
    <button type="submit" id="Day Mode"></button>
    </div>

I've got it working locally on an html file >

    <html><head><link rel="Stylesheet" href=""  type="text/css" id="style"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('button').click(function () {
                    var txt = $(this).html();
                    if(txt=='Night Mode')
                        {

                    $('link#style').attr('href', 'night.css');
                    return false;
                         }
                     else if (txt == 'Day Mode') {
                      $('link#style').attr('href', 'day.css');
                      return false;               }

                });

            });

        </script>
    <title>WOT</title><head>
    <body>

    LOL
    <form id="form1" runat="server">
        <div>
        <h1>My Website</h1>
        <br />
        <button>Night Mode</button>
        <button>Day Mode</button>
        </div>
        </form>


    </body>

But I can't seem to get this to transfer into an extension :pensive:

Комментарии

  • отредактировано August 2018 Chrome

    Why so complicated?

    /* Create an HTMLLinkElement to embed style bit later */
    const styleElement = document.body.appendChild(document.querySelector('link'));
    styleElement.rel = 'stylesheet';
    styleElement.type = 'text/css';
    
    /* What is time of day now? */
    const sunset = 20;
    const sunrise = 8;
    const currentHour = new Date().getHours();
    const isNight = currentHour > sunset && currentHour < sunrise;
    
    /* Embed corresponding CSS */
    let cssLink = 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css';
    if (isNight)
        cssLink = 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css';
    styleElement.href = cssLink;
    
  • // ==UserScript==
    // @name         Change CSS!
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Theme Changer
    // @author       jmc
    // @match        https://www.google.com
    // @grant        none
    // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    // ==/UserScript==
    
    $(function() {
        $(document).ready(function() { // Wait for the page to load
    
            $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
            $('<div><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body); // Append the two buttons
            $('button').click(function() { // Add click event on elements with the Tag button
                if (this.textContent === 'Day Mode') {
                    $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                } else if (this.textContent === 'Night Mode') {
                    $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                }
            });
    
        });
    });
    

    Local html file should look like the following

    <html>
    
    <head>
        <title>Change CSS!</title>
    </head>
    
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document).ready(function() { // Wait for the page to load
    
                    $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
                    $('<div><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body); // Append the two buttons
                    $('button').click(function() { // Add click event on elements with the Tag button
                        if (this.textContent === 'Day Mode') {
                            $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                        } else if (this.textContent === 'Night Mode') {
                            $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                        }
                    });
    
                });
            });
        </script>
    </body>
    
    </html>
    
  • @Jenie said:
    ```
    // ==UserScript==
    // @name Change CSS!
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description Theme Changer
    // @author jmc
    // @match https://www.google.com
    // @grant none
    // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    // ==/UserScript==

    $(function() {
    $(document).ready(function() { // Wait for the page to load

        $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head); // Append the element that will later hold the link of the style file
        $('
    
    Night ModeDay Mode

    ').appendTo(document.body); // Append the two buttons

        $('button').click(function() { // Add click event on elements with the Tag button
            if (this.textContent === 'Day Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
            } else if (this.textContent === 'Night Mode') {
                $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
            }
        });
    
    });
    

    });

    <br />Local html file should look like the following
    
    


    Change CSS!



    > $(function() { > $(document).ready(function() { // Wait for the page to load > > $('').appendTo(document.head); // Append the element that will later hold the link of the style file > $('
    Night ModeDay Mode
    ').appendTo(document.body); // Append the two buttons > $('button').click(function() { // Add click event on elements with the Tag button > if (this.textContent === 'Day Mode') { > $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css'); > } else if (this.textContent === 'Night Mode') { > $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css'); > } > }); > > }); > }); >


    ```

    Thank you! This makes the buttons appear on google.com, but they don't seem clickable?

  • @AHOHNMYC said:
    Why so complicated?

    /* Create an HTMLLinkElement to embed style bit later */
    const styleElement = document.body.appendChild(document.querySelector('link'));
    styleElement.rel = 'stylesheet';
    styleElement.type = 'text/css';
    
    /* What is time of day now? */
    const sunset = 20;
    const sunrise = 8;
    const currentHour = new Date().getHours();
    const isNight = currentHour > sunset && currentHour < sunrise;
    
    /* Embed corresponding CSS */
    let cssLink = 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css';
    if (isNight)
        cssLink = 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css';
    styleElement.href = cssLink;
    

    Thank you for replying :) I found the code like this, I didn't know it was complicated.
    If there a way for adding buttons to this, rather than having it time based?

  • Works fine here. Try adding !important after the values in the style files:

    body {
        background-color: blue !important;
    }
    

    I also updated the code to have the buttons at the top and added an alert to check the click:

    $(function() {
        $(document).ready(function() {
            $('<link rel="Stylesheet" href="" type="text/css" id="style"/>').appendTo(document.head);
            $('<div style="top: 5px;position: fixed;z-index: 1000;"><button>Night Mode</button><button>Day Mode</button></div>').appendTo(document.body);
            $('button').click(function() {
                alert(this.textContent); // remove this line later
                if (this.textContent === 'Day Mode') {
                    $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/gf7te23q27tht3w/one.css');
                } else if (this.textContent === 'Night Mode') {
                    $('link#style').attr('href', 'https://dl.dropboxusercontent.com/s/izi0tg7r5foax78/two.css');
                }
            });
        });
    });
    
  • @Jenie said:
    Works fine here. Try adding !important after the values in the style files:
    ```

    It does indeed work now. Thank you Jenie! :smiley:

Войдите или Зарегистрируйтесь чтобы комментировать.