Tutorials & Resources Novel Updates UserScript to preview cover images

Discussion in 'Novel Updates Site Discussion' started by sithkazar, Jan 9, 2017.

  1. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    Maybe there where still old data objects left. I tried different data formats in my last few versions.
    Script is working in chrome with the current tampermonkey. (direct big version jump from my old version)

    Version 1.4.2
    • GM_listValues added to be able to automatically remove old/incompatible data
     
  2. terabyte

    terabyte Well-Known Member

    Joined:
    Nov 1, 2017
    Messages:
    32
    Likes Received:
    14
    Reading List:
    Link
    The popup appears again with 1.4.2 but the image is missing for all the series I tried checking. After taking a look at console logs there is no error anymore, but there is a warning instead:
    Code:
    VM175:33 GM_xmlhttpRequest: TypeError: Failed to execute 'parseFromString' on 'DOMParser': The provided value 'text/html; charset=UTF-8' is not a valid enum value of type SupportedType.
        at <anonymous>:3:98
        at c (<anonymous>:2:146)
        at L (eval at exec_fn ((index):1), <anonymous>:30:407)
        at Object.response (eval at exec_fn ((index):1), <anonymous>:33:129)
        at Function.get (eval at exec_fn ((index):1), <anonymous>:33:443)
        at Function.onLoad (userscript.html?name=novelupdates%20Cover%20Preview.user.js&id=XXX:413)
        at <anonymous>:3:98
        at eval (eval at exec_fn ((index):1), <anonymous>:28:123)
    If you send me a PM with the new code I can edit it locally and give it a try without you having to release new minor versions until we're sure it works. ;)
     
  3. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    Thats weird.
    Currently i am not using "parseFromString" and "DOMParser" . These parts are only available as comments and nowhere else used.

    Two points to look at
    How about completly removing and reinstalling the script?
    Are other userscripts running at the same time?
    Can tampermonkeys run in chrome incognito mode? Maybe some other addon is interferring?

    Now i even installed tampermonkey in firefox and opera. With both it is also working (after i allowed large media in ublock). Otherwise it will only show the popup with the loading animation.

    Maybe your error gets corrected sometime during my further refactoring.
     
  4. terabyte

    terabyte Well-Known Member

    Joined:
    Nov 1, 2017
    Messages:
    32
    Likes Received:
    14
    Reading List:
    Link
    1. I tried uninstalling the script, restarting chrome and re-installing: the result is the same error.
    2. I have no other scripts running for NU site.
    3. Yes, it can run in incognito mode.
    Clicking on the error it points to line 413:
    Code:
                    const domDocument = xhr.response;
    After this line I've noticed there are 2 comments lines where parseFromString / DOMParser are actually being used:
    Code:
                    //const parser = new DOMParser();
                    // const domDocument = parser.parseFromString(xhr.responseText, 'text/html');
    The code is commented though so I can't see how it would actually run.

    Looking further I'm noticing there's also an info message:
    Code:
    TypeError: Cannot read property 'querySelectorAll' of undefined
        at Function.onLoad (userscript.html?name=novelupdates%20Cover%20Preview.user.js&id=XXX:417)
        at <anonymous>:3:98
        at eval (eval at exec_fn ((index):1), <anonymous>:28:123)
    which points to this line:
    Code:
    const temp = domDocument.querySelectorAll(IMAGELINKCONTAINERS);
    so it looks like retrieving the image container element is actually failing.


    When I look at NU homepage's source code I can't find these 2 CSS classes:
    Code:
    const IMAGELINKCONTAINERS = '.serieseditimg, .seriesimg'; //instead of single element class name with dot

    Nevermind, I was looking at the wrong page. The CSS classes are indeed present in the page's source when looking at the series page.

    I wonder if somehow cloudflare is interfering with retrieving the series page? I often get CF anti-spam measure or whatever it's called. Maybe that's getting triggered on the ajax request returning (and caching) the wrong response? But it doesn't explain why the other userscript is working just fine...
     
    Last edited: Nov 11, 2020
  5. runsing

    runsing status : bleeding, health -10/s Novel Updates Staff

    Joined:
    Nov 4, 2015
    Messages:
    3,383
    Likes Received:
    6,846
    Reading List:
    Link
    @terabyte @sz
    not sure how much or if it even helps, but this is how it looks on my laptop's browser.
    FF 82.0.2, 32-bit, EME-free
    Windows 8.1 64-bit
    1680x1050 resolution, 125% text scaling, 3/5 screen-wide browser window
    135_nocover.jpg
    135_cover.jpg
    142_loading.jpg
    142_nocover.jpg
    142_cover.jpg

    this script doesn't work on my primary browser (FF Dev ed, 56.0b8) unfortunately, though the other preview script does.
     
  6. terabyte

    terabyte Well-Known Member

    Joined:
    Nov 1, 2017
    Messages:
    32
    Likes Received:
    14
    Reading List:
    Link
    @runsing Your image of 1.4.2 loading is basically what I always see right now no matter which series I try.
     
  7. runsing

    runsing status : bleeding, health -10/s Novel Updates Staff

    Joined:
    Nov 4, 2015
    Messages:
    3,383
    Likes Received:
    6,846
    Reading List:
    Link
    i'm using cloudflare's dns 1.1.1.1 as primary, google's as secondary. just thought i should mention that in case it matters.
     
  8. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    @runsing
    i just installed a fresh version of firefox developer (83.0b10) and tampermonkey. That seems to work. Does the older firefox dev version install next to the standard firefox too? Than i would also try that out.

    For @terabyte custom dns should not matter, if the other coverscript is working fine
    I am still trying to find the error. For now i just made some small refactoring changes and added another notification state when the image could not be loaded. If this at least stops the infinite spinner i should be a step in the right direction.

    version 1.4.3
    • small refactoring changes
    • additional loading error notification
     
  9. terabyte

    terabyte Well-Known Member

    Joined:
    Nov 1, 2017
    Messages:
    32
    Likes Received:
    14
    Reading List:
    Link
    Nope. No change so far. I still get the same 2 errors as before even on 1.4.3: 1 warning + 1 notice. Infinite spinner is still there, as well.
     
  10. runsing

    runsing status : bleeding, health -10/s Novel Updates Staff

    Joined:
    Nov 4, 2015
    Messages:
    3,383
    Likes Received:
    6,846
    Reading List:
    Link
    yes, 56.0b8 is the last pre-quantum firefox which i had to have by all means.there are two addons i can't live without, since they can't be fully ported to quantum anymore due to how web-extensions' restriction work.
    addon2.jpg
    there are just no options nor other similar extensions (for new FF) that even comes close to how useful these two are.

    the dev version will installs in its own separate folder than standard one. i don't quite remember, but i think it did ask if i want to use both FF at the same time during installation. there's also this option in case you missed that.
    FFdevoption.jpg
     
    Last edited: Nov 13, 2020
  11. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    Yes i also liked these addons. Not exactly the same but i am using Tab session manager and tree style tab for similar usage.

    Just tried it out on the older firefox dev version. Had to exchange one function call (replaceAll) since that is only available from firefox 77.

    @terabyte oh well at least i now know that the error happens at an earlier part in my code

    Version 1.4.4
    • updated activePopup detection
    • should continue parseSeriePage after awaiting promise to refresh popup

    Version 1.4.5
    • refactoring
    • select all links the same way nazgand script does. (without manual css class selection)
    Version 1.4.7
    • popup working on user readinglist page
    Version 1.5.0
    • refactoring
    • optional details (Displaying Ratings/Status/Genre and Tags of serie page)
     
    Last edited: Nov 17, 2020
    runsing likes this.
  12. terabyte

    terabyte Well-Known Member

    Joined:
    Nov 1, 2017
    Messages:
    32
    Likes Received:
    14
    Reading List:
    Link
    Been away for a few days.

    I've just tested 1.5.2 and I'm still having the same warning/info logged as before but with more things I noticed this time around:

    1. It looks like the script now triggers at least once for all series once the page first loads without waiting for any onhover event. Not sure if this was intentional?
    2. The console.log() calls you have on lines 309-311:
      console.log(xhr); => Array of data: ReadySate: 4; status: 200; etc; (too long to past here, but let me know if you want it with a PM)
      console.log(xhr.response); => undefined
      console.log(domDocument) => undefined
    3. The console.log() call you have on lines 347 (error: GM_xmlhttpRequest can not get xhr.response):
      Code:
      TypeError: Cannot read property 'querySelectorAll' of undefined
          at Function.onLoad (userscript.html?name=novelupdates%20Cover%20Preview.user.js&id=XXX:314)
          at <anonymous>:3:98
          at eval (eval at exec_fn ((index):1), <anonymous>:28:123)
     
    Last edited: Nov 18, 2020
  13. terabyte

    terabyte Well-Known Member

    Joined:
    Nov 1, 2017
    Messages:
    32
    Likes Received:
    14
    Reading List:
    Link
    Well then... I'm not sure which one it was but Chrome just updated to v87 and Tampermonkey to v4.11. After restarting chrome the script is working properly.

    So, you can ignore my post above I guess... :rolleyes:

    ===

    EDIT
    Well, one suggestion actually: I'd also hide the rating/status lines and only show them specifically if the user chooses to show the details in the first place. Easy enough for me to cut that part from the script myself though.
     
    sz likes this.
  14. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    Good to know that it finally works for you too.
    Still don't know why the other script has worked for you and GM_xmlhttpRequest in my script has not worked with your older app/extension versions.

    Since i like the additional information i have shortend the extracted details in the small popup. At least it is not using as much space as before.

    Version 1.5.3
    • shorter details in small popup
     
    terabyte likes this.
  15. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    Just released Version 1.8.0
    - additional options:
    - toggle between description and tags in detailed popup
    - toggle of currently big popup with a smaller styled popup​
    - change of hotkeys:
    - [Key2]+[Key3] pushed to [Key5](Reload) and [Key6](Clear all)
    - Now [Key2](Description/Tags) and [Key3](small/big popup style)
    - while pressing [Key H] showing a list of available hotkeys
    known bugs:
    - (re-)loading of coverData can overwrite the current active coverData when the older coverData image finishes loading at a later time than the newer coverData. Can be visible on popup refresh/change from a function of a hotkey.

    bugfix release Version 1.8.1
    - no overwrite of currentCoverData if not currently active popup
    - display coverData when individual site finished parsing but image is still loading

    Version 1.8.3
    - added overflow autoscroll for long descriptions/tags;
    - bugfix for forum style;
    - visual bugfix for older firefox 56 for css style start values.

    bugfix release Version 1.8.4
    - keep showing loading animation when popup style was changed by a hotkey and the coverimage has not finished loading
     
    Last edited: Dec 14, 2020
  16. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    I'll post updates on this new thread where i can change the first post if there are bigger updates.
    https://forum.novelupdates.com/thre...to-preview-cover-images-on-greasyfork.117240/

    I just released Version 2.0.0 of my script
    • refactoring
    • added possibility to add additional external sources for coverPreviews into the script. For now www.scribblehub.com, www.webnovel.com, www.royalroad.com, bato.to and mangadex.org are added
    • mangadex exception: since data on the individual pages have no html id or unique css class to select, it was not possible to get data the same way as with the other sites. but mangadex has an open api (v2) which could be used to get data.

    complete feature set
    • should show a coverPreview everywhere on novelupdates.com and forum.novelupdates.com
    • coverPreview script will fetch a target link and tries to get coverimage link, title, description, rating, status, genre and tags
    • externalLinks(not to novelupdates) will display the popup with a red border and an additional link icon infront of the title (on first display of an external link tampermonkey will ask to allow access to the external sites)
    • description and more information from tags are only visible on the detailed styled version (switch between detailed and simple version with [key 1]
    • [key 2] will switch between description and other tags
    • simple styled popup will have reduced information available (rating, chapter count, status icon[ongoing/completed])
    • the popup can be switched to a smaller sized version [key 3]
    • in case of overflowing description/tags they will be autoscrolling which can be paused with [key 4]
    • if there are outdated information in a coverPreview you can reload only the current data with [key 5] or reset all data as it was at the install time. Currently cover text information and link to coverimage will be stored for 90 days.
    • while pressiong [key H] the hotkey allocation will be shown.
     
    runsing likes this.
  17. runsing

    runsing status : bleeding, health -10/s Novel Updates Staff

    Joined:
    Nov 4, 2015
    Messages:
    3,383
    Likes Received:
    6,846
    Reading List:
    Link
    i was surprised when suddenly i was asked to allow cross-domain function call, so that's what it was. you're on a roll in the last several days aren't you? (y)

    anyway, would it be possible to add one more key, for changing default cover background, from white, to darker color? maybe matching NU's dark crisp theme.

    here's how it look during loading on my FF 56 dev (haven't launched the newer FF in days, but i'd assume it'll look more or less the same, if it works on older FF

    preview_loading_large.jpg
    preview_loading_small.jpg
    preview_min_large.jpg
    preview_min_small_long_title.jpg
     
  18. sz

    sz Well-Known Member

    Joined:
    Mar 8, 2016
    Messages:
    48
    Likes Received:
    46
    Reading List:
    Link
    Well that was at a time where i didn't understand which and what function the userscript addon provided and tried to fetch the covers from the mainpage on the forum domain. If i am guessing right a userscript does not need any cross-domain rights to open/fetch other pages.
    At the time i tried to use the nativ javascript ajax/fetch call which would need open cross-domain rights, since these calls will be run from the website in domain context. These call would be normally used from inside the website.
    The function from the userscript addon GM_xmlhttpRequest seems to run the call from the client browser without domain context and fetches the page like a normal browser request without cross-domain needs.

    I just had the crazy idea to have a list of sites for the frontend settings, since i already seperated most code from the data selection for easier porting to mangaupdates. Besides mangadex the query selectors for the other sites could be quickly looked up and the code needed only minimal changes.

    Version 2.0.2
    - selected better css styles from the website/forum to auto adjust for the dark styled theme.

    If someone with mod rights is seing this thread. This thread can be closed and continued at
    https://forum.novelupdates.com/thre...to-preview-cover-images-on-greasyfork.117240/