alexadam / save-as-ebook

Save a web page/selection as an eBook (.epub format) - a Chrome/Firefox/Opera Web Extension
MIT License
1.1k stars 70 forks source link

Custom styles randomically neglected #37

Open bunglegrind opened 4 years ago

bunglegrind commented 4 years ago

Ok, another one:

page (not only this one...): https://developer.wordpress.org/plugins/plugin-basics/determining-plugin-and-content-directories/

custom style:

#wpadminbar {
    display:none;
}
#wporg-header {
    display:none;
}
header {
    display:none;
}
#secondary {
    display:none;
}
#wporg-footer {
    display:none;
}
.breadcrumbs {
    display:none;
}
.nav-links {
    display:none;
}
.table-of-contents {
    display:none;
}
.toc-jump {
    display:none;
}
#content {
    max-width:100%!important;
}
.screen-reader-text {
    display:none;
}

In the epub at random I see some of the html classes/ids that I set to display:none (#wporg-header, #wporg-footer).

I've observed that in the HTML code of the preview shown by the browser (with alt+shift+1 for instance) the classes can be hidden or absent at all, in the former case the epub will show the aforementioned issue, in the latter the epub will be correctly displayed.

I've experienced this issue both with the latest release and with the master branch.

bunglegrind commented 4 years ago

Hi Adam, there is something in your code that I really don't get...possibly related to this issue.

In file extractHtml.js, it looks like lines 329-335 (which are related to the custom styles) are never executed...

bunglegrind commented 4 years ago

It looks like Chrome is not affected...only Firefox

alexadam commented 4 years ago

hmm... that's the 'else' of the "Include (Custom) Style" check on the menu. it's a mess, I'll take a look on it

bunglegrind commented 4 years ago

I see, I've tried to follow your code execution...and I think I found the bug.

I guess the problem is when you inject the custom css style in the page (chrome.tabs.insertCSS line 273 in background.js), you should wait until the operation is completed (in fact, the method accepts a callback, both in Firefox and Chrome, despite what is written in Firefox docs).

At the moment, you're not waiting - and probably this causes the issue in Firefox.

Anyway, I kindly suggest you to refactor your code in a more functional style, using map, filter, reduce to get rid of the for cycles, possibly resorting to a linter in order to mantain a strict adherence to a particular coding style and employing an asynchronous library, such as parseq (https://github.com/douglascrockford/parseq) or similar to remove all the callbacks. And you should remove the function parameters that are unused.

oh, and put the libraries you're using (jquery, etc.) in a lib folder or similar.

alexadam commented 4 years ago

I fixed it, thanks for the help!

bunglegrind commented 4 years ago

Very good!